Clematites style guides
Première version standardisée
Titles
Global headings - H1 to H6
h1
Doce Studio Typography
h2
Doce Studio Typography
h3
Doce Studio Typography
h4
Doce Studio Typography
h5
Doce Studio Typography
h6
Doce Studio Typography
Overridden heading sizes
.heading-xxlarge
Doce Studio Typography
.heading-xlarge
Doce Studio Typography
.heading-large
Doce Studio Typography
.heading-medium
Doce Studio Typography
.heading-small
Doce Studio Typography
.heading-xsmall
Doce Studio Typography
Other html tags
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.
Links
Block quotes
Block Quote
Text sizes
.text-size-xlarge
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size-large
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size-medium
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size-small
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size-xsmall
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-size-xxsmall
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
Text weights
.text-weight-bold
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-semibold
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-medium
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-normal
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-light
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
Text weights
.text-weight-bold
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-semibold
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-medium
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-normal
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-weight-light
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
Text colors
.text-color-white
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-color-secondary
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-color-accent
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
Text colors
.text-align-left
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-align-center
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-align-right
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.text-align-justify
Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
Lists
.medium-list
- Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
- Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
- Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
.medium-list
- Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
- Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
- Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
Rich text Styling
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a quote block
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.
- unordered bullet point
- unordered bullet point
- unordered bullet point
- ordered bullet point
- ordered bullet point
- ordered bullet point
Colors
Common colors
Text
white
Primary
Secondary
Accent
Background color classes
.background-color-black
.background-color-white
.background-color-grey
.background-color-primary
.background-color-secondary
.background-color-tertiary
.background-color-dark
.background-color-accent-light
Spacings
Margin
.margin-tiny
.margin-xxsmall
.margin-xsmall
.margin-small
.margin-medium
.margin-large
.margin-xlarge
.margin-xxlarge
.margin-huge
.margin-xhuge
.margin-section
.margin-xxhuge
.margin-custom1
.margin-custom2
.margin-vertical
.margin-horizontal
.margin-left
.margin-right
.margin-bottom
.margin-top
Fixed bottom Margins
.margin-0
.margin-bottom 8 | .5rem - 8px
.margin-bottom 16 | 1rem - 16px
.margin-bottom-24 | 1.5rem - 24px
.margin-bottom-40 | 2.5rem - 40px
.margin-bottom-48 | 3rem - 48px
.margin-bottom-56 | 3.5 rem - 56px
.margin-bottom-80 | 5 rem - 80px
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-custom1
.padding-custom2
.padding-custom3
.padding-vertical
.padding-horizontal
.padding-left
.padding-top
.padding-right
.padding-bottom
Fixed bottom Margins
.margin-0
.margin-bottom 8 | .5rem - 8px
.margin-bottom 16 | 1rem - 16px
.margin-bottom-24 | 1.5rem - 24px
.margin-bottom-40 | 2.5rem - 40px
.margin-bottom-48 | 3rem - 48px
.margin-bottom-56 | 3.5 rem - 56px
.margin-bottom-80 | 5 rem - 80px
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-custom1
.padding-custom2
.padding-custom3
.padding-vertical
.padding-horizontal
.padding-left
.padding-top
.padding-right
.padding-bottom
Widths
Containers
Container full-width
Container large
Container medium
75rem - 1216px
Container small
63rem - 1008px
Max widths
.max-width-tiny
17.5rem - 280px
.max-width-xxsmall
22rem - 352px
.max-width-xsmall
30.5rem - 488px
.max-width-small
37rem - 592px
.max-width-medium
50rem - 800px
.max-width-large
63rem - 1008px
.max-width-xlarge
75rem - 1216px
.max-width-xxlarge