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 &lt;small&gt; 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.

Kanye West, Musician
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

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
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>
  );
}