Typography

Documentation and examples for NextJS Material Kit typography, including global settings, headings, body text, lists, and more.

Styles

You will find the styles for these components in
src/assets/jss/nextjs-material-kit/components/typographyStyle.js.

Headings

h1. NextJS Material Kit heading

h2. NextJS Material Kit heading

h3. NextJS Material Kit heading

h4. NextJS Material Kit heading

h5. NextJS Material Kit heading

h6. NextJS Material Kit heading

Header with small subtitle
Use <small> tag for the headers

<h1>h1. NextJS Material Kit heading</h1>
<h2>h2. NextJS Material Kit heading</h2>
<h3>h3. NextJS Material Kit heading</h3>
<h4>h4. NextJS Material Kit heading</h4>
<h5>h5. NextJS Material Kit heading</h5>
<h6>h6. NextJS Material Kit 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...

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>
  );
}