Typography

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

Styles

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

Headings

<h1>h1. Material Kit PRO heading</h1>
<h2>h2. Material Kit PRO heading</h2>
<h3>h3. Material Kit PRO heading</h3>
<h4>h4. Material Kit PRO heading</h4>
<h5>h5. Material Kit PRO heading</h5>
<h6>h6. Material Kit PRO heading</h6>
<h2>
  Header with small subtitle<br />
  <small>Use &lt;small&gt; tag for the headers</small>
</h2>

Paragraph

<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

import React from 'react';
// core components
import Quote from "components/Typography/Quote.js";

function Typography({...props}){
  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"
    />
  );
}

export default Typography;

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