Doce Studio's Styleguide

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

h1

Doce Studio Typography

h2

Doce Studio Typography

h3

Doce Studio Typography

h4

Doce Studio Typography

h5

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
Text Link
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 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
  1. Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
  2. Fusce arcu ligula, dictum eget velit ac, aliquet fermentum turpis.
  3. 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.

This is a link.

  • unordered bullet point
  • unordered bullet point
  • unordered bullet point
  1. ordered bullet point
  2. ordered bullet point
  3. ordered bullet point

Colors

Common colors

Text
Light background
Primary Blue
Secondary / buttons
Buttons/ links hover

Other colors

Accent
...
...
...
...

Background color classes

.background-color-black
.background-color-white
.background-color-grey
.background-color-primary
.background-color-secondary

UI Elements

Buttons

Form elements

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Icons

Icon sizes

.icon-xlarge
.icon-large
.icon-medium
.icon-small
.icon-xsmall
.icon-1x1-xlarge
.icon-1x1-large
.icon-1x1-medium
.icon-1x1-small
.icon-1x1-xsmall

Social media icons

Facebook
Instagram
Twitter
Whatsapp
LinkedIn
LinkedIn
Pinterest
Tiktok
Google
Telegram
Snapchat
Behance
Spotify
Dribbble
Github
Github
Vimeo
Open sea
Discord

Common icons

Cross
Cross
Tick
circled arrow
Cross
up down
share
arrow
burgers

Widths

Containers

Container large
Container medium
Container small

Max widths

.max-width-xxsmall
.max-width-xsmall
.max-width-small
.max-width-medium
.max-width-large
.max-width-xlarge
.max-width-xxlarge

Spacings

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-custom1
.margin-custom2
.margin-custom3

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