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
.text-xl
Heading, .text-l
.text-l
Buttons
Text Labels
Text label
.text-label
Text label light
.text-label-light
Text label plain
.text-label-plain
Navigation
.nav-main
.nav-slashed
.nav-vertical
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.
.text-small
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.
.text-micro
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.
.card-tight
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.
.card-normal
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.
.card-large
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.
.card-xl
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.
.card-xxl
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
- 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.
Functions give you the raw values so you can totally customise the CSS output to your requirements.
Form
.form-no-padding
I am a heading H2
.invert
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.
.invert
I am a heading H2
.inverse-heading
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.
.inverse-text
Space Top 3xs
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.
.space-T-3xs
Space Top 2xs
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.
.space-T-2xs
Space Top xs
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.
.space-T-xs
Space Top s
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.
.space-T-s
Space Top m
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.
.space-T-m
Space Top l
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.
.space-T-l
Space Top xl
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.
.space-T-xl
Space Top 2xl
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.
.space-T-2xl
Space Top 3xl
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.
.space-T-3xl
Space Top 4xl
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.
.space-T-4xl
Space Top 5xl
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.
.space-T-5xl
Space Top 6xl
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.
.space-T-6xl
Space Bottom 3xs
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.
.space-B-3xs
Space Bottom 2xs
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.
.space-B-2xs
Space Bottom xs
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.
.space-B-xs
Space Bottom s
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.
.space-B-s
Space Bottom m
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.
.space-B-m
Space Bottom l
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.
.space-B-l
Space Bottom xl
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.
.space-B-xl
Space Bottom 2xl
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.
.space-B-2xl
Space Bottom 3xl
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.
.space-B-3xl
Space Bottom 4xl
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.
.space-B-4xl
Space Bottom 5xl
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.
.space-B-5xl
Space Bottom 6xl
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.
.space-B-6xl