stadetoulousain.fr
Recherche

Styleguide


This is a place where you can find all basic design system items


Colors

  • color-primary

  • color-signal-success

  • color-signal-warning

  • color-signal-info

  • color-signal-danger

  • color-text-norm

  • color-text-weak

  • color-text-strong

  • color-text-invert

  • color-text-invert-weak

  • color-field-text

  • color-field-text-disabled

  • color-field-placeholder

  • color-field-background

  • color-field-background-disable

  • color-field-error-border

  • color-border-norm

  • color-border-weak

  • color-border-invert

  • color-background-norm

  • color-background-weak

  • color-background-invert

  • color-background-img-loading

  • color-interaction-norm

  • color-interaction-hover

  • color-interaction-active

  • color-interaction-contrast

Wrapper

main-wrapper


Card
main-wrapper__content

small-wrapper

Icons

  • checkbox_filledico-checkbox_filled
  • checkboxico-checkbox
  • closeico-close
  • arrowico-arrow
  • penaltyico-penalty
  • transfoico-transfo
  • rugbyico-rugby
  • searchico-search
  • expandico-expand
  • warningico-warning
  • mapico-map

Texts

Title h1

Title h2

Title h3

Title h4

Title h5

Subtitle

Subtitle smaller


Blockquote

Chapô

Body

Body smaller

Body x smaller


Link body

Button

Button smaller


Overline

Caption

Label


text-left

text-center

text-right


text-strong

text-weak

Forms

Inputs


Ceci est un text d'aide pour le champ







helper text

Checkbox


Selects

Buttons






Inverted





Link

Tags


Billetterie Boutique Équipe pro Tag avec lien Connecté Connecté avec lien

Inverted


Billetterie Boutique Équipe pro Tag avec lien Connecté Connecté avec lien

Inversed colors


Tag example

Title example


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim facilis iste neque nesciunt quas? Debitis dolorum eum illum ipsam! Amet enim exercitationem id nulla porro. Cumque deserunt dignissimos doloribus vero?



Tabulations

Table

Pos Équipe Pts J G N P B DIFF
1 Stade Toulousain 76 26 17 1 8 6 +36
2 Stade Toulousain 76 26 17 1 8 6 +36
3 Stade Toulousain 76 26 17 1 8 6 +36
4 Stade Toulousain 76 26 17 1 8 6 +36
5 Stade Toulousain 76 26 17 1 8 6 +36

Inverted

Pos Équipe Pts J G N P B DIFF
1 Stade Toulousain 76 26 17 1 8 6 +36
2 Stade Toulousain 76 26 17 1 8 6 +36
3 Stade Toulousain 76 26 17 1 8 6 +36
4 Stade Toulousain 76 26 17 1 8 6 +36
5 Stade Toulousain 76 26 17 1 8 6 +36

Cards

Article

Multimédias

Push

  • Saison 22-23 abonnez-vous !
    TOP 14

    Saison 22-23

    Saison 2022-23 abonnez-vous !

    Sous-titre

    Je m'abonne
  • Saison 22-23 abonnez-vous !
    TOP 14

    Saison 22-23

    Saison 2022-23 abonnez-vous !

    Sous-titre

    Je m'abonne
  • Saison 22-23 abonnez-vous !
    TOP 14

    Saison 22-23

    Saison 2022-23 abonnez-vous !

    Sous-titre

    Je m'abonne

Landing (extends Push)

Events

  • Label vert Label vert Label vert
    Label rouge Label rouge Label rouge
    Label bleu Label bleu Label bleu

    Stade Ernest-Wallon

    Évènement test 2

    Du 28/03/2023 au 31/03/2023

    Evénement réservé à nos partenaires

  • Label vert Label vert Label vert
    Label rouge Label rouge Label rouge
    Label bleu Label bleu Label bleu

    Stade Ernest-Wallon

    Évènement test 2

    Du 28/03/2023 au 31/03/2023

    Evénement réservé à nos partenaires

  • Label vert Label vert Label vert
    Label rouge Label rouge Label rouge
    Label bleu Label bleu Label bleu

    Stade Ernest-Wallon

    Évènement test 2

    Du 28/03/2023 au 31/03/2023

    Evénement réservé à nos partenaires

Match - Upcoming

Match - Timer

Match - Over

Members

Inverted

White background

Slider

Base

Slide 1

Inversed

Slide 1

With content on left

Slide 1

Centered