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: