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.

Simple Footer Client

Copied

<footer class="af-footer-client">
    <div class="af-footer-client__top">
        <div class="af-container">
            <div class="af-footer-client__top-container">
                <div class="af-footer-client__column">
                    <h3 class="af-footer-client__column-title">Languages</h3>
                    <ul class="af-footer-client__column-items">
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/9">Lorem</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/8">Young driver insurance</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/7">Home insurance</a></li>
                    </ul>
                </div>
                <div class="af-footer-client__column">
                    <h3 class="af-footer-client__column-title">Axa & You</h3>
                    <ul class="af-footer-client__column-items">
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/6">Call us</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/5">Policy documents</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/4">Xtra by AXA</a></li>
                    </ul>
                </div>
                <div class="af-footer-client__column">
                    <h3 class="af-footer-client__column-title">Useful links</h3>
                    <ul class="af-footer-client__column-items">
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/3">About us</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/2">Careers</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/1">Blog</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>

Copied

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

@import '_footer-client-item';
@import '_footer-client-list';
@import '_language-selection';

.social-network__list {
    list-style: none;
    display: flex;
    padding: 0;
}

.social-network__item {
    flex-grow: 1;
}

.social-network__link {
    color: $color-white;

    .glyphicon {
        width: 27px;
    }
}

.social-network__icon {
    font-size: 25px;
}

.af-footer-client {
    border-top: none;
    padding: 0;
    margin: 0;
    color: $color-white;
    margin-top: 50px;
}

.af-footer-client__top {
    background-color: $color-dark-indigo;
    padding: 50px 0 25px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.af-footer-client__bottom {
    background-color: $color-azur;
    padding: 15px 0;
    min-height: 45px;
}

.af-footer-client__policy {
    float: right;
    height: 17px;
    opacity: 0.5;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0;
    text-align: right;
    color: $color-white;
    line-height: 25px;
}

Footer Client With Bottom

Copied

<footer class="af-footer-client">
    <div class="af-footer-client__top">
        <div class="af-container">
            <div class="af-footer-client__top-container">
                <div class="af-footer-client__column">
                    <h3 class="af-footer-client__column-title">Languages</h3>
                    <ul class="af-footer-client__column-items">
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/9">Lorem</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/8">Young driver insurance</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/7">Home insurance</a></li>
                    </ul>
                </div>
                <div class="af-footer-client__column">
                    <h3 class="af-footer-client__column-title">Axa & You</h3>
                    <ul class="af-footer-client__column-items">
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/6">Call us</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/5">Policy documents</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/4">Xtra by AXA</a></li>
                    </ul>
                </div>
                <div class="af-footer-client__column">
                    <h3 class="af-footer-client__column-title">Useful links</h3>
                    <ul class="af-footer-client__column-items">
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/3">About us</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/2">Careers</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/1">Blog</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
<div class="af-footer-client__bottom">
    <div class="af-container">
        <div class="af-languageSelection">
            <h3 class="af-languageSelection__title"> Languages:</h3>
            <ul class="af-languageSelection__list">
                <li class="af-languageSelection__item af-languageSelection__item--active">
                    <button class="af-languageSelection__item-button">English</button>
                </li>
                <li class="af-languageSelection__item">
                    <button class="af-languageSelection__item-button">Chinese</button>
                </li>
            </ul>
        </div>
        <div class="af-footer-client__policy">Policy Privacy © 2020 AXA All Rights Reserved</div>
    </div>
</div>

Copied

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

@import '_footer-client-item';
@import '_footer-client-list';
@import '_language-selection';

.social-network__list {
    list-style: none;
    display: flex;
    padding: 0;
}

.social-network__item {
    flex-grow: 1;
}

.social-network__link {
    color: $color-white;

    .glyphicon {
        width: 27px;
    }
}

.social-network__icon {
    font-size: 25px;
}

.af-footer-client {
    border-top: none;
    padding: 0;
    margin: 0;
    color: $color-white;
    margin-top: 50px;
}

.af-footer-client__top {
    background-color: $color-dark-indigo;
    padding: 50px 0 25px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.af-footer-client__bottom {
    background-color: $color-azur;
    padding: 15px 0;
    min-height: 45px;
}

.af-footer-client__policy {
    float: right;
    height: 17px;
    opacity: 0.5;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0;
    text-align: right;
    color: $color-white;
    line-height: 25px;
}

Complex Footer Client

Copied

<footer class="af-footer-client">
    <div class="af-footer-client__top">
        <div class="af-container">
            <div class="af-footer-client__top-container">
                <div class="af-footer-client__column">
                    <h3 class="af-footer-client__column-title">Languages</h3>
                    <ul class="af-footer-client__column-items">
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/9">Lorem</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/8">Young driver insurance</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/7">Home insurance</a></li>
                    </ul>
                </div>
                <div class="af-footer-client__column">
                    <h3 class="af-footer-client__column-title">Axa & You</h3>
                    <ul class="af-footer-client__column-items">
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/6">Call us</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/5">Policy documents</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/4">Xtra by AXA</a></li>
                    </ul>
                </div>
                <div class="af-footer-client__column">
                    <h3 class="af-footer-client__column-title">Useful links</h3>
                    <ul class="af-footer-client__column-items">
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/3">About us</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/2">Careers</a></li>
                        <li class="af-footer-client__column-item"><a class="af-footer-client__column-link" href="/1">Blog</a></li>
                    </ul>
                </div>
                <div class="af-footer-client__column">
                    <h3 class="af-footer-client__column-title">Follow AXA</h3>
                    <ul class="af-footer-client__column-items">
                        <ul class="social-network__list">
                            <li class="social-network__item"><a class="social-network__link" href="https://www.facebook.com/axafrance">
                                    <svg class="glyphicon glyphicon-facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M74,2l-12.5,0c-14,0-23.1,9.3-23.1,23.7v10.9H26c-1.1,0-2,0.9-2,2v15.8c0,1.1,0.9,2,2,2h12.5v39.9c0,1.1,0.9,2,2,2h16.4
		c1.1,0,2-0.9,2-2V56.2h14.7c1.1,0,2-0.9,2-2l0-15.8c0-0.5-0.2-1-0.6-1.4c-0.4-0.4-0.9-0.6-1.4-0.6H58.8v-9.2c0-4.4,1.1-6.7,6.8-6.7
		l8.4,0c1.1,0,2-0.9,2-2V3.9C76,2.8,75.1,2,74,2z"></path>
                                    </svg></a></li>
                            <li class="social-network__item"><a class="social-network__link" href="https://www.linkedin.com/company/237118/">
                                    <svg class="glyphicon glyphicon-linkedin-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path id="LinkedIn" d="M100,60.8v37H78.6V63.3c0-8.7-3.1-14.6-10.9-14.6c-5.9,0-9.4,4-11,7.8c-0.6,1.4-0.7,3.3-0.7,5.2v36H34.6
		c0,0,0.3-58.4,0-64.5H56v9.1c0,0.1-0.1,0.1-0.1,0.2H56v-0.2c2.8-4.4,7.9-10.7,19.3-10.7C89.4,31.8,100,41,100,60.8z M12.1,2.2
		C4.8,2.2,0,7,0,13.4c0,6.2,4.7,11.1,11.8,11.1H12c7.5,0,12.1-5,12.1-11.1C24,7,19.5,2.2,12.1,2.2z M1.3,97.8h21.4V33.3H1.3V97.8z"></path>
                                    </svg></a></li>
                            <li class="social-network__item"><a class="social-network__link" href="https://www.youtube.com/user/AXAFranceChaine">
                                    <svg class="glyphicon glyphicon-youtube-symbol" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M96.8,27.1c-1.2-5.2-5.4-9-10.5-9.5c-12-1.3-24.2-1.3-36.3-1.3c-12.1,0-24.3,0-36.3,1.3c-5.1,0.6-9.3,4.4-10.5,9.5
		C1.6,34.4,1.6,42.4,1.6,50s0,15.6,1.7,22.9c1.2,5.2,5.4,9,10.5,9.5c12,1.3,24.2,1.3,36.3,1.3c12.1,0,24.3,0,36.3-1.3
		c5.1-0.6,9.3-4.4,10.5-9.5c1.7-7.3,1.7-15.3,1.7-22.9C98.4,42.4,98.5,34.4,96.8,27.1z M37.5,65c0-10.7,0-21.3,0-32
		C47.8,38.4,58,43.7,68.3,49.1C58,54.4,47.8,59.7,37.5,65z"></path>
                                    </svg></a></li>
                            <li class="social-network__item"><a class="social-network__link" href="https://www.linkedin.com/company/237118/">
                                    <svg class="glyphicon glyphicon-instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M72.4 0H27.6C12.4 0 0 12.4 0 27.6v44.8C0 87.6 12.4 100 27.6 100h44.8c15.2 0 27.6-12.4 27.6-27.6V27.6C100 12.4 87.6 0 72.4 0zm18.7 72.4c0 10.3-8.4 18.7-18.7 18.7H27.6c-10.3 0-18.7-8.4-18.7-18.7V27.6c0-10.3 8.4-18.7 18.7-18.7h44.8c10.3 0 18.7 8.4 18.7 18.7v44.8z"></path>
                                        <path d="M50 24.2c-14.2 0-25.8 11.6-25.8 25.8 0 14.2 11.6 25.8 25.8 25.8S75.8 64.2 75.8 50c0-14.2-11.6-25.8-25.8-25.8zm0 42.7c-9.3 0-16.9-7.6-16.9-16.9 0-9.3 7.6-16.9 16.9-16.9S66.9 40.7 66.9 50c0 9.3-7.6 16.9-16.9 16.9zM76.8 16.7c-1.7 0-3.4.7-4.6 1.9-1.2 1.2-1.9 2.9-1.9 4.6 0 1.7.7 3.4 1.9 4.6 1.2 1.2 2.9 1.9 4.6 1.9 1.7 0 3.4-.7 4.6-1.9 1.2-1.2 1.9-2.9 1.9-4.6 0-1.7-.7-3.4-1.9-4.6a6.42 6.42 0 00-4.6-1.9z"></path>
                                    </svg></a></li>
                            <li class="social-network__item"><a class="social-network__link" href="https://twitter.com/GuildDEvOpen">
                                    <svg class="glyphicon glyphicon-twitter-logo-silhouette" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <path d="M99.9,19.1c-3.7,1.6-7.6,2.7-11.7,3.2c4.2-2.5,7.5-6.5,9-11.3c-4,2.3-8.3,4-13,5c-3.7-4-9-6.5-14.9-6.5
			c-11.3,0-20.5,9.2-20.5,20.5c0,1.6,0.2,3.2,0.5,4.7c-17-0.9-32.1-9-42.2-21.4c-1.8,3-2.8,6.5-2.8,10.3c0,7.1,3.6,13.4,9.1,17
			c-3.4-0.1-6.5-1-9.3-2.6v0.3c0,9.9,7.1,18.2,16.4,20.1C18.8,58.8,17,59,15.2,59c-1.3,0-2.6-0.1-3.9-0.4c2.6,8.1,10.2,14,19.1,14.2
			c-7,5.5-15.8,8.7-25.4,8.7c-1.7,0-3.3-0.1-4.9-0.3c9.1,5.8,19.8,9.2,31.4,9.2c37.6,0,58.2-31.2,58.2-58.2l-0.1-2.6
			C93.6,26.8,97.1,23.2,99.9,19.1z"></path>
                                    </svg></a></li>
                        </ul>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
<div class="af-footer-client__bottom">
    <div class="af-container">
        <div class="af-languageSelection">
            <h3 class="af-languageSelection__title"> Languages:</h3>
            <ul class="af-languageSelection__list">
                <li class="af-languageSelection__item af-languageSelection__item--active">
                    <button class="af-languageSelection__item-button">English</button>
                </li>
                <li class="af-languageSelection__item">
                    <button class="af-languageSelection__item-button">Chinese</button>
                </li>
            </ul>
        </div>
        <div class="af-footer-client__policy">Policy Privacy © 2020 AXA All Rights Reserved</div>
    </div>
</div>

Copied

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

@import '_footer-client-item';
@import '_footer-client-list';
@import '_language-selection';

.social-network__list {
    list-style: none;
    display: flex;
    padding: 0;
}

.social-network__item {
    flex-grow: 1;
}

.social-network__link {
    color: $color-white;

    .glyphicon {
        width: 27px;
    }
}

.social-network__icon {
    font-size: 25px;
}

.af-footer-client {
    border-top: none;
    padding: 0;
    margin: 0;
    color: $color-white;
    margin-top: 50px;
}

.af-footer-client__top {
    background-color: $color-dark-indigo;
    padding: 50px 0 25px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.af-footer-client__bottom {
    background-color: $color-azur;
    padding: 15px 0;
    min-height: 45px;
}

.af-footer-client__policy {
    float: right;
    height: 17px;
    opacity: 0.5;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0;
    text-align: right;
    color: $color-white;
    line-height: 25px;
}

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-layout-footer-client/dist/footer-client.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-footer-client	16 / 1	400	Source Sans Pro Regular

Colors

BLEU AXA#00008f$color-axa

BLEU Action#3032c1$color-azur

BLEU Action focus#aaabf9$color-azur-focused

Slash

Design System

Footer Client

Organisms

Source Code HTML / SASS

Simple Footer Client

Footer Client With Bottom

Languages:

Complex Footer Client

Languages:

React interactions

Generales Guidelines

Style

Imports SASS

Typography

Colors