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
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>
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:
Extending your package
Support and services

Using Typetura - Previous

Configuration with packages

Next - Typetura packages

Extending your package

Last modified 1yr ago

Copy link