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 TitleBar
Copied
<div class="af-title-bar">
<div class="af-title-bar__wrapper af-container">
<h1 class="af-title-bar__title">Title<small class="af-title-bar__subtitle">Sous titre</small></h1>
</div>
</div>Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-title-bar {
background: $brand-primary;
color: $white;
overflow: auto;
padding: 0.66rem 0;
margin-bottom: 2rem;
&--fixed {
position: fixed;
width: 100%;
}
&__button {
margin-right: 1rem;
.button--circled:hover {
color: initial;
.button__icon {
fill: initial;
}
}
}
&__title {
display: inline-block;
margin: 0;
color: $white;
font-weight: normal;
}
&__subtitle {
margin-left: 0.25rem;
opacity: 0.64;
}
&__actions {
.af-btn--circle {
vertical-align: middle;
margin-left: 1rem;
&:focus {
box-shadow: 0 0 6px $white;
color: $white;
}
}
}
&__link {
color: $white;
text-decoration: underline;
&:hover {
opacity: 0.65;
color: $white;
}
&:focus {
text-shadow: 0 0 5px $white;
color: $white;
}
}
&__mobile-menu {
display: inline-block;
background-image: none;
background-color: transparent;
padding: 0;
margin-right: 1rem;
.glyphicon {
fill: $white;
width: 17px;
}
}
&__icon {
font-size: 1em;
}
}
@include media-breakpoint-up(sm) {
.af-title-bar {
padding: 0.7em 0;
&__wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
}
.burger-container {
display: none;
}
}
@include media-breakpoint-up(md) {
.af-title-bar {
padding: 0.66rem 0;
&__wrapper {
width: nth(nth($container-max-widths, 4), 2);
max-width: 100%;
}
&__title {
font-size: 1.375rem;
}
}
}Complex TitleBar
Copied
<div class="af-title-bar">
<div class="af-title-bar__wrapper af-container">
<button class="af-btn-circle af-title-bar__mobile-menu">
<div class="af-btn__wrapper">
<svg class="glyphicon glyphicon-menu-hamburger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M3.649,1.21h92.701c0.65,0,1.222,0.243,1.708,0.73c0.487,0.49,0.732,1.057,0.732,1.71v14.638
c0,0.65-0.245,1.221-0.732,1.707c-0.486,0.488-1.058,0.732-1.708,0.732H3.649c-0.653,0-1.219-0.244-1.708-0.732
c-0.489-0.486-0.732-1.057-0.732-1.707V3.65c0-0.653,0.243-1.22,0.732-1.71C2.431,1.453,2.996,1.21,3.649,1.21L3.649,1.21z
M3.649,40.241h92.701c0.65,0,1.222,0.244,1.708,0.729c0.487,0.486,0.732,1.059,0.732,1.709v14.638c0,0.65-0.245,1.222-0.732,1.708
c-0.486,0.488-1.058,0.736-1.708,0.736H3.649c-0.653,0-1.219-0.248-1.708-0.736c-0.489-0.486-0.732-1.058-0.732-1.708V42.679
c0-0.65,0.243-1.223,0.732-1.709C2.431,40.485,2.996,40.241,3.649,40.241L3.649,40.241z M3.649,79.272h92.701
c0.65,0,1.222,0.241,1.708,0.731c0.487,0.49,0.732,1.058,0.732,1.712v14.638c0,0.65-0.245,1.219-0.732,1.708
c-0.486,0.485-1.058,0.729-1.708,0.729H3.649c-0.653,0-1.219-0.243-1.708-0.729c-0.489-0.489-0.732-1.058-0.732-1.708V81.716
c0-0.654,0.243-1.222,0.732-1.712S2.996,79.272,3.649,79.272L3.649,79.272z"></path>
</svg>
</div>
</button>
<h1 class="af-title-bar__title">Slash Design System<small class="af-title-bar__subtitle">Sous titre</small></h1>
<div class="af-title-bar__actions"><a class="af-title-bar__link" href="#lien" title="lien titlebar">lien titlebar</a><a class="af-btn--circle" href="#enregistrer" title="Enregistrer" role="button" tabindex="0">
<svg class="glyphicon glyphicon-floppy-disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M3.125 92.5v-83.333q0-1.667 1.208-2.917t2.958-1.25h20.833v25h41.667v-25h8.333l16.667 16.667v70.833q0 1.75-1.25 2.958t-2.917 1.208h-12.5v-33.333h-58.333v33.333h-12.5q-1.75 0-2.958-1.208t-1.208-2.958zM53.125 21.667h8.333v-16.667h-8.333v16.667z"></path>
</svg></a><a class="af-btn--circle" href="#imprimer" title="Imprimer" role="button" tabindex="0">
<svg class="glyphicon glyphicon-print" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M1.563 90.667v-56.51h16.146l8.073 16.146h48.438l8.073-16.146h16.146v56.51h-16.146v-16.146h-64.583v16.146h-16.146zM21.987 31.816l3.229 10.010h47.792l5.005-10.010-7.588-27.932q-0.162-0.888-0.807-1.453t-1.453-0.565h-36.328q-0.807 0-1.453 0.565t-0.807 1.453zM24.247 96.803l3.068-12.271q0.162-0.807 0.928-1.372t1.574-0.565h40.365q0.807 0 1.574 0.565t0.928 1.372l3.068 12.271q0.162 0.807-0.283 1.372t-1.251 0.565h-48.438q-0.807 0-1.251-0.565t-0.283-1.372z"></path>
</svg></a></div>
</div>
</div>Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
.af-title-bar {
background: $brand-primary;
color: $white;
overflow: auto;
padding: 0.66rem 0;
margin-bottom: 2rem;
&--fixed {
position: fixed;
width: 100%;
}
&__button {
margin-right: 1rem;
.button--circled:hover {
color: initial;
.button__icon {
fill: initial;
}
}
}
&__title {
display: inline-block;
margin: 0;
color: $white;
font-weight: normal;
}
&__subtitle {
margin-left: 0.25rem;
opacity: 0.64;
}
&__actions {
.af-btn--circle {
vertical-align: middle;
margin-left: 1rem;
&:focus {
box-shadow: 0 0 6px $white;
color: $white;
}
}
}
&__link {
color: $white;
text-decoration: underline;
&:hover {
opacity: 0.65;
color: $white;
}
&:focus {
text-shadow: 0 0 5px $white;
color: $white;
}
}
&__mobile-menu {
display: inline-block;
background-image: none;
background-color: transparent;
padding: 0;
margin-right: 1rem;
.glyphicon {
fill: $white;
width: 17px;
}
}
&__icon {
font-size: 1em;
}
}
@include media-breakpoint-up(sm) {
.af-title-bar {
padding: 0.7em 0;
&__wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
}
.burger-container {
display: none;
}
}
@include media-breakpoint-up(md) {
.af-title-bar {
padding: 0.66rem 0;
&__wrapper {
width: nth(nth($container-max-widths, 4), 2);
max-width: 100%;
}
&__title {
font-size: 1.375rem;
}
}
}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-button/dist/button.scss';
@import '@axa-fr/react-toolkit-layout-header/dist/Title/title-bar.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-bar | 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