headers

titres & textes boutons formulaires recherche notifications icones tableaux pagination tags

espace club

Fédération Française de Ski
68974 - Comité Ski Alpes Provence

<div class="c-header">
    <div class="wrapper">
        <div class="c-header__name">Fédération Française de Ski</div>
        <div class="c-header__title"><h1>68974 - Comité Ski Alpes Provence</h1></div>
    </div>
</div>

Fédération Française de Ski
41205 - Comité Ski Alpes Provence

<div class="login">
<!-- .login se trouve sur le <body> -->
<div class="c-header">
    <div class="wrapper">
        <div class="c-header__name">Fédération Française de Ski</div>
        <div class="c-header__title"><h1>41205 - Comité Ski Alpes Provence</h1></div>
    </div>
</div>
</div>

espace comités

Fédération Française de Ski
CS DU LYONNAIS ET PAYS DE L AIN

<div class="espace-comite--theme">
<!-- la classe .espace-comite--theme se trouve sur le <body> -->
<div class="c-header">
    <div class="wrapper">
        <div class="c-header__name">Fédération Française de Ski</div>
        <div class="c-header__title"><h1>CS DU LYONNAIS ET PAYS DE L AIN</h1></div>
    </div>
</div>
</div>

Fédération Française de Ski
CS DU LYONNAIS ET PAYS DE L AIN

<div class="espace-comite--theme login">
<!-- les classes .espace-comite--theme et .login se trouvent sur le <body> -->
<div class="c-header">
    <div class="wrapper">
        <div class="c-header__name">Fédération Française de Ski</div>
        <div class="c-header__title"><h1>CS DU LYONNAIS ET PAYS DE L AIN</h1></div>
    </div>
</div>
</div>

headers

titres & textes

boutons formulaires recherche notifications icones tableaux pagination tags

h1 & h1-like

Lorem ipsum sid amet

<h1>Lorem ipsum sid amet</h1>

Lorem ipsum sid amet

<span class="h1-like">Lorem ipsum sid amet</span>

h2 & h2-like

Lorem ipsum sid amet

<h2>Lorem ipsum sid amet</h2>

Lorem ipsum sid amet

<span class="h2-like">Lorem ipsum sid amet</span>

h3 & h3-like

Lorem ipsum sid amet

<h3>Lorem ipsum sid amet</h3>

Lorem ipsum sid amet

<span class="h3-like">Lorem ipsum sid amet</span>

h4 & h4-like

Lorem ipsum sid amet

<h4>Lorem ipsum sid amet</h4>

Lorem ipsum sid amet

<span class="h4-like">Lorem ipsum sid amet</span>

les textes

Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.
Ectur, nem diam id quosanis acea aut optassunt dolorrore verume sam, totatur re cus moluptam nonempelis ra velliquae explatem la sinulloriae.

<p>Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.<br/>Ectur, nem diam id quosanis acea aut optassunt dolorrore verume sam, totatur re cus moluptam nonempelis ra velliquae explatem la sinulloriae.</p>

<p class="u-txt-small">Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.<br/>Ectur, nem diam id quosanis acea aut optassunt dolorrore verume sam, totatur re cus moluptam nonempelis ra velliquae explatem la sinulloriae.</p>

<p class="u-txt-red">Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.<br/>Ectur, nem diam id quosanis acea aut optassunt dolorrore verume sam, totatur re cus moluptam nonempelis ra velliquae explatem la sinulloriae.</p>

<p class="u-txt-green">Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.<br/>Ectur, nem diam id quosanis acea aut optassunt dolorrore verume sam, totatur re cus moluptam nonempelis ra velliquae explatem la sinulloriae.</p>

<p class="u-txt-light">Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.<br/>Ectur, nem diam id quosanis acea aut optassunt dolorrore verume sam, totatur re cus moluptam nonempelis ra velliquae explatem la sinulloriae.</p>

<p class="u-txt-lighter">Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.<br/>Ectur, nem diam id quosanis acea aut optassunt dolorrore verume sam, totatur re cus moluptam nonempelis ra velliquae explatem la sinulloriae.</p>

Lorem ipsum sid amet Am esectiistem 🤷🏻‍♂️ ?.

<p class="">Lorem ipsum sid amet <span class='u-txt-icon'>Am esectiistem</span> 🤷🏻‍♂️ ?.</p>

<p class="u-txt-small u-txt-red">Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.<br/>Ectur, nem diam id quosanis acea aut optassunt dolorrore verume sam, totatur re cus moluptam nonempelis ra velliquae explatem la sinulloriae.</p>

liens

Lorem ipsum sid amet

<a href="#">Lorem ipsum sid amet</a>

headers titres & textes

boutons

formulaires recherche notifications icones tableaux pagination tags

bouton standard

Lorem ipet

<a class="c-button">Lorem ipet</a>

<button class="c-button">Lorem ipsum sid amet</button>

petit bouton

Lorem ipet

<a class="c-button c-button--small">Lorem ipet</a>

<button class="c-button c-button--small">Lorem ipsum sid amet</button>

bouton rouge

Lorem ipet

<a class="c-button c-button--red">Lorem ipet</a>

<button class="c-button c-button--red">Lorem ipsum sid amet</button>

bouton secondaire

Lorem ipet

<a class="c-button c-button--shadow">Lorem ipet</a>

<button class="c-button c-button--shadow">Lorem ipsum sid amet</button>

bouton avec icone 🤷🏻‍♂️ ?

Lorem ipet

<a class="c-button">
    <span class='c-button__icon'>
    	<svg xmlns='http://www.w3.org/2000/svg'
             viewBox='0 0 36 36'>
    		<path d='M20.87,11.14h-13l5.56-5.49A1,1,0,0,0,12,4.22L4,12.13,12,20a1,1,0,0,0,1.41-1.42L7.86,13.14h13a9.08,9.08,0,0,1,9.13,9,9,9,0,0,1-5,8A1,1,0,0,0,25.93,32a11,11,0,0,0-5.06-20.82Z'></path>
    	</svg>
    </span> Lorem ipet</a>

<button class="c-button">
    <span class='c-button__icon'>
    	<svg xmlns='http://www.w3.org/2000/svg'
             viewBox='0 0 36 36'>
    		<path d='M20.87,11.14h-13l5.56-5.49A1,1,0,0,0,12,4.22L4,12.13,12,20a1,1,0,0,0,1.41-1.42L7.86,13.14h13a9.08,9.08,0,0,1,9.13,9,9,9,0,0,1-5,8A1,1,0,0,0,25.93,32a11,11,0,0,0-5.06-20.82Z'></path>
    	</svg>
    </span> Lorem ipsum sid amet</button>

bouton gris

Lorem ipet

<a class="c-button c-button--gray">Lorem ipet</a>

<button class="c-button c-button--gray">Lorem ipsum sid amet</button>

bouton désactivé v1 : va être modifié

Lorem ipet

<a class="c-button c-button--gray c-button--disabled">Lorem ipet</a>

<button class="c-button c-button--gray c-button--disabled">Lorem ipsum sid amet</button>

bouton désactivé v2 : TODO

Lorem ipet

<a class="c-button" disabled="disabled">Lorem ipet</a>

<button class="c-button" disabled="disabled">Lorem ipsum sid amet</button>

headers titres & textes boutons

formulaires

recherche notifications icones tableaux pagination tags

les éléments

<input class="c-input" type="text" value="Lorem ipsum sid amet"/>

<input class="c-input" type="text" disabled="disabled" value="Lorem ipsum sid amet"/>

<input class="c-input c-input--error" type="text" value="Lorem ipsum sid amet"/>

<input class="c-input c-input--small" type="text" value="Lorem ipsum sid amet"/>

<input class="c-input c-input--block" type="text" value="Lorem ipsum sid amet"/>

<input class="c-input" type="number" value="100"/>

<textarea class="c-input">Lorem ipsum sid amet</textarea>

select

<select class="c-input">
    <option value='toto'>toto</option>
    <option value='tata'>tata</option>
</select>

<select class="c-input c-input--small">
    <option value='toto'>toto</option>
    <option value='tata'>tata</option>
</select>

<select class="c-input c-input--block">
    <option value='toto'>toto</option>
    <option value='tata'>tata</option>
</select>

<select class="c-input c-input--block c-input--small">
    <option value='toto'>toto</option>
    <option value='tata'>tata</option>
</select>

checkbox & radio button

Lorem ipsum sid amet

<label><input type="radio" class="c-input"/> Lorem ipsum sid amet<label>

Lorem ipsum sid amet

<label><input type="radio" class="c-input" checked="checked"/> Lorem ipsum sid amet<label>

Lorem ipsum sid amet

<label><input type="checkbox" class="c-input"/> Lorem ipsum sid amet<label>

Lorem ipsum sid amet

<label><input type="checkbox" checked="checked" class="c-input"/> Lorem ipsum sid amet<label>

Lorem ipsum sid amet : todo small

<label><input type="checkbox" checked="checked" class="c-input c-input--small"/> Lorem ipsum sid amet : todo small<label>

headers titres & textes boutons formulaires

recherche

notifications icones tableaux pagination tags

boite de recherche avancée

<div data-columns="4" class="search-container">
    <div>
    	<label for="nom" class="c-input--block">Nom</label>
    	<input id="nom" name="nom" type="text" value="" class="c-input" pill_link="nom">
    </div>
    
    <!-- la recherche avancée
         est identifiée par la classe .c-search-advanced -->
         
    <div class="c-search-advanced">
    	<label for="type[]" class="c-input--block">Type club</label>
    	<label class="c-input--block">
    		<input type="checkbox" name="type[P]" value="P" class="c-input" pill_link="type">
    		Plaine
    	</label>
    	<label class="c-input--block">
    		<input type="checkbox" name="type[M]" value="M" class="c-input" pill_link="type">
    		Montagne
    	</label>
    	<label class="c-input--block">
    		<input type="checkbox" name="type[undefined]" value="" class="c-input" pill_link="type">
    		Non Défini
    	</label>
    	</div>
    <div class="c-search-advanced">
        <label for="disciplines[]" class="c-input--block">Disciplines</label>
        <label class="c-input--block">
            <input id="discipline_S" name="disciplines[S]" value="S" type="checkbox" class="c-input" pill_link="disciplines">
            Saut à Ski
        </label>
        <label class="c-input--block">
            <input id="discipline_Y" name="disciplines[Y]" value="Y" type="checkbox" class="c-input" pill_link="disciplines">
            Ski Freestyle
        </label>
        <label class="c-input--block">
            <input id="discipline_K" name="disciplines[K]" value="K" type="checkbox" class="c-input" pill_link="disciplines">
            Ski de Vitesse
        </label>
        <label class="c-input--block">
            <input id="discipline_W" name="disciplines[W]" value="W" type="checkbox" class="c-input" pill_link="disciplines">
            Snowboard
        </label>
    </div>
    <div>
    	<label for="statuts" class="s-form-grid__label">Statut du club</label>
    	<label class="c-input--block">
            <input name="statut" type="radio" value="" class="c-input" checked="" pill_link="statut">
    		Tous
    	</label>
    	<label class="c-input--block">
            <input name="statut" type="radio" value="A" class="c-input" pill_link="statut">
    		Actifs uniquement </label>
    	<label class="c-input--block">
            <input name="statut" type="radio" value="S" class="c-input" pill_link="statut">
    		Inactifs uniquement
        </label>
    </div>
    <div class="c-search-advanced">
    	<label for="departement" class="s-form-grid__label">Departement</label>
    	<select id="departement" name="departement" class="c-input" pill_link="genre">
    		<option value="" selected="">- Departement -</option>
    		<option value="01 (arr. Bourg et Belley)">01 (arr. Bourg et Belley)</option><option value="69">69</option>	
        </select>
    </div>
	<button class="c-button">
		<span class="c-button__icon">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
				<path d="M16.33 5.05A10.95 10.95 0 115.39 16 11 11 0 0116.33 5.05m0-2.05a13 13 0 1013 13 13 13 0 00-13-13z" class="clr-i-outline clr-i-outline-path-1"></path>
				<path d="M35 33.29l-7.37-7.42-1.42 1.41 7.37 7.42A1 1 0 1035 33.29z" class="clr-i-outline clr-i-outline-path-2"></path>
			</svg>
		</span>
		Recherche
	</button>
    
    <!-- il suffit d'ajouter la balise
         avec la classe .search-more à l'intérieur du .search-container
         pour afficher / masquer la recherche avancée -->
         
    <div class="search-more"></div>
</div>

<div data-columns="4" class="search-container search-display-advanced">        
    <!-- la recherche avancée est déjà visible
         avec la classe .search-display-advanced -->
         
    <div>
    	<label for="nom" class="c-input--block">Nom</label>
    	<input id="nom" name="nom" type="text" value="" class="c-input" pill_link="nom">
    </div>
    
    <!-- la recherche avancée
         est identifiée par la classe .c-search-advanced -->
         
    <div class="c-search-advanced">
    	<label for="type[]" class="c-input--block">Type club</label>
    	<label class="c-input--block">
    		<input type="checkbox" name="type[P]" value="P" class="c-input" pill_link="type">
    		Plaine
    	</label>
    	<label class="c-input--block">
    		<input type="checkbox" name="type[M]" value="M" class="c-input" pill_link="type">
    		Montagne
    	</label>
    	<label class="c-input--block">
    		<input type="checkbox" name="type[undefined]" value="" class="c-input" pill_link="type">
    		Non Défini
    	</label>
    	</div>
    <div class="c-search-advanced">
        <label for="disciplines[]" class="c-input--block">Disciplines</label>
        <label class="c-input--block">
            <input id="discipline_S" name="disciplines[S]" value="S" type="checkbox" class="c-input" pill_link="disciplines">
            Saut à Ski
        </label>
        <label class="c-input--block">
            <input id="discipline_Y" name="disciplines[Y]" value="Y" type="checkbox" class="c-input" pill_link="disciplines">
            Ski Freestyle
        </label>
        <label class="c-input--block">
            <input id="discipline_K" name="disciplines[K]" value="K" type="checkbox" class="c-input" pill_link="disciplines">
            Ski de Vitesse
        </label>
        <label class="c-input--block">
            <input id="discipline_W" name="disciplines[W]" value="W" type="checkbox" class="c-input" pill_link="disciplines">
            Snowboard
        </label>
    </div>
    <div>
    	<label for="statuts" class="s-form-grid__label">Statut du club</label>
    	<label class="c-input--block">
            <input name="statut" type="radio" value="" class="c-input" checked="" pill_link="statut">
    		Tous
    	</label>
    	<label class="c-input--block">
            <input name="statut" type="radio" value="A" class="c-input" pill_link="statut">
    		Actifs uniquement </label>
    	<label class="c-input--block">
            <input name="statut" type="radio" value="S" class="c-input" pill_link="statut">
    		Inactifs uniquement
        </label>
    </div>
    <div class="c-search-advanced">
    	<label for="departement" class="s-form-grid__label">Departement</label>
    	<select id="departement" name="departement" class="c-input" pill_link="genre">
    		<option value="" selected="">- Departement -</option>
    		<option value="01 (arr. Bourg et Belley)">01 (arr. Bourg et Belley)</option><option value="69">69</option>	
        </select>
    </div>
	<button class="c-button">
		<span class="c-button__icon">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
				<path d="M16.33 5.05A10.95 10.95 0 115.39 16 11 11 0 0116.33 5.05m0-2.05a13 13 0 1013 13 13 13 0 00-13-13z" class="clr-i-outline clr-i-outline-path-1"></path>
				<path d="M35 33.29l-7.37-7.42-1.42 1.41 7.37 7.42A1 1 0 1035 33.29z" class="clr-i-outline clr-i-outline-path-2"></path>
			</svg>
		</span>
		Recherche
	</button>
    
    <!-- il suffit d'ajouter la balise
         avec la classe .search-more à l'intérieur du .search-container
         pour afficher / masquer la recherche avancée -->
         
    <div class="search-more"></div>
</div>

headers titres & textes boutons formulaires recherche

notifications

icones tableaux pagination tags

principe

une notification basic, une notification basic, le texte doit être entre 'p' et il se mettra au bon endroit.

Notification ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.

Lorem ipsum iistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.

<div>
    <!-- une notification basic,
         le texte doit être entre <p>
         et il se mettra au bon endroit -->
    <div class="c-notification">
        <p>une notification basic,
        une notification basic, le texte doit être entre 'p' et il se mettra au bon endroit.</p>
    </div>
    <!-- il suffit d'ajouter une croix
         pour que la notification soit fermable -->
    <div class="c-notification">
        <span class='icon icon--close'></span>
        <p>Notification ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.</p>
        <p>Lorem ipsum iistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.</p>
    </div>
</div>

notifs de base

Notification ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.

Lorem ipsum iistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.

<div class="c-notification">
    <span class='icon icon--close'></span>
    <p>Notification ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.</p>
    <p>Lorem ipsum iistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.</p>
</div>

Notification ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.

<div class="c-notification c-notification--succes">
    <p>Notification ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.</p>
</div>

Attention ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.

<div class="c-notification c-notification--warning">
    <p>Attention ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.</p>
</div>

Erreur ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.

<div class="c-notification c-notification--error">
    
    <p>Erreur ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.</p>
</div>

<div class="c-notification c-notification--tooltip">
    
    <p>Bon à savoir ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.</p>
</div>

Gros ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.

<div class="c-notification c-notification--big">
    <p>Gros ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.</p>
</div>

La totale ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.

<div class="c-notification c-notification--error c-notification--big">
    <span class='icon icon--close'></span>
    <p>La totale ! Am esectiistem quis enestis repeles vente dundigent quiandus aut experiam quosto debis aturest quibuscid ma corepedis es simolut quae.</p>
</div>

notifs en petit : todo

headers titres & textes boutons formulaires recherche notifications

icones

tableaux pagination tags

usage

<div>
    <!-- icones taille standard --> 
    <span class="icon icon--home"></span>
    <!-- icones petite taille --> 
    <span class="icon icon--small icon--home"></span>
    <!-- icones grande taille --> 
    <span class="icon icon--large icon--home"></span>
</div>

set de base

<span class="icon icon--check"></span>

<span class="icon icon--check-line"></span>

<span class="icon icon--check-solid"></span>

<span class="icon icon--cross"></span>

<span class="icon icon--close"></span>

<span class="icon icon--edit"></span>

<span class="icon icon--edit-file"></span>

<span class="icon icon--error-line"></span>

<span class="icon icon--error-solid"></span>

<span class="icon icon--exclamation"></span>

<span class="icon icon--eye"></span>

<span class="icon icon--eye-hide"></span>

<span class="icon icon--file"></span>

<span class="icon icon--home"></span>

<span class="icon icon--help"></span>

<span class="icon icon--info-line"></span>

<span class="icon icon--info-solid"></span>

<span class="icon icon--login"></span>

<span class="icon icon--logout"></span>

<span class="icon icon--minus"></span>

<span class="icon icon--plus"></span>

<span class="icon icon--search"></span>

<span class="icon icon--warning"></span>

<span class="icon icon--warning-solid"></span>

les flèches

<span class="icon icon--arrow-top"></span>

<span class="icon icon--arrow-right"></span>

<span class="icon icon--arrow-down"></span>

<span class="icon icon--arrow-left"></span>

<span class="icon icon--download"></span>

<span class="icon icon--arrow-double-top"></span>

<span class="icon icon--arrow-double-right"></span>

<span class="icon icon--arrow-double-down"></span>

<span class="icon icon--arrow-double-left"></span>

<span class="icon icon--download"></span>

<span class="icon icon--update"></span>

<span class="icon icon--step-forward"></span>

<span class="c-button__icon">
    <!-- en train d'être modifié -->
    <svg xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 36 36">
	<path d="M20.87,11.14h-13l5.56-5.49A1,1,0,0,0,12,4.22L4,12.13,12,20a1,1,0,0,0,1.41-1.42L7.86,13.14h13a9.08,9.08,0,0,1,9.13,9,9,9,0,0,1-5,8A1,1,0,0,0,25.93,32a11,11,0,0,0-5.06-20.82Z"></path>
    </svg>
</span>

<span class="c-button__icon">
    <!-- en train d'être modifié -->
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    <path d="M7,6H23v9.8h2V6a2,2,0,0,0-2-2H7A2,2,0,0,0,5,6V30a2,2,0,0,0,2,2H23a2,2,0,0,0,2-2H7Z"></path>
    <path d="M28.16,17.28a1,1,0,0,0-1.41,1.41L30.13,22H15.63a1,1,0,0,0-1,1,1,1,0,0,0,1,1h14.5l-3.38,3.46a1,1,0,1,0,1.41,1.41L34,23.07Z"></path>
    </svg>
</span>

headers titres & textes boutons formulaires recherche notifications icones

tableaux

pagination tags

tableau standard

    
            hell0
            d0lly
            this
            is
            L0uis
        

    
            It's so
            nice to
            have you
            back where
            you belong
        

            You're
            looking
            swell
            Dolly
            I can tell Dolly
        

            It's so
            nice to
            have you
            back where
            you belong
        

<table class="c-table">
    <thead>
        <tr>
            <th>hell0</th>
            <th>d0lly</th>
            <th>this</th>
            <th>is</th>
            <th>L0uis</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-title='titre'>It's so</td>
            <td data-title='chanteur'>nice to</td>
            <td data-title='album'>have you</td>
            <td data-title='année'>back where</td>
            <td data-title='etc ...'>you belong</td>
        </tr>
        <tr>
            <td>You're</td>
            <td class='c-table__invalid'>looking</td>
            <td>swell</td>
            <td>Dolly</td>
            <td>I can tell Dolly</td>
        </tr>
        <tr>
            <td>It's so</td>
            <td class='c-table__valid'>nice to</td>
            <td>have you</td>
            <td>back where</td>
            <td>you belong</td>
        </tr>
    </tbody>
</table>

hell0	d0lly	this	is	Actions
It's so	nice to	have you	back where	Actions Modifier Supprimer Faire autre chose
It's still so	nice to	have you	back again where	Actions Modifier Supprimer Faire autre chose

<table class="c-table">
    <thead>
        <tr>
            <th>hell0</th>
            <th>d0lly</th>
            <th>this</th>
            <th>is</th>
            <th class='c-action--col'>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-title='titre'>It's so</td>
            <td data-title='chanteur'>nice to</td>
            <td data-title='album'>have you</td>
            <td data-title='année'>back where</td>
            <td class='c-action--col c-action--td' data-title='action'>
                <div class='c-action'>
                    <span class='c-action--title'>Actions</span>
                    <ul class='c-action--actions'>
                        <li><a href='#'>Modifier</a></li>
                        <li><a href='#'>Supprimer</a></li>
                        <li><a href='#'>Faire autre chose</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <td data-title='titre'>It's still so</td>
            <td data-title='chanteur'>nice to</td>
            <td data-title='album'>have you</td>
            <td data-title='année'>back again where</td>
            <td class='c-action--col c-action--td' data-title='action'>
                <div class='c-action'>
                    <span class='c-action--title'>Actions</span>
                    <ul class='c-action--actions'>
                        <li><a href='#'>Modifier</a></li>
                        <li><a href='#'>Supprimer</a></li>
                        <li><a href='#'>Faire autre chose</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>
</table>

options

Affichage des colonnes

Numero Statut Nom Actions

hell0	d0lly	this	is	L0uis
It's so	nice to	have you	back where	you belong
You're	looking	swell	Dolly	I can tell Dolly

<div>
<!-- option des colonnes -->
<div class='column-form-container'>
    <div class='pop-up-oppener' onclick='openPopUp(event);'>Affichage des colonnes <span class='icon icon--arrow-down'></span></div>
    <div class='column-pop-up'>
        <label class='c-input--block'>
            <input type='checkbox' checked='' onclick='updateSingleColumn(event, truc);'>Numero
        </label>
        <label class='c-input--block'>
            <input type='checkbox' checked='' onclick='updateSingleColumn(event, truc);'>Statut
        </label>
        <label class='c-input--block'>
            <input type='checkbox' checked='' onclick='updateSingleColumn(event, truc);'>Nom
        </label>
        <label class='c-input--block'>
            <input type='checkbox' checked='' onclick='updateSingleColumn(event, truc);'>Actions
        </label>
    </div>
</div>
<!-- suite, exemple de tableau, pas de conteneur autour ou de style inline -->
<table class='c-table'>
    <thead>
        <tr><th>hell0</th><th>d0lly</th><th>this</th><th>is</th><th>L0uis</th></tr>
    </thead>
    <tbody>
        <tr><td data-title='titre'>It's so</td><td data-title='chanteur'>nice to</td><td data-title='album'>have you</td><td data-title='année'>back where</td><td data-title='etc ...'>you belong</td></tr>
        <tr><td>You're</td><td class='c-table__invalid'>looking</td><td>swell</td><td>Dolly</td><td>I can tell Dolly</td></tr>
    </tbody>
</table>
</div>

headers titres & textes boutons formulaires recherche notifications icones tableaux

pagination

pagination standard

1 2 3 4

<div class="c-pagination">
    <span class="c-pagination-prev"></span>
    <div class="c-pagination__group">
        <a href="#">1</a>
        <span>2</span>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    <a href="#" class="c-pagination-next"></a>
</div>

headers titres & textes boutons formulaires recherche notifications icones tableaux pagination

headers

espace club

68974 - Comité Ski Alpes Provence

41205 - Comité Ski Alpes Provence

espace comités

CS DU LYONNAIS ET PAYS DE L AIN

CS DU LYONNAIS ET PAYS DE L AIN

titres & textes

h1 & h1-like

Lorem ipsum sid amet

h2 & h2-like

Lorem ipsum sid amet

h3 & h3-like

Lorem ipsum sid amet

h4 & h4-like

Lorem ipsum sid amet

les textes

liens

boutons

bouton standard

petit bouton

bouton rouge

bouton secondaire

bouton avec icone 🤷🏻‍♂️ ?

bouton gris

bouton désactivé v1 : va être modifié

bouton désactivé v2 : TODO

formulaires

les éléments

select

checkbox & radio button

recherche

boite de recherche avancée

notifications

principe

notifs de base

notifs en petit : todo

icones

usage

set de base

les flèches

tableaux

tableau standard

options

pagination

pagination standard

tags

à créer