Author (Auteur)

Le composant auteur permet d’identifier la ou les personnes qui sont à l’origine d’un élément.

Usage

L’auteur est le nom, le prénom ou le pseudonyme du créateur d’un élément écrit, sonore, etc.
Ce composant peut s’afficher sous forme d’un lien pour pouvoir accéder à d’autres contenus créés par l’auteur ou à sa fiche informative.

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
composant Links (liens) (pour l’auteur avec lien).

Standard

Ce composant peut indifféremment utiliser une balise <p> ou une balise <span>, sur laquelle on ajoute la classe su-author.

<p class="su-author">Charles Baudelaire</p>
<span class="su-author">Charles Baudelaire</span>

Avec un lien

Cette version qui permet d’accéder à une page concernant l’auteur de l’article, utilise la balise <a> sur laquelle on ajoute la classe su-author. Cette classe peut aussi être sur un parent (<span> ou <p>)

<a href="javascript:;" class="su-author">Charles Baudelaire</a><br />
<span class="su-author"><a href="javascript:;">Charles Baudelaire</a></span>

Sur fond sombre

Il est possible d’associer à ce composant la classe su-negative afin de pouvoir l’utiliser sur un fond sombre. Cette classe peut-être positionnée sur un parent ou sur le composant.

<section class="su-negative" style="background: DimGray; padding: 10px">
    <h2 class="su-margin-top-l">Sur un parent&nbsp;:</h2>
    <p class="su-author">Charles Baudelaire</p>
    <span class="su-author">Charles Baudelaire</span>
    <h3>Avec lien&nbsp;:</h3>
    <a href="javascript:;" class="su-author">Charles Baudelaire</a><br />
    <span class="su-author"><a href="javascript:;">Charles Baudelaire</a></span>
</section>
<section style="background: DimGray; padding: 10px">
    <h2 class="su-margin-top-l su-negative">Sur le composant&nbsp;:</h2>
    <p class="su-author su-negative">Charles Baudelaire</p>
    <span class="su-author su-negative">Charles Baudelaire</span>
    <h3 class="su-negative">Avec lien&nbsp;:</h3>
    <a href="javascript:;" class="su-author su-negative">Charles Baudelaire</a><br />
    <span class="su-author su-negative"><a href="javascript:;">Charles Baudelaire</a></span>
</section>

Liste des classes disponibles

su-author
su-negative