Styleguide - 9-9bis

1. Atoms - Titles / Texts

Quand musique et patrimoine entrent en résonnance !

Le 9-9bis, grand site du bassin minier,
Patrimoine mondial de l’UNESCO

Un site minier remarquable

Quand musique et patrimoine entrent en résonnance !

Quand musique et patrimoine entrent en résonnance !

Venir au 9-9bis

Depuis 2013, l'emblématique salle de spectacle du 9-9bis vous propose une programmation aussi éclectique qu'accessible à tous les publics.

Avec sa fosse, le terril 110 et la cité-jardin De Clercq, le 9-9bis restitue au visiteur l'environnement complet d'un ensemble minier caractéristique. Un héritage unique, inscrit sur la liste du Patrimoine mondial de l'Unesco au titre de "paysage culturel évolutif".

Rencontres, conférences, expositions : les Douches, c'est le rendez-vous culturel et patrimonial incontournable du bassin minier. Venez échanger et partager avec nos invités.

Rencontres, conférences, expositions : les Douches, c'est le rendez-vous culturel et patrimonial incontournable du bassin minier. Venez échanger et partager avec nos invités.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Paragraphe : Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

  1. text-blue Lorem ipsum dolor sit amet
  2. text-green Lorem ipsum dolor sit amet
  3. text-red Lorem ipsum dolor sit amet
  4. text-black Lorem ipsum dolor sit amet
  5. mx-0
  6. my-0
  7. m-0

2. Text sizes

Sizes / Screens default (< mob2) mob2 tab desk desk2 huge fhd wide
xs xs xs xs xs xs xs xs xs
sm sm sm sm sm sm sm sm sm
base base base base base base base base base
md md md md md md md md md
lg lg lg lg lg lg lg lg lg
xl xl xl xl xl xl xl xl xl
2xl 2xl 2xl 2xl 2xl 2xl 2xl 2xl 2xl
3xl 3xl 3xl 3xl 3xl 3xl 3xl 3xl 3xl
4xl 4xl 4xl 4xl 4xl 4xl 4xl 4xl 4xl
5xl 5xl 5xl 5xl 5xl 5xl 5xl 5xl 5xl
6xl 6xl 6xl 6xl 6xl 6xl 6xl 6xl 6xl
7xl 7xl 7xl 7xl 7xl 7xl 7xl 7xl 7xl
8xl 8xl 8xl 8xl 8xl 8xl 8xl 8xl 8xl

2. Atoms - Links / Buttons

Form elements

Contactez nous par email

Order elements

A order-1 tab:-order-1
B order-2 tab:-order-2
C order-3 tab:-order-3
D order-4 tab:-order-4
E order-5 tab:-order-5
F order-6 tab:-order-6
G order-7 tab:-order-7
H order-8 tab:-order-8
I order-9 tab:-order-9
J order-10 tab:-order-10
K order-11 tab:-order-11
L order-12 tab:-order-12
A -order-1 tab:order-1
B -order-2 tab:order-2
C -order-3 tab:order-3
D -order-4 tab:order-4
E -order-5 tab:order-5
F -order-6 tab:order-6
G -order-7 tab:order-7
H -order-8 tab:order-8
I -order-9 tab:order-9
J -order-10 tab:order-10
K -order-11 tab:order-11
L -order-12 tab:order-12
A order-first tab:-order-last
B order-last tab:-order-first
C order-none tab:order-none
A order-first tab:-order-last
B order-last tab:-order-first
C order-none tab:order-none
A -order-1 mob2:order-1
B -order-2 mob2:order-2
C -order-3 mob2:order-3
D -order-4 mob2:order-4
E -order-5 mob2:order-5
F -order-6 mob2:order-6
G -order-7 mob2:order-7
H -order-8 mob2:order-8
I -order-9 mob2:order-9
J -order-10 mob2:order-10
K -order-11 mob2:order-11
L -order-12 mob2:order-12
A order-1 mob2:-order-1
B order-2 mob2:-order-2
C order-3 mob2:-order-3
D order-4 mob2:-order-4
E order-5 mob2:-order-5
F order-6 mob2:-order-6
G order-7 mob2:-order-7
H order-8 mob2:-order-8
I order-9 mob2:-order-9
J order-10 mob2:-order-10
K order-11 mob2:-order-11
L order-12 mob2:-order-12
order-none mob2:order-none tab2:order-none desk:order-none desk2:order-none huge:order-none fhd:order-none wide:order-none
order-first mob2:order-first tab2:order-first desk:order-first desk2:order-first huge:order-first fhd:order-first wide:order-first
L order-last mob2:order-last tab2:order-last desk:order-last desk2:order-last huge:order-last fhd:order-last wide:order-last

Flex elements

!flex flex-col justify-end items-start
A order-1 tab:-order-1
B order-2 tab:-order-2
Offre BTP tab:!flex tab:flex-col tab:justify-center

Tabs

Grid layouts

grid 1 mobile / grid 1 tab/desk
grid 1 mobile / grid 1 tab/desk
grid 1 mobile / grid 1 tab/desk
grid 1 mobile / grid 1 tab/desk
grid 1 mobile / grid 1 tab/desk
grid 1 mobile / grid 1 tab/desk
grid 1 mobile / grid 1 tab/desk
grid 1 mobile / grid 1 tab/desk
grid 1 mobile / grid 1 tab/desk
grid 1 mobile / grid 1 tab/desk

Aspect Ratio elements

aspect-auto mob2:aspect-auto tab2:aspect-auto desk:aspect-auto desk2:aspect-auto huge:aspect-auto fhd:aspect-auto wide:aspect-auto
aspect-square mob2:aspect-square tab2:aspect-square desk:aspect-square desk2:aspect-square huge:aspect-square fhd:aspect-square wide:aspect-square
aspect-video mob2:aspect-video tab2:aspect-video desk:aspect-video desk2:aspect-video huge:aspect-video fhd:aspect-video wide:aspect-video

Keypoints elements

Fullscreen sections

Musique & Spectacle

Le Métaphone

Depuis 2013, l’emblématique salle de spectacle du 9-9bis vous propose une programmation aussi éclectique qu’accessible à tous les publics.

Le Métaphone, un concept unique au monde
Abonnez-vous et profitez de nos meilleures offres
La prog’ musique & spectacles

Avec le public

Les Douches

Rencontres, conférences, expositions : les Douches, c'est le rendez-vous culturel et patrimonial incontournable du bassin minier. Venez échanger et partager avec nos invités.

Famille & Jeune public
Scolaires & Groupes
Événements à venir

Pour les artistes

Les Studios

Le 9-9bis soutient la création musicale en mettant des studios haut de gamme à la disposition des artistes. On vous attend pour explorer, répéter, enregistrer !

Les résidences
Développer votre projet
Réservez un studio

3.
Atoms




Section
Section bg
Section bg gray
Section bg red
Section bg green
Section bg blue
Section bg black