Typography

Here' a list of typography elements we defined and styled in Portal template. Headings are defined as React components so they're easy to extend. For inline styles we opted for simple html tags.

Add headlines

Import text style components from the typography folder:

import { PageTitle, PageSubtitle, Heading2, Heading3, Heading4, Heading5, Heading6 } from '../components/typography';

<h1>- <h6> HTML tags and a subtitle paragraph use React components. They of indexing the titles for the table of contents.

Make sure page title and subtitle components wrapped inside a <header> tag:

<header> 
 <PageTitle>Your page title</PageTitle> 
 <PageSubtitle>Your page subtitle</PageSubtitle> 
</header>

Add headlines using these components:

<Heading2>Your headline</Heading2> 
<Heading3>Your headline</Heading3> 
<Heading4>Your headline</Heading4> 
<Heading5>Your headline</Heading5> 
<Heading6>Your headline</Heading6> 

Body text

For paragraphs use the plain HTML <p> tag.

Inline styles

Inline styles use plain HTML tags. Defined inline styles:

Hyperlinks

Hyperlinks use a Next.js Link component which enables page pre-caching for internal pages.
Import it from:

import { Link } from '../components/link';

Link component passes all attributes down to the <a> tag . Use it like this:

<Link href="/your-page-name">hyperlink</Link>

Customize text styles

Adjust the style and size of all typography elements in tailwind.config.js file. Text colors and margins can be adjusted in global.css . Here are the default values: