Charte graphique Kluk

Les composants de la charte, rendus par les partials de app/views/charte.

Texte courant en Atkinson Hyperlegible Next, avec un lien souligné de vert, du gras, de l’italique et du code.

<%= render "charte/bouton", texte: "Bouton principal", href: "#" %>

<%= render "charte/bouton", texte: "Petit bouton", href: "#", petit: true %>

<%= render "charte/tasses" %>

Intertitre de section

Les intertitres ménagent un grand espace au-dessus d’eux pour découper la page en respirations.

<%= render "charte/exergue", texte: "Une phrase mise en exergue, en serif, soulignée d’un trait orange." %> <%= render "charte/photo", src: "croisiere.jpg", alt: "Photo d’exemple", legende: "Légende facultative sous la photo." %> <%= render "charte/photo_attente", description: "Description de la photo attendue." %> <%= render "charte/calendrier", jours: "vvovvvg vvvvovv ovvrvvv vvgvvvo ovvvvvv rrovrrr rorrvvo gvggggg gggvggg gogggvg ggoggvg vvgvvvv ovvvovv vrvvvov vvvvovv ovvgvvv vvovvrv vvvovvv vgvvvvo vvvvovv" %> <%= form_with url: "#", class: "formulaire", data: { turbo: false } do |f| %> <%= render "charte/champ", form: f, attribut: :email, libelle: "Votre adresse mail", precision: "(obligatoire)" do %> <%= f.email_field :email, autocomplete: "email" %> <% end %> <%= render "charte/champ", form: f, attribut: :mot_de_passe, libelle: "Mot de passe" do %> <%= f.password_field :mot_de_passe %> <% end %> <%= render "charte/champ", form: f, attribut: :message, libelle: "Un mot, une idée, une question ?", precision: "(facultatif)" do %> <%= f.text_area :message, rows: 5 %> <% end %> <%= render "charte/formulaire_erreur", messages: ["Message d’erreur du formulaire."] %> <%= f.submit "Envoyer", class: "bouton" %> <% end %>

Bulma aux couleurs de la charte

is-primary is-link is-light

Titre Bulma

Notification is-danger

<%= render "charte/note", texte: "Une note discrète en fin de page." %>