Source Code HTML / SASS

Vous trouverez ici les démos et le code source statiques du composant.

On expose les différentes déclinaisons du composant au format HTML et SASS.

Le composant React a été conçu sur la base de cette structure en y ajoutant les interactions que vous trouverez dans notre storybook.

Classic Title

Super titre

Title h1

Title h2

Title h3

Title h4

Title h5

Title h6

Header 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.

Header 2

Header 3

Header 4

Header 5

Header 6

Copied

<div style="background:white; padding: 2rem;">
    <h1 class="af-title af-title--bigTitle">Super titre</h1>
    <h1 class="af-title">Title h1</h1>
    <h2 class="af-title">Title h2</h2>
    <h3 class="af-title">Title h3</h3>
    <h4 class="af-title">Title h4</h4>
    <h5 class="af-title">Title h5</h5>
    <h6 class="af-title">Title h6</h6>
    <h1 class="af-title--content">Header 1</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
    <h2 class="af-subtitle">Header 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
    <h3 class="af-subtitle">Header 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
    <h4 class="af-subtitle">Header 4</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
    <h5 class="af-subtitle">Header 5</h5>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
    <h6 class="af-subtitle">Header 6</h6>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab.</p>
</div>

Copied

@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-title {
    position: relative;
    overflow: hidden;
    font-weight: 600;

    &::after {
        background-color: $brand-primary;
        border: none;
        bottom: 0.3125rem;
        clear: left;
        content: ' ';
        float: left;
        height: 1px;
        margin-left: 0.875rem;
        padding: 0;
        position: absolute;
        width: 100%;
        z-index: 1;
    }

    &+.af-title {
        margin-top: 0;
    }

    &--bigTitle {
        font-size: 4.25rem;
        font-weight: 600;
    }

    &--content {
        color: $color-mine-shaft;
        border-bottom: 1px solid $color-silver;
        padding-bottom: 1rem;
        font-size: 1.75em;
        margin: 2rem 0 3rem 0;
        font-weight: 600;

        &:nth-child(1) {
            margin-top: 0;
        }
    }
}

.af-subtitle {
    color: $color-mine-shaft;
    position: relative;
    overflow: hidden;
    width: 100%;
    font-weight: 600;

    &::after {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%;
        z-index: 1;
        margin-left: 2rem;
        top: 50%;
        transform: (-50%, 0);
        background: $color-dusty-gray;
        opacity: 0.3;
    }
}

React interactions

Vous trouverez ici les démos Storybook pour visualiser les interactions du composant.

Vous avez la possibilité de jouer avec les propriétés du composant React sur notre storybook.

Generales Guidelines

Les guidelines permettent de décrire l'ensemble des règles et des éléments graaphiques pour la conception des interfaces.

Elle sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.

No guideline yet, coming soon ...

Style

Un style a été défini pour chaque composant, il possible d'importer uniquement le style du composant sur le projet fin optimiser le bundle.

On liste également les codes couleur utilisés, cliquez-ici pour voir l'ensemble des couleurs du Design System

Imports SASS

@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
@import '@axa-fr/react-toolkit-title/dist/title.scss';

Typography

Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

Class	Font-size (px/rem)	Font-weight	Font-family
.af-title	16 / 1	400	Source Sans Pro Regular

Colors

BLEU AXA#00008f$color-axa

Mercury#e5e5e5$color-mercury

Silver#cccccc $color-silver

Slash

Design System

Title

Atom