Styleguides

Databird V 1.0

Balises HTML standard

Data Bird Titre

<h1>

Databird Titre

<h2>

Databird Titre

<h3>

Databird Titre

<h4>
Databird Titre
<h5>
Databird Titre
<h6>

Tailles de titre

titre-xl

titre-xl

titre-l

titre-l

titre-m

titre-m

titre-s

titre-s

titre-xs

titre-xs

Contenu HTML brut

Tous les paragraphes(HTML Tag)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

tous les liens (HTML Tag)
Text Link
Block quote (HTML Tag)
Block Quote

  • No bullet list

  • No bullet list

  • Unordered list

  • Unordered list

  1. Ordered list

  2. Ordered list

Tailles Texte

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

texte-taille-l

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

texte-taille-m

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

texte-taille-classique

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

texte-taille-s

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

texte-taille-xs

Graisse de texte

Phasellus a nulla in neque lacinia posuere.
texte-graisse-bold
Phasellus a nulla in neque lacinia posuere.
texte-graisse-normal

Styles de texte

Phasellus a nulla in neque lacinia posuere.
texte-style-italique
Phasellus a nulla in neque lacinia posuere.
texte-style-barre
Phasellus a nulla in neque lacinia posuere.
texte-style-majuscules
Phasellus a nulla in neque lacinia posuere.
texte-style-muted
Phasellus a nulla in neque lacinia posuere. (ATTENTION À NE PAS L'UTILISER N'IMPORTE OÙ)
texte-style-nowrap
Phasellus a nulla in neque lacinia posuere.
texte-style-citation
Click to see more
texte-style-lien

Alignements

Phasellus a nulla in neque lacinia posuere.
texte-aligner-gauche
Phasellus a nulla in neque lacinia posuere.
texte-aligner-centre
Phasellus a nulla in neque lacinia posuere.
texte-aligner-droite

Rich text

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

  • Bullet point one
  • Bullet point two

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Image caption

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

  1. Numbered list one
  2. Numbered list two
Rich text heading
Rich text heading

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

  • Bullet point one
  • Bullet point two

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Image caption

Rich text heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus mi quis viverra.

  1. Numbered list one
  2. Numbered list two
Rich text heading
Rich text heading

Couleurs

principale
principale-hover
sombre
claire
blanc
secondaire
ter
ter

Arrières-plans

bg-couleur-principale
bg-couleur-sombre
bg-couleur-claire

Couleurs texte

Phasellus a nulla in neque
texte-couleur-principale
Phasellus a nulla in neque
texte-couleur-sombre
Phasellus a nulla in neque
texte-couleur-claire
Phasellus a nulla in neque
texte-couleur-blanc

Boutons

bouton
bouton-sombre
bouton-blanc
bouton-claire
bouton-bordure
bouton-texte
Je me forme à la data analyse à temps pleinButton Text

Tailles Icones

icone-s
icone-m
icone-l
icone-carre-s
icone-carre-m
icone-carre-l

Réseaux sociaux

Champs formulaire

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

Champs formulaire 2

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

Marge

margin-0
margin-xxxs
margin-xxs
margin-xs
margin-s
margin-m
margin-l
margin-xl
margin-xxl
margin-enorme
margin-xenorme
margin-xxenorme
margin-custom1
margin-custom2
margin-custom3
margin-top
margin-right
margin-bottom
margin-left
margin-horizontal
margin-vertical
margin-0-all

Padding

padding-0
padding-minuscule
padding-xxs
padding-xs
padding-s
padding-m
padding-l
padding-xl
padding-xxl
padding-enorme
padding-xenorme
padding-xxenorme
padding-custom1
padding-custom2
padding-custom3
padding-haut
padding-droit
padding-bas
padding-gauche
padding-horizontal
padding-vertical
padding-0-all

Max width

max-width-xxs
max-width-xs
max-width-s
max-width-m
max-width-l
max-width-xl
max-width-xxl
max-width-full
max-width-full-tablette
max-width-full-mobile-landscape
max-width-full-mobile-portrait

Utiles