Learn about available text styles and how to use them.

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.

StyleComponentRendered tag
Page title<PageTitle><h1>
Headline largest<Heading2><h2>
Headline large<Heading3><h3>
Headline medium<Heading4><h4>
Headline small<Heading5><h5>
Headline smallest<Heading6><h6>
Subtitle<PageSubtitle><p class='page-subtitle'>
Body text<p><p>
Small body text<small><small>

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:

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

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:

StyleHTML tag

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:

ClassnameTypefaceWeightSize mobileSize desktopLetter spacing
text-titleSource Serif ProBold32 pt36 pt0.4 pt
text-headline-largestSource Serif ProBold24 pt28 pt0.4 pt
text-headline-largeSource Serif ProBold20 pt24 pt0.4 pt
text-headline-mediumSource Serif ProSemiBold20 pt20 pt0.4 pt
text-headline-smallInterSemiBold16 pt16 pt0.8 pt
text-headline-smallestInterSemiBold13 pt13 pt0.8 pt
text-subtitleInterRegular20 pt20 pt0.2 pt
text-baseInterRegular16 pt16 pt0.2 pt
text-smallInterRegular13 pt13 pt0.2 pt
text-codeSource Code ProMedium14 pt14 pt0.2 pt