<h1 >page de démo</h1 >
<p >cette étape est en cours de développement. <br > S'inspirer de la page de Home pour réaliser d'autres pages
</p >
<a
    [routerLink]="'/step/end'"
    class="btn btn--primary"
    i18n="@@confirm" >C'est parfait!</a >
<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 >

        <button
            type="submit"
            class="btn btn--primary" >
            primary - default
        </button >

        <br >

        <button
            type="submit"
            class="btn btn--primary btn--small" >
            primary - small
        </button >

        <br >

        <a
            href="#"
            class="btn btn--primary btn--outline" >
            primary - outline - default
        </a >

        <br >

        <button
            type="submit"
            class="btn btn--primary btn--outline btn--small" >
            primary - outline - small
        </button >

        <br >

        <input
            type="submit"
            class="btn btn--alert"
            value="alert - default" >

        <br >

        <button
            type="submit"
            class="btn btn--alert btn--small" >
            alert - small
        </button >

        <br >

        <button
            type="submit"
            class="btn btn--alert btn--outline" >
            alert - outline - default
        </button >

        <br >

        <button
            type="submit"
            class="btn btn--alert btn--outline btn--small" >
            alert - outline - small
        </button >

        <br ><br >

        <button
            type="submit"
            class="btn btn--primary btn--full" >
            primary - full
        </button >

        <button
            type="submit"
            class="btn btn--primary btn--outline btn--full" >
            primary - outline - full
        </button >

        <button
            type="submit"
            class="btn btn--alert btn--full" >
            alert - full
        </button >

        <button
            type="submit"
            class="btn btn--alert btn--outline btn--full" >
            alert - outline - full
        </button >

    </article >

    <article >
        <h2 >Forms element</h2 >

        <h3 >Labels</h3 >

        <label for="" >Un label pour les labelliser tous</label >

        <h3 >Input name</h3 >
        <input
            type="name"
            name=""
            id="" ><br >
        <input
            type="name"
            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 >
    <framadate-voting-choice ></framadate-voting-choice >
    <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 name</h2 >
        <label for="test-text" >Ceci est un label un peu long mais pas trop</label >
        <input
            type="name"
            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 name 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 >

./kind.component.scss

@charset "UTF-8";

section {
    &:not(:last-of-type) {
        border-bottom: 6px solid #000;
    }

    + section {
        margin: 0 !important;
    }

}

article {
    padding: 2rem 0;
    border-top: 3px solid #ffb92c;

    h3 {
        &:not(:first-of-type) {
            margin-top: 2rem;
        }
    }
}