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.
Restitution
Décès en capitalTout adhérent, assuré, base (sans EAC ou sans PAC)
Base de calcul des prestations
- TA
- 99,9999999 %
- PASS
- 99,9999999 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
- TA
- 99,9999999 %
- PASS
- 99,99 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
Plancher et Plafond
- TA
- 99,99 %
- PASS
- 99,99 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
- TA
- 99,99 %
- PASS
- 99,99 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
Copied
<div class="col col-sm-12 col-md-12 col-lg-12 col-xl-12">
<article class="af-restitution">
<header class="af-restitution__header">
<div class="af-restitution__header-left">
<div class="af-restitution__title"><span class="af-restitution__title-title">Décès en capital</span><span class="af-restitution__title-subtitle">Tout adhérent, assuré, base (sans EAC ou sans PAC)</span></div>
</div>
<div class="af-restitution__header-right"><span class="af-restitution__title"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Modifier</span></a></span></div>
</header>
<section class="af-restitution__content">
<div class="col col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="af-restitution__content-title">Base de calcul des prestations</div>
<div class="af-restitution__content-left--borderRight row">
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,9999999 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,9999999 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,9999999 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
</div>
</div>
<div class="col col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="af-restitution__content-title">Plancher et Plafond</div>
<div class="af-restitution__content-right row">
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
</div>
</div>
</section>
</article>
</div>Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-restitution {
width: 100%;
color: $color-scorpion;
background: $white;
box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.19);
margin-bottom: 2rem;
&__header {
border-bottom: 1px solid $color-silver;
padding: 0.25rem 0 0.1875rem 0;
border-radius: 0.25rem 0.25rem 0 0;
background: $color-axa;
display: flex;
justify-content: space-between;
align-items: center;
&-left {
margin-left: 2.25rem;
}
&-right {
margin-right: 2.25rem;
}
}
&__content {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
padding: 1.5rem 0.625rem;
width: 100%;
&-title {
color: $color-axa;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1.25rem;
}
&-left--borderRight {
border-right: solid 1px rgba($color: $border-bottom-header, $alpha: 0.27);
}
&-left--borderBottom {
border-bottom: solid 1px rgba($color: $border-bottom-header, $alpha: 0.27);
margin-bottom: 1.875rem;
padding-bottom: 1.875rem;
}
&-block {
flex-basis: 50%;
}
}
&__title {
font-size: 1.25rem;
font-weight: normal;
color: $white;
&-main {
margin-right: 0.875rem;
}
&-subtitle {
font-size: 1.125rem;
opacity: 0.72;
}
.af-link {
color: $white;
font-size: 0.9375rem;
background: none;
border: 0;
font-weight: 400;
&__text {
text-decoration: underline;
cursor: pointer;
}
&:hover {
.af-link__text {
text-decoration: none;
}
}
}
}
&__listdef {
display: flex;
flex-wrap: wrap;
flex-basis: 100%;
font-size: 1rem;
margin: 0;
&-item {
flex-basis: 50%;
font-weight: normal;
padding-right: 0.5rem;
color: $color-pager-link;
}
&-link {
color: $color-axa;
font-weight: 600;
}
&-value {
margin: 0;
flex-basis: 41%;
padding-left: 0.5rem;
font-weight: 600;
color: $color-azur;
}
&--marge {
margin-top: 1.25rem;
}
}
&__text {
margin-bottom: 0.2rem;
display: block;
text-align: right;
}
&__listul {
padding-left: 1rem;
}
}Restitution double
Décès en capitalTout adhérent, assuré, base (sans EAC ou sans PAC)
Base de calcul des prestations
- Garanties complémentaires
-
- Vol au domicile
- Vol étendu aux appareils nomades
- Bris des glaces
- Plomberie et électricité
- Jardin
- Couverture des biens
-
- Incendie et assimilés
- Dégât des eaux
- Evènements climatiques
- Catastrophe naturelle ou technologique
- Attentats et terrorisme
- Franchise générale
- 250 €
- Accompagnement de l'assuré
-
- Responsabilité civile
- Défense recours
- Assistance urgence en déplacement
- Valeur à neuf
- Pendant 5 ans
- Services inclus
-
- Réseau entreprises agréées
- Avance aux frais de première nécessité
- Services déménagement
Copied
<div class="col col-sm-12 col-md-12 col-lg-12 col-xl-12">
<article class="af-restitution">
<header class="af-restitution__header">
<div class="af-restitution__header-left">
<div class="af-restitution__title"><span class="af-restitution__title-title">Décès en capital</span><span class="af-restitution__title-subtitle">Tout adhérent, assuré, base (sans EAC ou sans PAC)</span></div>
</div>
<div class="af-restitution__header-right">
<div class="af-restitution__title"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Modifier</span></a></div>
</div>
</header>
<section class="af-restitution__content">
<div class="col col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="af-restitution__content-title">Base de calcul des prestations</div>
</div>
<div class="col col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="af-restitution__content-left row">
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Garanties complémentaires</span></dt>
<dd class="af-restitution__listdef-value">
<ul class="af-restitution__listul">
<li class="af-restitution__listul-item">Vol au domicile</li>
<li class="af-restitution__listul-item">Vol étendu aux appareils nomades</li>
<li class="af-restitution__listul-item">Bris des glaces</li>
<li class="af-restitution__listul-item">Plomberie et électricité</li>
<li class="af-restitution__listul-item">Jardin</li>
</ul>
</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Couverture des biens</span></dt>
<dd class="af-restitution__listdef-value">
<ul class="af-restitution__listul">
<li class="af-restitution__listul-item">Incendie et assimilés</li>
<li class="af-restitution__listul-item">Dégât des eaux</li>
<li class="af-restitution__listul-item">Evènements climatiques</li>
<li class="af-restitution__listul-item">Catastrophe naturelle ou technologique</li>
<li class="af-restitution__listul-item">Attentats et terrorisme</li>
</ul>
</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Franchise générale</span></dt>
<dd class="af-restitution__listdef-value">250 €</dd>
</dl>
</div>
<div class="col col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Accompagnement de l'assuré</span></dt>
<dd class="af-restitution__listdef-value">
<ul class="af-restitution__listul">
<li class="af-restitution__listul-item">Responsabilité civile</li>
<li class="af-restitution__listul-item">Défense recours</li>
<li class="af-restitution__listul-item">Assistance urgence en déplacement</li>
</ul>
</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Valeur à neuf</span></dt>
<dd class="af-restitution__listdef-value">Pendant 5 ans</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Services inclus</span></dt>
<dd class="af-restitution__listdef-value">
<ul class="af-restitution__listul">
<li class="af-restitution__listul-item">Réseau entreprises agréées</li>
<li class="af-restitution__listul-item">Avance aux frais de première nécessité</li>
<li class="af-restitution__listul-item">Services déménagement</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
</section>
</article>
</div>Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-restitution {
width: 100%;
color: $color-scorpion;
background: $white;
box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.19);
margin-bottom: 2rem;
&__header {
border-bottom: 1px solid $color-silver;
padding: 0.25rem 0 0.1875rem 0;
border-radius: 0.25rem 0.25rem 0 0;
background: $color-axa;
display: flex;
justify-content: space-between;
align-items: center;
&-left {
margin-left: 2.25rem;
}
&-right {
margin-right: 2.25rem;
}
}
&__content {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
padding: 1.5rem 0.625rem;
width: 100%;
&-title {
color: $color-axa;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1.25rem;
}
&-left--borderRight {
border-right: solid 1px rgba($color: $border-bottom-header, $alpha: 0.27);
}
&-left--borderBottom {
border-bottom: solid 1px rgba($color: $border-bottom-header, $alpha: 0.27);
margin-bottom: 1.875rem;
padding-bottom: 1.875rem;
}
&-block {
flex-basis: 50%;
}
}
&__title {
font-size: 1.25rem;
font-weight: normal;
color: $white;
&-main {
margin-right: 0.875rem;
}
&-subtitle {
font-size: 1.125rem;
opacity: 0.72;
}
.af-link {
color: $white;
font-size: 0.9375rem;
background: none;
border: 0;
font-weight: 400;
&__text {
text-decoration: underline;
cursor: pointer;
}
&:hover {
.af-link__text {
text-decoration: none;
}
}
}
}
&__listdef {
display: flex;
flex-wrap: wrap;
flex-basis: 100%;
font-size: 1rem;
margin: 0;
&-item {
flex-basis: 50%;
font-weight: normal;
padding-right: 0.5rem;
color: $color-pager-link;
}
&-link {
color: $color-axa;
font-weight: 600;
}
&-value {
margin: 0;
flex-basis: 41%;
padding-left: 0.5rem;
font-weight: 600;
color: $color-azur;
}
&--marge {
margin-top: 1.25rem;
}
}
&__text {
margin-bottom: 0.2rem;
display: block;
text-align: right;
}
&__listul {
padding-left: 1rem;
}
}Restitution more
Tarifs
Tout adhérent, assuré, base (sans EAC ou sans PAC)
Base de calcul des prestations
- TA
- 99,99 %
- PASS
- 99,99 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
- TA
- 99,99 %
- PASS
- 99,99 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
Plancher & Plafond
- TA
- 99,99 %
- PASS
- 99,99 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
- TA
- 99,99 %
- PASS
- 99,99 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
Informations de paiement
Tout adhérent, assuré, base (sans EAC ou sans PAC)
Base de calcul des prestations
- TA
- 99,99 %
- PASS
- 99,99 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
- TA
- 99,99 %
- PASS
- 99,99 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
Plancher & Plafond
- TA
- 99,99 %
- PASS
- 99,99 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
- TA
- 99,99 %
- PASS
- 99,99 %
- EURO
- 1 000 000 €
- Salaire brut
- 99,99 %
- Assuré âge max
- 27
Copied
<div class="row">
<div class="col col-sm-12 col-md-12 col-lg-6 col-xl-6 af-content">
<article class="af-restitution">
<header class="af-restitution__header">
<div class="af-restitution__header-left">
<div class="af-restitution__title"><span class="af-restitution__title-title">Tarifs</span>
<div class="af-restitution__title-subtitle">Tout adhérent, assuré, base (sans EAC ou sans PAC)</div>
</div>
</div>
<div class="af-restitution__header-right"><span class="af-restitution__title"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Modifier</span></a></span></div>
</header>
<section class="af-restitution__content">
<div class="col col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="af-restitution__content-title">Base de calcul des prestations</div>
<div class="af-restitution__content-left--borderBottom row">
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
</div>
</div>
<div class="col col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="af-restitution__content-title">Plancher & Plafond</div>
<div class="af-restitution__content-right row">
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
</div>
</div>
</section>
</article>
</div>
<div class="col col-sm-12 col-md-12 col-lg-6 col-xl-6 af-content">
<article class="af-restitution">
<header class="af-restitution__header">
<div class="af-restitution__header-left">
<div class="af-restitution__title"><span class="af-restitution__title-title">Informations de paiement</span>
<div class="af-restitution__title-subtitle">Tout adhérent, assuré, base (sans EAC ou sans PAC)</div>
</div>
</div>
<div class="af-restitution__header-right"><span class="af-restitution__title"><a class="af-link af-link--hasIconLeft" href="#">
<svg class="glyphicon glyphicon-pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 100">
<path d="M3.718 98.426l26.043-8.759-17.44-17.44zM19.359 65.892l16.736 16.736 48.019-48.019-16.736-16.736zM74.104 11.148l16.736 16.736 7.742-7.195q1.017-1.017 1.017-2.542t-1.017-2.62l-11.966-11.966q-1.173-1.017-2.581-1.017t-2.581 1.017z"></path>
</svg><span class="af-link__text">Modifier</span></a></span></div>
</header>
<section class="af-restitution__content">
<div class="col col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="af-restitution__content-title">Base de calcul des prestations</div>
<div class="af-restitution__content-left--borderBottom row">
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
</div>
</div>
<div class="col col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="af-restitution__content-title">Plancher & Plafond</div>
<div class="af-restitution__content-right row">
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">TA</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">PASS</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">EURO</span></dt>
<dd class="af-restitution__listdef-value">1 000 000 €</dd>
</dl>
<dl class="af-restitution__listdef af-restitution__listdef--marge">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Salaire brut</span></dt>
<dd class="af-restitution__listdef-value">99,99 %</dd>
</dl>
<dl class="af-restitution__listdef">
<dt class="af-restitution__listdef-item"><span class="af-restitution__text">Assuré âge max</span></dt>
<dd class="af-restitution__listdef-value">27</dd>
</dl>
</div>
</div>
</div>
</section>
</article>
</div>
</div>Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-restitution {
width: 100%;
color: $color-scorpion;
background: $white;
box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.19);
margin-bottom: 2rem;
&__header {
border-bottom: 1px solid $color-silver;
padding: 0.25rem 0 0.1875rem 0;
border-radius: 0.25rem 0.25rem 0 0;
background: $color-axa;
display: flex;
justify-content: space-between;
align-items: center;
&-left {
margin-left: 2.25rem;
}
&-right {
margin-right: 2.25rem;
}
}
&__content {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
padding: 1.5rem 0.625rem;
width: 100%;
&-title {
color: $color-axa;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1.25rem;
}
&-left--borderRight {
border-right: solid 1px rgba($color: $border-bottom-header, $alpha: 0.27);
}
&-left--borderBottom {
border-bottom: solid 1px rgba($color: $border-bottom-header, $alpha: 0.27);
margin-bottom: 1.875rem;
padding-bottom: 1.875rem;
}
&-block {
flex-basis: 50%;
}
}
&__title {
font-size: 1.25rem;
font-weight: normal;
color: $white;
&-main {
margin-right: 0.875rem;
}
&-subtitle {
font-size: 1.125rem;
opacity: 0.72;
}
.af-link {
color: $white;
font-size: 0.9375rem;
background: none;
border: 0;
font-weight: 400;
&__text {
text-decoration: underline;
cursor: pointer;
}
&:hover {
.af-link__text {
text-decoration: none;
}
}
}
}
&__listdef {
display: flex;
flex-wrap: wrap;
flex-basis: 100%;
font-size: 1rem;
margin: 0;
&-item {
flex-basis: 50%;
font-weight: normal;
padding-right: 0.5rem;
color: $color-pager-link;
}
&-link {
color: $color-axa;
font-weight: 600;
}
&-value {
margin: 0;
flex-basis: 41%;
padding-left: 0.5rem;
font-weight: 600;
color: $color-azur;
}
&--marge {
margin-top: 1.25rem;
}
}
&__text {
margin-bottom: 0.2rem;
display: block;
text-align: right;
}
&__listul {
padding-left: 1rem;
}
}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.
1) Définition
Coming soon...
2) Use case
Coming soon...
3) DO/DONT
Coming soon...
4) Avancé
Coming soon...
5) Utilisation
a) Position
Coming soon...
b) Alignement
Coming soon...
c) Contenu
Coming soon...
d) Rédaction
Coming soon...
e) Pictogrammes
Coming soon...
f) Action
Coming soon...
g) Variations
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-restitution/dist/restitution.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-restitution | 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
Mercury#e5e5e5$color-mercury
Silver#cccccc $color-silver
Button Disabled#c9c9c9 $color-btn-disabled
Button success #1cc578 $color-btn-success
Button success dark #0d844e $color-btn-success-dark
Button success focuced #bdffe1 $color-btn-success-focused
Button danger #f02849 $color-btn-danger
Button danger dark #8f182c $color-btn-danger-dark
Button danger focuced #ffa0af $color-btn-danger-focused