Structure
HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.
page-wrapper
main
container-default
container-small
button-group
Grid System
Anvil's grid system is based on IBM's 2x2 grid which makes is adaptiv & easier to handle.
is-col-2
is-col-4
is-col-6
is-col-8
is-col-10
is-col-12
Webflow Typography
HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.
H1
This is a placeholder.
H2
This is a placeholder.
H3
This is a placeholder.
H4
This is a placeholder.
H5
This is a placeholder.
H6
This is a placeholder.
paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Anvil Tyopography
We are using our own typography styles since HTML-tags is intended to the semantic structure. Our typography is fluid and scales with the display size.
heading-3xl
This is a placeholder.
heading-3xl
This is a placeholder.
heading-2xl
This is a placeholder.
heading-lg
This is a placeholder.
heading-md
This is a placeholder.
heading-sm
This is a placeholder.
heading-xs
This is a placeholder.
body-text-lg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
body-text-md
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
body-text-sd
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text Alignment
text-align-center
text is left
text-align-center
text is center
text-align-right
text is right
Text Colors
text-color-primary
Text color is in primary
text-color-secondary
Text color is in secondary
text-color-alternate
Text color is in alternate
text-color-info
Text color is in alternate
text-color-success
Text color is in alternate
text-color-warning
Text color is in alternate
Background Colors
bg-color-primary
bg-color-secondary
bg-color-alternate
bg-color-info
bg-color-success
bg-color-warning
Icons
icon-small
icon-default
icon-large
Other Utlilities
is-hide
is-hide-tablet
is-hide-mobile
is-global-padding-default
is-global-padding-small
is-global-padding-large