<h1>Atoms</h1> <section> <article> <h2>Headings</h2> <h1>Ceci est un h1</h1> <h2>Ceci est un h2</h2> <h3>Ceci est un h3</h3> </article> <article> <h2>Links</h2> <div> <a [routerLink]="'/home'" class="next"> <span class="text" i18n> C'est parti ! </span> </a> </div> <div> <a [routerLink]="'/home'" class="prev"> <span class="text" i18n> C'est parti ! </span> </a> </div> </article> <article> <h2>Buttons</h2> <p> <input type="submit" value="Input Submit with border" class="btn_border"><br> <input type="submit" value="Input Submit with background" class="btn_background"><br> <input type="submit" value="Input Submit delete with border" class="btn_border btn_delete"><br> <input type="submit" value="Input Submit delete with background" class="btn_background btn_delete"> </p> <p> <button class="btn_border">Button with border</button><br> <button class="btn_background">Button with background</button><br> <button class="btn_border btn_delete">Button delete with background</button><br> <button class="btn_background btn_delete">Button delete with background</button> </p> <p> Warning, in the mockups, some buttons have different paddings.<br> Example: "Copier le lien" has smaller paddings, maybe a `btn_small` class could do the job, to check. </p> </article> <article> <h2>Forms element</h2> <h3>Labels</h3> <label for="">Un label pour les labelliser tous</label> <h3>Input text</h3> <input type="text" name="" id=""><br> <input type="text" name="" id="" value="texte"> <h3>Input email</h3> <input type="email" name="" id=""><br> <input type="email" name="" id="" value="adresse@email.com"> <h3>Input password</h3> <input type="password" name="" id=""><br> <input type="password" name="" id="" value="password"> <h3>Input date</h3> <input type="date" name="" id=""><br> <input type="date" name="" id="" value="1985-11-23"> <h3>Select</h3> <select name="" id=""> <option value=""> 1 </option> <option value=""> 2 </option> <option value=""> 3 </option> </select> <h3>Textarea</h3> <textarea name="" id="" cols="30" rows="10"></textarea> </article> <article> <h2>Paragraphs</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam perspiciatis minus libero error dolores. Corrupti repellat vero repellendus reiciendis assumenda minus. Nobis, quaerat ut nihil minima sed animi delectus beatae!</p> </article> <article> <h2>Lists</h2> <h3>Unordered list</h3> <ul> <li> plop </li> <li> plop </li> <li> plop </li> </ul> <h3>Ordered list</h3> <ol> <li> plop </li> <li> plop </li> <li> plop </li> </ol> </article> <article> <h2>Images</h2> <img src="http://placekitten.com/200/300" alt=""> </article> </section> <section> <h1>Molecules</h1> <article> <h2>Useful classes</h2> <h3>Align right</h3> <div class="align-right"> <a [routerLink]="'/home'" class="next"> <span class="text" i18n> C'est parti ! </span> </a> </div> </article> <article> <h2>Label + input text</h2> <label for="test-text">Ceci est un label un peu long mais pas trop</label> <input type="text" name="test-text" id="test-text"> </article> <article> <h2>Label + select</h2> <label for="test-select">Ceci est un label un peu long mais pas trop</label> <select name="test-select" id="test-select"> <option value=""> 1 </option> <option value=""> 2 </option> <option value=""> 3 </option> </select> </article> <article> <h2>Input text with info</h2> <a href="https://sketch.cloud/s/00A80/a/MAl5q7">like here</a> </article> <article> <h2>Commentaries</h2> </article> </section> <section> <h1>Components</h1> <article> <h2>Images list</h2> <a href="https://sketch.cloud/s/00A80/a/bQA9wj">that</a> </article> <article> <h2>Calendar</h2> </article> <article> <h2>Modale</h2> </article> <article> <h2>Way to vote</h2> <a href="https://sketch.cloud/s/00A80/a/Ol0598">that</a> </article> <article> <h2>Voted</h2> <a href="https://sketch.cloud/s/00A80/a/OlJZo2">that</a> </article> <article> <h2>Graphics</h2> <a href="https://sketch.cloud/s/00A80/a/megprw">that</a> </article> </section>