46 lines
No EOL
1.8 KiB
Markdown
46 lines
No EOL
1.8 KiB
Markdown
# Exemples
|
|
|
|
Quelques exemples des styles que prennent différents composants
|
|
|
|
## Details
|
|
|
|
La balise `<details>` permet de cacher et afficher une information au clic. Ici, elle a été stylisé comme un bloc, et le sommaire a reçu un état au survol pour que ce soit plus visible que c'est un élément interactif
|
|
|
|
<details>
|
|
<summary>Sommaire</summary>
|
|
|
|
Contenu du `details`.
|
|
|
|
</details>
|
|
|
|
## Mark
|
|
|
|
La balise `<mark>` permet d'afficher simplement des éléments en <mark>surbrillance</mark>. Cela utilise la couleur d'accent claire (et sombre en mode sombre). Le style est proche de celui de code, mais sans monospace et avec la couleur d'accent.
|
|
|
|
## Classes utilitaires
|
|
|
|
Quelques classes CSS sont utilisées afin d'avoir quelques outils supplémentaires utiles, notamment dans le cadre des flexboxes.
|
|
|
|
- `.flex` est utilisé pour afficher deux éléments cotes à cotes
|
|
- `.toolbar-end` est utilsié pour afficher un élément à la fin d'une navbar (cela poussera tout les composants après). Il est utilisé par exemple dans le bouton "Source" de la navbar.
|
|
- `.p` est utlisé pour se faire comporter une balise comme un paragraphe, se combine bien avec .flex dans les articles
|
|
|
|
## Artictecture des titres
|
|
|
|
Les différents types ont différent style, et voici ce que ça donne du h3 au h6 (le h1 est le titre de page, et le h2 celui juste au dessus)
|
|
|
|
### Titre H3
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat.
|
|
|
|
#### Titre H4
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat.
|
|
|
|
##### Titre H5
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat.
|
|
|
|
###### Titre H6
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae augue ut enim iaculis consequat. |