Package components

Every Typetura package comes with numerous text components. These components are structured like the components in a design system. You can use these components anywhere on your page and they will adapt to that space. You don’t need to worry about what size your headline is, or if it is too big or small for the layout you are putting it in. Typetura components are designed to just work.

Class names
React
Class names

Component

Code

Primary headline

<h1 class="primary-headline"></h1>

Primary sub-headline

<h2 class="primary-subheadline"></h2>

Meta information

<h3 class="meta"></h2>

Section headline

<h2 class="section-headline"></h2>

Section sub-headline

<h3 class="section-subheadline"></h3>

Section label

<h4 class="section-label"></h4>

Big paragraph

<p class="big"></p>

Small paragraph

<p class="small"></p>

Caption

<p class="caption"></p>

Pullquote

<p class="pullquote"></p>

React

Component

Code

Primary headline

<Typetura.PrimaryHeadline></Typetura.PrimaryHeadline>

Primary sub-headline

<Typetura.PrimarySubheadline></Typetura.PrimarySubheadline>

Meta information

<Typetura.Meta></Typetura.Meta>

Section headline

<Typetura.SectionHeadline></Typetura.SectionHeadline>

Section sub-headline

<Typetura.SectionSubheadline></Typetura.SectionSubheadline>

Section label

<Typetura.SectionLabel></Typetura.SectionLabel>

Big paragraph

<Typetura.Big></Typetura.Big>

Small paragraph

<Typetura.Small></Typetura.Small>

Caption

<Typetura.Caption></Typetura.Caption>

Pullquote

<Typetura.Pullquote></Typetura.Pullquote>

Blockquote

<Typetura.Blockquote></Typetura.Blockquote>

Additionally, standard class names can be used inside the <Typetura.Contexts></Typetura.Contexts> component.

If you need a component that is not listed, or want to modify a component, follow the guide below: