Merantix Style Guide
Version 1.1
Page Structure
Page structure classes
page-wrapper
main-wrapper
section-{name}
page-padding
container-{size}
padding-vertical
Typography
HTML Headings
All H1 Headings
Heading 1
All H2 Headings
Heading 2
All H3 Headings
Heading 3
All H4 Headings
Heading 4
All H5 Headings
Heading 5
All H6 Headings
Heading 6
HTML Headings
heading-xxlarge
Heading 1
heading-xlarge
Heading 2
heading-large
Heading 3
heading-medium
Heading 4
heading-small
Heading 5
heading-xsmall
Heading 6
Other HTML Tags
All Paragraphs
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
All Links
All LinksAll Unordered Lists
No bullet list
No bullet list
All Unordered Lists
No bullet list
No bullet list
All Ordered Lists
No bullet list
No bullet list
No bullet list
All Block Quotes
Block Quote
Text Sizes
text-size-gigantic
Lorem ipsum
text-size-xxhuge
Lorem ipsum
text-size-xhuge
Lorem ipsum
text-size-huge
Lorem ipsum
text-size-xxlarge
Lorem ipsum
text-size-xlarge
Lorem ipsum
text-size-large
Lorem ipsum
text-size-medium
Lorem ipsum
text-size-regular
Lorem ipsum
text-size-small
Lorem ipsum
text-size-tiny
Lorem ipsum
Text Weights
text-weight-black
text-weight-xbold (900)
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-large (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Text Line Heights
text-lineheight-xtall
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
text-lineheight-tall
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
text-lineheight-normal
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
text-lineheight-short
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
text-lineheight-xshort
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
text-lineheight-none
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 Letter Spacings
text-letterspacing-xwide
A Lorem ipsum dolor sit amet
text-letterspacing-wide
A Lorem ipsum dolor sit amet
text-letterspacing-normal
A Lorem ipsum dolor sit amet
text-letterspacing-tight
A Lorem ipsum dolor sit amet
text-letterspacing-xtight
A Lorem ipsum dolor sit amet
Text Styles
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-link
text-style-2lines
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-style-3lines
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. 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-style-muted
text-style-muted
Text Alignment
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich Text
text-rich-text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
This is a link inside of a rich text
- List item
- List item
- List item
- List item
- List item
- List item
This is a block quote
Colors
Background Color (Core Colors)
background-color-black
background-color-white
border-color-lightmode
border-color-darkmode
background-color-darkblue
background-color-soft-blue
Background Color (Brand Colors)
background-color-rose100
background-color-yellow100
background-color-purple100
background-color-orange100
Background Color (Utility Colors)
background-color-success
warning
accessible-outline-color
Background Color (Gradients & Patterns)
background-color-gradient1
background-color-pattern1
Text Colors (Core Colors)
text-color-black
text-color-black
text-color-white
text-color-white
text-color-darkblue
text-color-darkblue
text-color-grey30
text-color-grey30
text-color-{add color}
text-color-{add color}
Text Colors (Brand Colors)
text-color-rose100
text-color-rose100
text-color-yellow100
text-color-yellow100
text-color-red100
text-color-purple100
text-color-orange100
text-color-orange100
Buttons
Buttons
Buttons on a dark background, add-on class is-darkmode
Buttons With Icons
Buttons on a dark background, add-on class is-darkmode
button
with-icon
is-darkmode
button
is-button-small
with-icon
is-darkmode
button-secondary
with-icon
is-darkmode
button-secondary
is-button-small
with-icon
is-darkmode
button-tertiary
with-icon
is-darkmode
button-tertiary
is-button-small
with-icon
is-darkmode
Icons
Sizes
icon-xxsmall
icon-xsmall
icon-small
icon-medium
icon-large
icon-xlarge
icon-{custom}
icon-1x1-xxsmall
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
icon-1x1-{custom}
Icons (HTML Embed)
HTML embed icons enable you to control icon color on hover.
HTML embed icons enable you to control icon color on hover.
icon-embed-xxsmall
icon-embed-xsmall
icon-embed-small
icon-embed-medium
icon-embed-large
icon-embed-xlarge
icon-embed-{custom}
Form
Form Elements
Thank you! Your submission has been received!
Images
Sizes
image-wrapper
is-1x1
image-wrapper
is-4x3
image-wrapper
is-3x2
image-wrapper
is-16x9
image-wrapper
is-{custom}
Spacing System
Margin
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-{custom}
Margin alignment
margin-top
margin-{size}
margin-bottom
margin-{size}
margin-top
margin-{size}
margin-top
margin-{size}
margin-top
margin-{size}
margin-top
margin-{size}
Padding
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-{custom}
Padding alignment
padding-top
padding-{size}
padding-bottom
padding-{size}
padding-left
padding-{size}
padding-right
padding-{size}
padding-vertical
padding-{size}
padding-horizontal
padding-{size}
Container System
Container sizes
container-large
container-medium
container-small
Max width
Max width sizes
max-width-full
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Max width full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
Useful classes
Hide and show classes
hide
hide-tablet
hide-mobile-landscape
hide-mobile-portrait
show
show-tablet
show-mobile-landscape
show-mobile-portrait
Utility classes
spacing-clean
z-index-1
z-index-2
align-center
div-square
clickable-off
layer
clickable-on
overflow-hidden
overflow-scroll
overflow-auto
margin-top-auto