Styleguide

Composants

Actu
Actus
Agenda
Agenda preview
Albums list
Artistes list
Asso
Edito
Fiche
Fiches list
Footer
Full content
Header
Logos
Main content
Main playlist
Pagination
Réseau
Side actus
Side agenda
Side filters
Side infos
Side playlist
Spectacles list
Team
Top header
Videos list

Elements

Colors
Fonts
Icons
Inline
Links
Title
Buttons
Form elements

Colors

White to black

$color1-100 | $color1-200 | $color1-300 | $color1-400 | $color1-500 | $color1-1000

$color1-100 | #ffffff
$color1-200 | #F5F3EB
$color1-300 | #D8D8D8
$color1-400 | #CBCABE
$color1-500 | #BFBCB0
$color1-600 | #A1A08F
$color1-1000 | #000000
<div style="background-color:#ffffff;">$color1-100 | #ffffffdiv>
<div style="background-color:#F5F3EB;">$color1-200 | #F5F3EBdiv>
<div style="background-color:#D8D8D8;">$color1-300 | #D8D8D8div>
<div style="background-color:#CBCABE;">$color1-400 | #CBCABEdiv>
<div style="background-color:#BFBCB0;">$color1-500 | #BFBCB0div>
<div style="background-color:#A1A08F;">$color1-600 | #A1A08Fdiv>
<div style="background-color:#000000; color:white;">$color1-1000 | #000000div>

Blue

$color2-100

$color2-100 | #59CFDF
<div style="background-color:#59CFDF;">$color2-100 | #59CFDFdiv>

Orange

$color3-100

$color3-100 | #EB661A
<div style="background-color:#EB661A;">$color3-100 | #EB661Adiv>

Fonts

Citizen OT Bold

.citizen-bold

pierre qui roule n'amasse pas mousse
<div class="citizen-bold">pierre qui roule n'amasse pas moussediv>

Citizen OT Light

.citizen-light

pierre qui roule n'amasse pas mousse
<div class="citizen-light">pierre qui roule n'amasse pas moussediv>

Nitti Grotesk SemiLight

.nittigrotesk-semilight

pierre qui roule n'amasse pas mousse
<div class="nittigrotesk-semilight">pierre qui roule n'amasse pas moussediv>

Nitti Grotesk ExtraBlack

.nittigrotesk-extrablack

pierre qui roule n'amasse pas mousse
<div class="nittigrotesk-extrablack">pierre qui roule n'amasse pas moussediv>

Nitti Grotesk Bold

.nittigrotesk-bold

pierre qui roule n'amasse pas mousse
<div class="nittigrotesk-bold">pierre qui roule n'amasse pas moussediv>

Nitti Grotesk Regular

.nittigrotesk-regular

pierre qui roule n'amasse pas mousse
<div class="nittigrotesk-regular">pierre qui roule n'amasse pas moussediv>

Nitti Grotesk Medium

.nittigrotesk-medium

pierre qui roule n'amasse pas mousse
<div class="nittigrotesk-medium">pierre qui roule n'amasse pas moussediv>

Nitti Grotesk SemiLightItalic

.nittigrotesk-semillightitalic

pierre qui roule n'amasse pas mousse
<div class="nittigrotesk-semillightitalic">pierre qui roule n'amasse pas moussediv>

Nitti Grotesk ExtraLight

.nittigrotesk-extralight

pierre qui roule n'amasse pas mousse
<div class="nittigrotesk-extralight">pierre qui roule n'amasse pas moussediv>

Citizen Kaio Bold

.kaio-bold

pierre qui roule n'amasse pas mousse
<div class="kaio-bold">pierre qui roule n'amasse pas moussediv>

Kaio Black

.kaio-black

pierre qui roule n'amasse pas mousse
<div class="kaio-black">pierre qui roule n'amasse pas moussediv>

Kaio Bold

.kaio-bold

pierre qui roule n'amasse pas mousse
<div class="kaio-bold">pierre qui roule n'amasse pas moussediv>

Kaio Light

.kaio-light

pierre qui roule n'amasse pas mousse
<div class="kaio-light">pierre qui roule n'amasse pas moussediv>

Kaio Medium

.kaio-medium

pierre qui roule n'amasse pas mousse
<div class="kaio-medium">pierre qui roule n'amasse pas moussediv>

Kaio (regular))

.kaio

pierre qui roule n'amasse pas mousse
<div class="kaio">pierre qui roule n'amasse pas moussediv>

Citizen OT Bold

.citizen-bold

pierre qui roule n'amasse pas mousse
<div class="citizen-bold">pierre qui roule n'amasse pas moussediv>

Citizen OT Light

.citizen-light

pierre qui roule n'amasse pas mousse
<div class="citizen-light">pierre qui roule n'amasse pas moussediv>

Icons

Arrows

.arrow-right | arrow-right-blue | arrow-right-black | arrow-right-white 




<svg class="arrow-right">
  <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#arrow-right">use>
svg>
<br/>
<svg class="arrow-right arrow-right-blue">
  <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#arrow-right">use>
svg>
<br/>
<svg class="arrow-right arrow-right-black">
  <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#arrow-right">use>
svg>
<br/>
<div style="background-color:gray; padding: 1rem; display:inline-block;">
  <svg class="arrow-right arrow-right-white">
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#arrow-right">use>
  svg>
div>

Panier

.panier 

<div class="panier">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#panier">use>
  svg>
div>

Vegetable

.vegetable 

<svg class="vegetable">
  <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#vegetable">use>
svg>

Inline

Paragraphe

lorem ispum

<p>lorem ispump>

Lien 1

lorem

lorem 
<a href="google.com">lorema>

.linkarrow | .linkarrow-white

lorem ipsum isset dolor amen sur la plage pour voir sur 2 lignes 

<a href="#" class="linkarrow">
  <svg class="arrow-right">
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#arrow-right">use>
  svg>
  <span class="linkarrow_content">lorem ipsum isset dolor amen sur la plage pour voir sur 2 lignesspan>
a>
<br>
<div style="background-color:gray;padding:1rem">
  <a href="#" class="linkarrow linkarrow-white">
    <svg class="arrow-right arrow-right-white">
      <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#arrow-right">use>
    svg>
    <span class="linkarrow_content">lorem ipsum isset dolor amen sur la plage pour voir sur 2 lignesspan>
  a>
div>
<br>
<div style="background-color:gray;padding:1rem">
  <a href="#" class="linkarrow linkarrow-white">
    <span class="linkarrow_content">s'abonnerspan>
  a>
div>

Add to cart

.addtocart

Commander 
<a href="#" class="addtocart">
  <div class="panier">
    <svg>
      <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#panier">use>
    svg>
  div>
  <span class="addtocart_content">Commanderspan>
a>

Socials

.social .social-fb | .social-sc .social 

<a href="#" class="social-fb social">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#facebook">use>
  svg>
a>
<a href="#" class="social-fb social social-white">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#facebook">use>
  svg>
a>
<a href="#" class="social-sc social">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#soundcloud">use>
  svg>
a>
<a href="#" class="social-sc social social-white">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#soundcloud">use>
  svg>
a>
<a href="#" class="social-inst social">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#instagram">use>
  svg>
a>
<a href="#" class="social-inst social social-white">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#instagram">use>
  svg>
a>
<a href="#" class="social-web social">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#web">use>
  svg>
a>
<a href="#" class="social-web social social-white">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#web">use>
  svg>
a>
<a href="#" class="social-download social">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#download">use>
  svg>
a>
<a href="#" class="social-download social social-white">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#download">use>
  svg>
a>
<a href="#" class="social-mix social">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#mixcloud">use>
  svg>
a>
<a href="#" class="social-mix social social-white">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#mixcloud">use>
  svg>
a>
<a href="#" class="social-tw social">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#twitter">use>
  svg>
a>
<a href="#" class="social-tw social social-white">
  <svg>
    <use xlink:href="../wp-content/themes/lacurieuse/src/assets/svg/generated/sprite.svg#twitter">use>
  svg>
a>

Title

H1

.h1

Lorem ipsum

<h1>Lorem ipsumh1>

h1-2

.h1-2

Loreu ipsum


  
Loreu ipsum

H2

.h2

Lorem ipsum

<h2>Lorem ipsumh2>

H2 2

.h2-2

Lorem ipsum

<h2 class="h2-2">Lorem ipsumh2>

H3

.h3

Lorem ipsum

<h3>Lorem ipsumh3>

H3 2

.h3-2

Lorem ipsum

<h3 class="h3-2">Lorem ipsumh3>

H3 3

.h3-3 | .h3-3-hasLine

Lorem ipsum isset dolor amen

Lorem ipsum isset dolor amen 

<h3 class="h3-3">
  <span class="h3-3_content">Lorem ipsum isset dolor amenspan>
h3>
<h3 class="h3-3 h3-3-hasLine">
  <span class="h3-3_content">Lorem ipsum isset dolor amenspan>
h3>

h4

Lorem ipsum

<h4>Lorem ipsumh4>

h4 2

.h4-2

Lorem ipsum

<h4 class="h4-2">Lorem ipsumh4>

h5

Lorem ipsum
<h5>Lorem ipsumh5>

h5 2

.h5-2

Lorem ipsum
<h5 class="h5-2">Lorem ipsumh5>

Buttons

Button exemple

.exemple

lorem
<div class="button1">loremdiv>

Form