funky-framadate-front/src/app/pages/kind/kind.component.html

215 lines
5.4 KiB
HTML

<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>