Nextjs Typography
Documentation and examples for Nextjs typography, including global settings, headings, body text, lists, and more.
Styles
You will find the styles for these components in
assets/jss/nextjs-material-dashboard-pro/components/typographyStyle.js
.
Headings
h1. Material Dashboard PRO heading
h2. Material Dashboard PRO heading
h3. Material Dashboard PRO heading
h4. Material Dashboard PRO heading
h5. Material Dashboard PRO heading
h6. Material Dashboard PRO heading
Header with small subtitle
Use <small> tag for the headers
<h1>h1. Material Dashboard PRO heading</h1>
<h2>h2. Material Dashboard PRO heading</h2>
<h3>h3. Material Dashboard PRO heading</h3>
<h4>h4. Material Dashboard PRO heading</h4>
<h5>h5. Material Dashboard PRO heading</h5>
<h6>h6. Material Dashboard PRO heading</h6>
<h2>
Header with small subtitle<br />
<small>Use <small> tag for the headers</small>
</h2>
Paragraph
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
<p>
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
</p>
Quote
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
import React from 'react';
// core components
import Quote from "components/Typography/Quote.js";
export default function Typography(){
return (
<Quote
text="I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at."
author=" Kanye West, Musician"
/>
);
}
Text Colors
import React from 'react';
// core components
import Muted from "components/Typography/Muted.js";
import Primary from "components/Typography/Primary.js";
import Info from "components/Typography/Info.js";
import Success from "components/Typography/Success.js";
import Warning from "components/Typography/Warning.js";
import Danger from "components/Typography/Danger.js";
export default function Typography(){
return (
<div>
<Muted>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Muted>
<Primary>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Primary>
<Info>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Info>
<Success>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Success>
<Warning>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Warning>
<Danger>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Danger>
</div>
);
}