Form Card

Organisms

react storybookgithub readmenpm version

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.react storybook

Classic Form Card Checkbox

Copied
<div class="af-form__group row">
    <div class="col-md-3">
        <div class="af-rccard-group">
            <div class="af-rccard-group__content">
                <div class="af-rccard">
                    <header class="af-rccard-header">
                        <div class="af-form__checkbox">
                            <input class="af-form__input-checkbox" name="cardname" type="checkbox" value="on" id="checkboxcard0" />
                            <label class="af-form__label" for="checkboxcard0"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="checkboxcard0">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="checkboxcard0">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-rccard-group {
    margin-bottom: 1rem;
    margin-right: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 19px 0 rgba(0, 0, 0, 0.11);
    display: inline-flex;
    flex-direction: column;
    width: 100%;

    .af-rccard-group__text {
        margin: 0;
    }

    .af-rccard-group__label,
    .af-form__label {
        margin: 0;
        cursor: pointer;
    }

    .af-rccard-group__title {
        border-bottom: 1px solid $card-grey-light;
        border-radius: 4px 4px 0 0;
        font-weight: normal;
    }

    .af-rccard:nth-child(n + 1):not(:first-child):not(.af-rccard--active) {
        .af-rccard-header {
            border-left: 1px solid $card-grey-light;
        }

        .af-rccard-content,
        .af-rccard-footer {
            border-left: 1px solid $card-border-grey;
        }
    }
}

.af-rccard-group__title {
    margin: 0;
    width: 100%;
    padding: rem(10px);
    text-align: center;
    font-size: rem(18px);
    background: $card-header;
    color: $card-text-color;
}

.af-rccard-group__content {
    display: flex;
    flex-direction: row;
}

.af-rccard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.af-rccard-group--active {
    .af-rccard-group__title {
        color: $card-white;
        background: $card-blue-active;
        border-bottom: 0;
    }

    .af-rccard--active {
        .af-rccard-content {
            box-shadow: inset 0 0 0 1px $card-blue-active;
        }

        .af-rccard-footer {
            box-shadow: inset 0 -1px 0 1px $card-blue-active;
        }
    }
}

.af-rccard--active .af-rccard-header {
    background-color: $card-blue-active;
}

.af-rccard--disabled {
    position: relative;
    cursor: not-allowed;

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        background-color: $card-bg-disabled;
        opacity: 0.75;
    }
}

.af-rccard-header {
    background-color: $card-header;
    border-radius: 4px 4px 0 0;
    flex-grow: 2;
    display: flex;

    .af-form__radio {
        flex: 1;
        align-items: stretch;

        .af-form__label {
            height: 100%;

            &::before {
                left: rem(9.76px);
                top: rem(38px);
            }
        }
    }

    .af-form__checkbox .af-form__indicator {
        left: rem(10px);
        top: rem(38px);
    }

    .af-form__radio .af-form__label::after {
        left: rem(12.8px);
        top: rem(38px);
    }

    .af-form__checkbox .af-form__indicator i {
        left: 2px;
        top: 2px;
    }

    input {
        margin-top: rem(12px);
    }

    label {
        padding: rem(19px) rem(17px);
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
}

.af-rccard-header__meta,
.af-rccard-group__title {
    &+.af-rccard-group__content {
        .af-rccard-header {
            border-radius: 0;
        }
    }
}

.af-rccard-header__content {
    padding-left: rem(18px);
}

.af-rccard-header__title,
.af-rccard-header__subtitle {
    color: $card-text-color;
    margin: 0;
}

.af-rccard-header__title {
    font-size: 1.375rem;
    font-weight: 600;
}

.af-rccard-header__subtitle {
    font-size: rem(22px);
    font-weight: 400;
}

.af-rccard--active {

    .af-rccard-header__title,
    .af-rccard-header__subtitle {
        color: $card-white;
    }
}

.af-rccard-header__meta {
    border-radius: 4px 4px 0 0;
    width: 100%;
    color: $card-white;
    background-color: $card-blue-active;
    text-align: center;
    font-size: rem(14px);
    line-height: rem(20px);
    margin: 0;

    &+.af-rccard-group__title {
        border-radius: 0;
    }
}

.af-rccard-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: rem(23px) rem(30px) rem(31px) rem(20px);
    background-color: $card-white;
}

.af-rccard-footer {
    width: 100%;
    background-color: $card-grey-light;
    padding: rem(18px) rem(12px);
    font-size: rem(14px);
    position: relative;
    top: -1px;

    &::after {
        content: '';
        display: block;
        background: $card-border-grey;
        height: 1px;
        position: absolute;
        top: 0;
        left: 1px;
        right: 1px;
    }
}

$nb-card-max: 5;

@for $i from 1 through $nb-card-max {
    .af-rccard__#{$i} .af-rccard {
        flex: 0 0 percentage(1 / $i);
        width: percentage(1 / $i);
    }
}

Classic Form Card Checkbox disabled

Copied
<div class="af-form__group row">
    <div class="col-md-3">
        <div class="af-rccard-group">
            <div class="af-rccard-group__content">
                <div class="af-rccard  af-rccard--disabled">
                    <header class="af-rccard-header">
                        <div class="af-form__checkbox  af-form__checkbox--disabled">
                            <input class="af-form__input-checkbox" name="cardname" type="checkbox" value="on" id="checkboxcard1" disabled="disabled" />
                            <label class="af-form__label" for="checkboxcard1"><span class="af-form__indicator">
                                    <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                                        <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                                    </svg></span><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="checkboxcard1">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="checkboxcard1">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-rccard-group {
    margin-bottom: 1rem;
    margin-right: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 19px 0 rgba(0, 0, 0, 0.11);
    display: inline-flex;
    flex-direction: column;
    width: 100%;

    .af-rccard-group__text {
        margin: 0;
    }

    .af-rccard-group__label,
    .af-form__label {
        margin: 0;
        cursor: pointer;
    }

    .af-rccard-group__title {
        border-bottom: 1px solid $card-grey-light;
        border-radius: 4px 4px 0 0;
        font-weight: normal;
    }

    .af-rccard:nth-child(n + 1):not(:first-child):not(.af-rccard--active) {
        .af-rccard-header {
            border-left: 1px solid $card-grey-light;
        }

        .af-rccard-content,
        .af-rccard-footer {
            border-left: 1px solid $card-border-grey;
        }
    }
}

.af-rccard-group__title {
    margin: 0;
    width: 100%;
    padding: rem(10px);
    text-align: center;
    font-size: rem(18px);
    background: $card-header;
    color: $card-text-color;
}

.af-rccard-group__content {
    display: flex;
    flex-direction: row;
}

.af-rccard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.af-rccard-group--active {
    .af-rccard-group__title {
        color: $card-white;
        background: $card-blue-active;
        border-bottom: 0;
    }

    .af-rccard--active {
        .af-rccard-content {
            box-shadow: inset 0 0 0 1px $card-blue-active;
        }

        .af-rccard-footer {
            box-shadow: inset 0 -1px 0 1px $card-blue-active;
        }
    }
}

.af-rccard--active .af-rccard-header {
    background-color: $card-blue-active;
}

.af-rccard--disabled {
    position: relative;
    cursor: not-allowed;

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        background-color: $card-bg-disabled;
        opacity: 0.75;
    }
}

.af-rccard-header {
    background-color: $card-header;
    border-radius: 4px 4px 0 0;
    flex-grow: 2;
    display: flex;

    .af-form__radio {
        flex: 1;
        align-items: stretch;

        .af-form__label {
            height: 100%;

            &::before {
                left: rem(9.76px);
                top: rem(38px);
            }
        }
    }

    .af-form__checkbox .af-form__indicator {
        left: rem(10px);
        top: rem(38px);
    }

    .af-form__radio .af-form__label::after {
        left: rem(12.8px);
        top: rem(38px);
    }

    .af-form__checkbox .af-form__indicator i {
        left: 2px;
        top: 2px;
    }

    input {
        margin-top: rem(12px);
    }

    label {
        padding: rem(19px) rem(17px);
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
}

.af-rccard-header__meta,
.af-rccard-group__title {
    &+.af-rccard-group__content {
        .af-rccard-header {
            border-radius: 0;
        }
    }
}

.af-rccard-header__content {
    padding-left: rem(18px);
}

.af-rccard-header__title,
.af-rccard-header__subtitle {
    color: $card-text-color;
    margin: 0;
}

.af-rccard-header__title {
    font-size: 1.375rem;
    font-weight: 600;
}

.af-rccard-header__subtitle {
    font-size: rem(22px);
    font-weight: 400;
}

.af-rccard--active {

    .af-rccard-header__title,
    .af-rccard-header__subtitle {
        color: $card-white;
    }
}

.af-rccard-header__meta {
    border-radius: 4px 4px 0 0;
    width: 100%;
    color: $card-white;
    background-color: $card-blue-active;
    text-align: center;
    font-size: rem(14px);
    line-height: rem(20px);
    margin: 0;

    &+.af-rccard-group__title {
        border-radius: 0;
    }
}

.af-rccard-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: rem(23px) rem(30px) rem(31px) rem(20px);
    background-color: $card-white;
}

.af-rccard-footer {
    width: 100%;
    background-color: $card-grey-light;
    padding: rem(18px) rem(12px);
    font-size: rem(14px);
    position: relative;
    top: -1px;

    &::after {
        content: '';
        display: block;
        background: $card-border-grey;
        height: 1px;
        position: absolute;
        top: 0;
        left: 1px;
        right: 1px;
    }
}

$nb-card-max: 5;

@for $i from 1 through $nb-card-max {
    .af-rccard__#{$i} .af-rccard {
        flex: 0 0 percentage(1 / $i);
        width: percentage(1 / $i);
    }
}

Classic Form Card Radio

Copied
<div class="af-form__group row">
    <div class="col-md-3">
        <div class="af-rccard-group">
            <div class="af-rccard-group__content">
                <div class="af-rccard">
                    <header class="af-rccard-header">
                        <div class="af-form__radio">
                            <input class="af-form__input-radio" name="cardname" type="radio" value="on" id="radiocard0" />
                            <label class="af-form__label" for="radiocard0"><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="radiocard0">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="radiocard0">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-rccard-group {
    margin-bottom: 1rem;
    margin-right: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 19px 0 rgba(0, 0, 0, 0.11);
    display: inline-flex;
    flex-direction: column;
    width: 100%;

    .af-rccard-group__text {
        margin: 0;
    }

    .af-rccard-group__label,
    .af-form__label {
        margin: 0;
        cursor: pointer;
    }

    .af-rccard-group__title {
        border-bottom: 1px solid $card-grey-light;
        border-radius: 4px 4px 0 0;
        font-weight: normal;
    }

    .af-rccard:nth-child(n + 1):not(:first-child):not(.af-rccard--active) {
        .af-rccard-header {
            border-left: 1px solid $card-grey-light;
        }

        .af-rccard-content,
        .af-rccard-footer {
            border-left: 1px solid $card-border-grey;
        }
    }
}

.af-rccard-group__title {
    margin: 0;
    width: 100%;
    padding: rem(10px);
    text-align: center;
    font-size: rem(18px);
    background: $card-header;
    color: $card-text-color;
}

.af-rccard-group__content {
    display: flex;
    flex-direction: row;
}

.af-rccard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.af-rccard-group--active {
    .af-rccard-group__title {
        color: $card-white;
        background: $card-blue-active;
        border-bottom: 0;
    }

    .af-rccard--active {
        .af-rccard-content {
            box-shadow: inset 0 0 0 1px $card-blue-active;
        }

        .af-rccard-footer {
            box-shadow: inset 0 -1px 0 1px $card-blue-active;
        }
    }
}

.af-rccard--active .af-rccard-header {
    background-color: $card-blue-active;
}

.af-rccard--disabled {
    position: relative;
    cursor: not-allowed;

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        background-color: $card-bg-disabled;
        opacity: 0.75;
    }
}

.af-rccard-header {
    background-color: $card-header;
    border-radius: 4px 4px 0 0;
    flex-grow: 2;
    display: flex;

    .af-form__radio {
        flex: 1;
        align-items: stretch;

        .af-form__label {
            height: 100%;

            &::before {
                left: rem(9.76px);
                top: rem(38px);
            }
        }
    }

    .af-form__checkbox .af-form__indicator {
        left: rem(10px);
        top: rem(38px);
    }

    .af-form__radio .af-form__label::after {
        left: rem(12.8px);
        top: rem(38px);
    }

    .af-form__checkbox .af-form__indicator i {
        left: 2px;
        top: 2px;
    }

    input {
        margin-top: rem(12px);
    }

    label {
        padding: rem(19px) rem(17px);
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
}

.af-rccard-header__meta,
.af-rccard-group__title {
    &+.af-rccard-group__content {
        .af-rccard-header {
            border-radius: 0;
        }
    }
}

.af-rccard-header__content {
    padding-left: rem(18px);
}

.af-rccard-header__title,
.af-rccard-header__subtitle {
    color: $card-text-color;
    margin: 0;
}

.af-rccard-header__title {
    font-size: 1.375rem;
    font-weight: 600;
}

.af-rccard-header__subtitle {
    font-size: rem(22px);
    font-weight: 400;
}

.af-rccard--active {

    .af-rccard-header__title,
    .af-rccard-header__subtitle {
        color: $card-white;
    }
}

.af-rccard-header__meta {
    border-radius: 4px 4px 0 0;
    width: 100%;
    color: $card-white;
    background-color: $card-blue-active;
    text-align: center;
    font-size: rem(14px);
    line-height: rem(20px);
    margin: 0;

    &+.af-rccard-group__title {
        border-radius: 0;
    }
}

.af-rccard-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: rem(23px) rem(30px) rem(31px) rem(20px);
    background-color: $card-white;
}

.af-rccard-footer {
    width: 100%;
    background-color: $card-grey-light;
    padding: rem(18px) rem(12px);
    font-size: rem(14px);
    position: relative;
    top: -1px;

    &::after {
        content: '';
        display: block;
        background: $card-border-grey;
        height: 1px;
        position: absolute;
        top: 0;
        left: 1px;
        right: 1px;
    }
}

$nb-card-max: 5;

@for $i from 1 through $nb-card-max {
    .af-rccard__#{$i} .af-rccard {
        flex: 0 0 percentage(1 / $i);
        width: percentage(1 / $i);
    }
}

Classic Form Card Radio active

Recommandé

Copied
<div class="af-form__group row">
    <div class="col-md-3">
        <div class="af-rccard-group  af-rccard-group--active">
            <p class="af-rccard-header__meta">Recommandé</p>
            <div class="af-rccard-group__content">
                <div class="af-rccard  af-rccard--active">
                    <header class="af-rccard-header">
                        <div class="af-form__radio  af-form__radio--active">
                            <input class="af-form__input-radio" name="cardname" type="radio" value="on" id="radiocard1" />
                            <label class="af-form__label" for="radiocard1"><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="radiocard1">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="radiocard1">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-rccard-group {
    margin-bottom: 1rem;
    margin-right: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 19px 0 rgba(0, 0, 0, 0.11);
    display: inline-flex;
    flex-direction: column;
    width: 100%;

    .af-rccard-group__text {
        margin: 0;
    }

    .af-rccard-group__label,
    .af-form__label {
        margin: 0;
        cursor: pointer;
    }

    .af-rccard-group__title {
        border-bottom: 1px solid $card-grey-light;
        border-radius: 4px 4px 0 0;
        font-weight: normal;
    }

    .af-rccard:nth-child(n + 1):not(:first-child):not(.af-rccard--active) {
        .af-rccard-header {
            border-left: 1px solid $card-grey-light;
        }

        .af-rccard-content,
        .af-rccard-footer {
            border-left: 1px solid $card-border-grey;
        }
    }
}

.af-rccard-group__title {
    margin: 0;
    width: 100%;
    padding: rem(10px);
    text-align: center;
    font-size: rem(18px);
    background: $card-header;
    color: $card-text-color;
}

.af-rccard-group__content {
    display: flex;
    flex-direction: row;
}

.af-rccard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.af-rccard-group--active {
    .af-rccard-group__title {
        color: $card-white;
        background: $card-blue-active;
        border-bottom: 0;
    }

    .af-rccard--active {
        .af-rccard-content {
            box-shadow: inset 0 0 0 1px $card-blue-active;
        }

        .af-rccard-footer {
            box-shadow: inset 0 -1px 0 1px $card-blue-active;
        }
    }
}

.af-rccard--active .af-rccard-header {
    background-color: $card-blue-active;
}

.af-rccard--disabled {
    position: relative;
    cursor: not-allowed;

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        background-color: $card-bg-disabled;
        opacity: 0.75;
    }
}

.af-rccard-header {
    background-color: $card-header;
    border-radius: 4px 4px 0 0;
    flex-grow: 2;
    display: flex;

    .af-form__radio {
        flex: 1;
        align-items: stretch;

        .af-form__label {
            height: 100%;

            &::before {
                left: rem(9.76px);
                top: rem(38px);
            }
        }
    }

    .af-form__checkbox .af-form__indicator {
        left: rem(10px);
        top: rem(38px);
    }

    .af-form__radio .af-form__label::after {
        left: rem(12.8px);
        top: rem(38px);
    }

    .af-form__checkbox .af-form__indicator i {
        left: 2px;
        top: 2px;
    }

    input {
        margin-top: rem(12px);
    }

    label {
        padding: rem(19px) rem(17px);
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
}

.af-rccard-header__meta,
.af-rccard-group__title {
    &+.af-rccard-group__content {
        .af-rccard-header {
            border-radius: 0;
        }
    }
}

.af-rccard-header__content {
    padding-left: rem(18px);
}

.af-rccard-header__title,
.af-rccard-header__subtitle {
    color: $card-text-color;
    margin: 0;
}

.af-rccard-header__title {
    font-size: 1.375rem;
    font-weight: 600;
}

.af-rccard-header__subtitle {
    font-size: rem(22px);
    font-weight: 400;
}

.af-rccard--active {

    .af-rccard-header__title,
    .af-rccard-header__subtitle {
        color: $card-white;
    }
}

.af-rccard-header__meta {
    border-radius: 4px 4px 0 0;
    width: 100%;
    color: $card-white;
    background-color: $card-blue-active;
    text-align: center;
    font-size: rem(14px);
    line-height: rem(20px);
    margin: 0;

    &+.af-rccard-group__title {
        border-radius: 0;
    }
}

.af-rccard-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: rem(23px) rem(30px) rem(31px) rem(20px);
    background-color: $card-white;
}

.af-rccard-footer {
    width: 100%;
    background-color: $card-grey-light;
    padding: rem(18px) rem(12px);
    font-size: rem(14px);
    position: relative;
    top: -1px;

    &::after {
        content: '';
        display: block;
        background: $card-border-grey;
        height: 1px;
        position: absolute;
        top: 0;
        left: 1px;
        right: 1px;
    }
}

$nb-card-max: 5;

@for $i from 1 through $nb-card-max {
    .af-rccard__#{$i} .af-rccard {
        flex: 0 0 percentage(1 / $i);
        width: percentage(1 / $i);
    }
}

Classic Form 2 Cards Radio

Recommandé

Franchisés standard

Copied
<div class="af-form__group row">
    <div class="col-md-8">
        <div class="af-rccard-group  af-rccard-group--active">
            <p class="af-rccard-header__meta">Recommandé</p>
            <h1 class="af-rccard-group__title">Franchisés standard</h1>
            <div class="af-rccard-group__content">
                <div class="af-rccard  af-rccard--active">
                    <header class="af-rccard-header">
                        <div class="af-form__radio  af-form__radio--active">
                            <input class="af-form__input-radio" name="group2" type="radio" value="on" id="radiocard2" />
                            <label class="af-form__label" for="radiocard2"><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="radiocard2">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="radiocard2">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
                <div class="af-rccard">
                    <header class="af-rccard-header">
                        <div class="af-form__radio">
                            <input class="af-form__input-radio" name="group2" type="radio" value="on" id="radiocard3" />
                            <label class="af-form__label" for="radiocard3"><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="radiocard3">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="radiocard3">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-rccard-group {
    margin-bottom: 1rem;
    margin-right: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 19px 0 rgba(0, 0, 0, 0.11);
    display: inline-flex;
    flex-direction: column;
    width: 100%;

    .af-rccard-group__text {
        margin: 0;
    }

    .af-rccard-group__label,
    .af-form__label {
        margin: 0;
        cursor: pointer;
    }

    .af-rccard-group__title {
        border-bottom: 1px solid $card-grey-light;
        border-radius: 4px 4px 0 0;
        font-weight: normal;
    }

    .af-rccard:nth-child(n + 1):not(:first-child):not(.af-rccard--active) {
        .af-rccard-header {
            border-left: 1px solid $card-grey-light;
        }

        .af-rccard-content,
        .af-rccard-footer {
            border-left: 1px solid $card-border-grey;
        }
    }
}

.af-rccard-group__title {
    margin: 0;
    width: 100%;
    padding: rem(10px);
    text-align: center;
    font-size: rem(18px);
    background: $card-header;
    color: $card-text-color;
}

.af-rccard-group__content {
    display: flex;
    flex-direction: row;
}

.af-rccard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.af-rccard-group--active {
    .af-rccard-group__title {
        color: $card-white;
        background: $card-blue-active;
        border-bottom: 0;
    }

    .af-rccard--active {
        .af-rccard-content {
            box-shadow: inset 0 0 0 1px $card-blue-active;
        }

        .af-rccard-footer {
            box-shadow: inset 0 -1px 0 1px $card-blue-active;
        }
    }
}

.af-rccard--active .af-rccard-header {
    background-color: $card-blue-active;
}

.af-rccard--disabled {
    position: relative;
    cursor: not-allowed;

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        background-color: $card-bg-disabled;
        opacity: 0.75;
    }
}

.af-rccard-header {
    background-color: $card-header;
    border-radius: 4px 4px 0 0;
    flex-grow: 2;
    display: flex;

    .af-form__radio {
        flex: 1;
        align-items: stretch;

        .af-form__label {
            height: 100%;

            &::before {
                left: rem(9.76px);
                top: rem(38px);
            }
        }
    }

    .af-form__checkbox .af-form__indicator {
        left: rem(10px);
        top: rem(38px);
    }

    .af-form__radio .af-form__label::after {
        left: rem(12.8px);
        top: rem(38px);
    }

    .af-form__checkbox .af-form__indicator i {
        left: 2px;
        top: 2px;
    }

    input {
        margin-top: rem(12px);
    }

    label {
        padding: rem(19px) rem(17px);
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
}

.af-rccard-header__meta,
.af-rccard-group__title {
    &+.af-rccard-group__content {
        .af-rccard-header {
            border-radius: 0;
        }
    }
}

.af-rccard-header__content {
    padding-left: rem(18px);
}

.af-rccard-header__title,
.af-rccard-header__subtitle {
    color: $card-text-color;
    margin: 0;
}

.af-rccard-header__title {
    font-size: 1.375rem;
    font-weight: 600;
}

.af-rccard-header__subtitle {
    font-size: rem(22px);
    font-weight: 400;
}

.af-rccard--active {

    .af-rccard-header__title,
    .af-rccard-header__subtitle {
        color: $card-white;
    }
}

.af-rccard-header__meta {
    border-radius: 4px 4px 0 0;
    width: 100%;
    color: $card-white;
    background-color: $card-blue-active;
    text-align: center;
    font-size: rem(14px);
    line-height: rem(20px);
    margin: 0;

    &+.af-rccard-group__title {
        border-radius: 0;
    }
}

.af-rccard-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: rem(23px) rem(30px) rem(31px) rem(20px);
    background-color: $card-white;
}

.af-rccard-footer {
    width: 100%;
    background-color: $card-grey-light;
    padding: rem(18px) rem(12px);
    font-size: rem(14px);
    position: relative;
    top: -1px;

    &::after {
        content: '';
        display: block;
        background: $card-border-grey;
        height: 1px;
        position: absolute;
        top: 0;
        left: 1px;
        right: 1px;
    }
}

$nb-card-max: 5;

@for $i from 1 through $nb-card-max {
    .af-rccard__#{$i} .af-rccard {
        flex: 0 0 percentage(1 / $i);
        width: percentage(1 / $i);
    }
}

Classic Form 3 Cards Radio

Franchisés standard

Copied
<div class="af-form__group row">
    <div class="col-md-8">
        <div class="af-rccard-group  af-rccard-group--active">
            <h1 class="af-rccard-group__title">Franchisés standard</h1>
            <div class="af-rccard-group__content">
                <div class="af-rccard">
                    <header class="af-rccard-header">
                        <div class="af-form__radio">
                            <input class="af-form__input-radio" name="cardname" type="radio" value="on" id="radiocard4" />
                            <label class="af-form__label" for="radiocard4"><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="radiocard4">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="radiocard4">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
                <div class="af-rccard  af-rccard--active">
                    <header class="af-rccard-header">
                        <div class="af-form__radio  af-form__radio--active">
                            <input class="af-form__input-radio" name="cardname" type="radio" value="on" id="radiocard5" />
                            <label class="af-form__label" for="radiocard5"><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="radiocard5">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="radiocard5">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
                <div class="af-rccard">
                    <header class="af-rccard-header">
                        <div class="af-form__radio">
                            <input class="af-form__input-radio" name="cardname" type="radio" value="on" id="radiocard6" />
                            <label class="af-form__label" for="radiocard6"><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="radiocard6">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="radiocard6">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-rccard-group {
    margin-bottom: 1rem;
    margin-right: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 19px 0 rgba(0, 0, 0, 0.11);
    display: inline-flex;
    flex-direction: column;
    width: 100%;

    .af-rccard-group__text {
        margin: 0;
    }

    .af-rccard-group__label,
    .af-form__label {
        margin: 0;
        cursor: pointer;
    }

    .af-rccard-group__title {
        border-bottom: 1px solid $card-grey-light;
        border-radius: 4px 4px 0 0;
        font-weight: normal;
    }

    .af-rccard:nth-child(n + 1):not(:first-child):not(.af-rccard--active) {
        .af-rccard-header {
            border-left: 1px solid $card-grey-light;
        }

        .af-rccard-content,
        .af-rccard-footer {
            border-left: 1px solid $card-border-grey;
        }
    }
}

.af-rccard-group__title {
    margin: 0;
    width: 100%;
    padding: rem(10px);
    text-align: center;
    font-size: rem(18px);
    background: $card-header;
    color: $card-text-color;
}

.af-rccard-group__content {
    display: flex;
    flex-direction: row;
}

.af-rccard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.af-rccard-group--active {
    .af-rccard-group__title {
        color: $card-white;
        background: $card-blue-active;
        border-bottom: 0;
    }

    .af-rccard--active {
        .af-rccard-content {
            box-shadow: inset 0 0 0 1px $card-blue-active;
        }

        .af-rccard-footer {
            box-shadow: inset 0 -1px 0 1px $card-blue-active;
        }
    }
}

.af-rccard--active .af-rccard-header {
    background-color: $card-blue-active;
}

.af-rccard--disabled {
    position: relative;
    cursor: not-allowed;

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        background-color: $card-bg-disabled;
        opacity: 0.75;
    }
}

.af-rccard-header {
    background-color: $card-header;
    border-radius: 4px 4px 0 0;
    flex-grow: 2;
    display: flex;

    .af-form__radio {
        flex: 1;
        align-items: stretch;

        .af-form__label {
            height: 100%;

            &::before {
                left: rem(9.76px);
                top: rem(38px);
            }
        }
    }

    .af-form__checkbox .af-form__indicator {
        left: rem(10px);
        top: rem(38px);
    }

    .af-form__radio .af-form__label::after {
        left: rem(12.8px);
        top: rem(38px);
    }

    .af-form__checkbox .af-form__indicator i {
        left: 2px;
        top: 2px;
    }

    input {
        margin-top: rem(12px);
    }

    label {
        padding: rem(19px) rem(17px);
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
}

.af-rccard-header__meta,
.af-rccard-group__title {
    &+.af-rccard-group__content {
        .af-rccard-header {
            border-radius: 0;
        }
    }
}

.af-rccard-header__content {
    padding-left: rem(18px);
}

.af-rccard-header__title,
.af-rccard-header__subtitle {
    color: $card-text-color;
    margin: 0;
}

.af-rccard-header__title {
    font-size: 1.375rem;
    font-weight: 600;
}

.af-rccard-header__subtitle {
    font-size: rem(22px);
    font-weight: 400;
}

.af-rccard--active {

    .af-rccard-header__title,
    .af-rccard-header__subtitle {
        color: $card-white;
    }
}

.af-rccard-header__meta {
    border-radius: 4px 4px 0 0;
    width: 100%;
    color: $card-white;
    background-color: $card-blue-active;
    text-align: center;
    font-size: rem(14px);
    line-height: rem(20px);
    margin: 0;

    &+.af-rccard-group__title {
        border-radius: 0;
    }
}

.af-rccard-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: rem(23px) rem(30px) rem(31px) rem(20px);
    background-color: $card-white;
}

.af-rccard-footer {
    width: 100%;
    background-color: $card-grey-light;
    padding: rem(18px) rem(12px);
    font-size: rem(14px);
    position: relative;
    top: -1px;

    &::after {
        content: '';
        display: block;
        background: $card-border-grey;
        height: 1px;
        position: absolute;
        top: 0;
        left: 1px;
        right: 1px;
    }
}

$nb-card-max: 5;

@for $i from 1 through $nb-card-max {
    .af-rccard__#{$i} .af-rccard {
        flex: 0 0 percentage(1 / $i);
        width: percentage(1 / $i);
    }
}

Classic Form 4 Cards Radio

Franchisés standard

Copied
<div class="af-form__group row">
    <div class="col-md-8">
        <div class="af-rccard-group  af-rccard-group--active">
            <h1 class="af-rccard-group__title">Franchisés standard</h1>
            <div class="af-rccard-group__content">
                <div class="af-rccard">
                    <header class="af-rccard-header">
                        <div class="af-form__radio">
                            <input class="af-form__input-radio" name="cardname" type="radio" value="on" id="radiocard7" />
                            <label class="af-form__label" for="radiocard7"><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="radiocard7">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="radiocard7">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
                <div class="af-rccard  af-rccard--active">
                    <header class="af-rccard-header">
                        <div class="af-form__radio  af-form__radio--active">
                            <input class="af-form__input-radio" name="cardname" type="radio" value="on" id="radiocard8" />
                            <label class="af-form__label" for="radiocard8"><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="radiocard8">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="radiocard8">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
                <div class="af-rccard">
                    <header class="af-rccard-header">
                        <div class="af-form__radio">
                            <input class="af-form__input-radio" name="cardname" type="radio" value="on" id="radiocard9" />
                            <label class="af-form__label" for="radiocard9"><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="radiocard9">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="radiocard9">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
                <div class="af-rccard">
                    <header class="af-rccard-header">
                        <div class="af-form__radio">
                            <input class="af-form__input-radio" name="cardname" type="radio" value="on" id="radiocard10" />
                            <label class="af-form__label" for="radiocard10"><span class="af-form__description">
                                    <p class="af-rccard-header__title"> Référence</p>
                                    <p class="af-rccard-header__subtitle">50 € / mois</p>
                                </span></label>
                        </div>
                    </header>
                    <label class="af-rccard-content af-rccard-group__label" for="radiocard10">
                        <p class="af-rccard-group__text">John Doe</p>
                        <dl>
                            <dt class="af-rccard__term"> Statut:</dt>
                            <dd class="af-rccard__def"> En cours</dd>
                            <dt class="af-rccard__term"> Epargne atteinte:</dt>
                            <dd class="af-rccard__def"> 125 000€</dd>
                        </dl>
                    </label>
                    <footer class="af-rccard-footer">
                        <label class="af-rccard-group__label" for="radiocard10">
                            <button class="btn af-btn" type="submit">Valider mon action</button>
                        </label>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-rccard-group {
    margin-bottom: 1rem;
    margin-right: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 19px 0 rgba(0, 0, 0, 0.11);
    display: inline-flex;
    flex-direction: column;
    width: 100%;

    .af-rccard-group__text {
        margin: 0;
    }

    .af-rccard-group__label,
    .af-form__label {
        margin: 0;
        cursor: pointer;
    }

    .af-rccard-group__title {
        border-bottom: 1px solid $card-grey-light;
        border-radius: 4px 4px 0 0;
        font-weight: normal;
    }

    .af-rccard:nth-child(n + 1):not(:first-child):not(.af-rccard--active) {
        .af-rccard-header {
            border-left: 1px solid $card-grey-light;
        }

        .af-rccard-content,
        .af-rccard-footer {
            border-left: 1px solid $card-border-grey;
        }
    }
}

.af-rccard-group__title {
    margin: 0;
    width: 100%;
    padding: rem(10px);
    text-align: center;
    font-size: rem(18px);
    background: $card-header;
    color: $card-text-color;
}

.af-rccard-group__content {
    display: flex;
    flex-direction: row;
}

.af-rccard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.af-rccard-group--active {
    .af-rccard-group__title {
        color: $card-white;
        background: $card-blue-active;
        border-bottom: 0;
    }

    .af-rccard--active {
        .af-rccard-content {
            box-shadow: inset 0 0 0 1px $card-blue-active;
        }

        .af-rccard-footer {
            box-shadow: inset 0 -1px 0 1px $card-blue-active;
        }
    }
}

.af-rccard--active .af-rccard-header {
    background-color: $card-blue-active;
}

.af-rccard--disabled {
    position: relative;
    cursor: not-allowed;

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        background-color: $card-bg-disabled;
        opacity: 0.75;
    }
}

.af-rccard-header {
    background-color: $card-header;
    border-radius: 4px 4px 0 0;
    flex-grow: 2;
    display: flex;

    .af-form__radio {
        flex: 1;
        align-items: stretch;

        .af-form__label {
            height: 100%;

            &::before {
                left: rem(9.76px);
                top: rem(38px);
            }
        }
    }

    .af-form__checkbox .af-form__indicator {
        left: rem(10px);
        top: rem(38px);
    }

    .af-form__radio .af-form__label::after {
        left: rem(12.8px);
        top: rem(38px);
    }

    .af-form__checkbox .af-form__indicator i {
        left: 2px;
        top: 2px;
    }

    input {
        margin-top: rem(12px);
    }

    label {
        padding: rem(19px) rem(17px);
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
}

.af-rccard-header__meta,
.af-rccard-group__title {
    &+.af-rccard-group__content {
        .af-rccard-header {
            border-radius: 0;
        }
    }
}

.af-rccard-header__content {
    padding-left: rem(18px);
}

.af-rccard-header__title,
.af-rccard-header__subtitle {
    color: $card-text-color;
    margin: 0;
}

.af-rccard-header__title {
    font-size: 1.375rem;
    font-weight: 600;
}

.af-rccard-header__subtitle {
    font-size: rem(22px);
    font-weight: 400;
}

.af-rccard--active {

    .af-rccard-header__title,
    .af-rccard-header__subtitle {
        color: $card-white;
    }
}

.af-rccard-header__meta {
    border-radius: 4px 4px 0 0;
    width: 100%;
    color: $card-white;
    background-color: $card-blue-active;
    text-align: center;
    font-size: rem(14px);
    line-height: rem(20px);
    margin: 0;

    &+.af-rccard-group__title {
        border-radius: 0;
    }
}

.af-rccard-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: rem(23px) rem(30px) rem(31px) rem(20px);
    background-color: $card-white;
}

.af-rccard-footer {
    width: 100%;
    background-color: $card-grey-light;
    padding: rem(18px) rem(12px);
    font-size: rem(14px);
    position: relative;
    top: -1px;

    &::after {
        content: '';
        display: block;
        background: $card-border-grey;
        height: 1px;
        position: absolute;
        top: 0;
        left: 1px;
        right: 1px;
    }
}

$nb-card-max: 5;

@for $i from 1 through $nb-card-max {
    .af-rccard__#{$i} .af-rccard {
        flex: 0 0 percentage(1 / $i);
        width: percentage(1 / $i);
    }
}

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.react 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...

card

3) DO/DONT

Coming soon...

4) Utilisation

card

a) Position

Coming soon...

b) Alignement

Coming soon...

c) Contenu

Coming soon...

d) Rédaction

Coming soon...

e) Action

Coming soon...

f) États

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-all/dist/style/bootstrap/grid.css';
@import '@axa-fr/react-toolkit-button/dist/button.scss';
@import '@axa-fr/react-toolkit-form-core/dist/form.scss';
@import '@axa-fr/react-toolkit-form-input-card/dist/card.scss';
@import '@axa-fr/react-toolkit-form-input-checkbox/dist/checkbox.scss';
@import '@axa-fr/react-toolkit-form-input-radio/dist/radio.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-rccard 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
Policy Privacy © 2020 AXA All Rights Reserved