HTML Headings

I am a heading H1

I am a heading H2

I am a heading H3

I am a heading H4

I am a heading H5
I am a heading H6

Fluid typography and spacing are crucial components of responsive design. CSS variables enable your design to respond gracefully to different screen sizes, delivering an optimal user experience on desktops, tablets, and mobile devices.

Special Headings

Heading, .text-xl

Heading, .text-l

Buttons

Primary Button
Secondary Button
Light Button
Dark Button
Muted Button
Default Button
Text link

Text Labels

Text label
Text label

Navigation

Text Styles

This is the Hero text! The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements.

This is the Lead text! The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements.

This is the Normal text! The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements.

This is the Small text! The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements.

This is The Micro text! The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements.

Cards

This is the Card text! The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements.

This is the Card text! The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements.

This is the Card text! The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements.

Rich Text

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements opinionated cod, and in fact power each one under the hood.

  • opinionated code
  • you the raw values
  • CSS output to your requirements

The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements mimic the above mixins, and in fact power each one under the hood. 

This is the link

  1. opinionated code
  2. you the raw values
  3. CSS output to your requirements

The four functions mimic the above mixins, and in fact power each one under the hood. Where mixins generate (slightly) opinionated code, functions give you the raw values so you can totally customise the CSS output to your requirements mimic the above mixins, and in fact power each one under the hood.

Functions give you the raw values so you can totally customise the CSS output to your requirements.

Form