Statut
Component checklist
Usage
La carte édito permet de présenter plusieurs blocks de contenu en un seul composant, agencés selon une disposition prédéfinie.
Structure
L’élément dsa-card-content peut s’utiliser avec les éléments suivants:
- dsa-icon comme icône de titre, à placer dans le slot title-icon
- dsa-tag ou dsa-tag-button comme étiquettes, à placer dans le slot dédié tags
- dsa-button ou tout autre composant du DSA déclenchant une action, à placer dans le slot footer
- tout autre élément, à placer dans les slots par défaut ou media. Nous vous invitons cependant à suivre nos recommandations
<dsa-card-content>
<img
slot="media"
alt=""
src="/dsa-bg.jpg"
style="width: 100%"
/>
<dsa-tag slot="tags" label="Lorem"></dsa-tag>
<dsa-tag slot="tags" label="Ipsum"></dsa-tag>
<h1 slot="title">Title lorem ipsum</h1>
<p slot="subtitle">Subtitle</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Purus,
elit nibh et nisl, pellentesque scelerisque faucibus facilisis
at. Placerat morbi sem viverra diam lectus odio orci...
</p>
<dsa-button slot="footer" variant="secondary">Bouton</dsa-button>
</dsa-card-content>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/card-content/card-content.js';
import '@ds-autonomie/web-components/dist/components/button/button.js';
import '@ds-autonomie/web-components/dist/components/tag/tag.js';
import type { DSACardContent, DSAButton, DSATag } from '@ds-autonomie/web-components'
</script>
Code HTML à implémenter pour utiliser le composant de carte édito
API
dsa-card-content
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
contrastedBorders contrasted-borders |
Augmentez le contraste des bordures dans les contextes où il pourrait être difficile d'identifier la carte. |
boolean |
false |
|
href |
Si cet attribut est défini, le titre de la carte deviendra un lien, avec un zone de clic couvrant l'intégralité de la carte. Si le slot footer est vide, une icône de chevron sera également ajoutée à un endroit prédéfini. |
string |
'' |
|
target |
Indique au navigateur où ouvrir le lien. Seulement utilisé lorsque href est présent |
'\_blank' \| '\_parent' \| '\_self' \| '\_top' |
- |
|
rel |
Lors de l'utilisation de href, cet attribut correspondra à l'attribut rel du lien sous-jacent. Contrairement aux liens ordinaires, la valeur par défaut est noreferrer noopener pour des raisons de sécurité. Cependant, si vous utilisez target pour pointer vers un onglet ou une fenêtre spécifique, cela empêchera le fonctionnement correct. Il faudra supprimer ou modifier la valeur par défaut avec une chaîne vide ou à une valeur de votre choix |
string |
'noreferrer noopener' |
|
download |
Indique au navigateur que le lien est à télécharger plutôt que d'être affiché. La valeur, si spécifié est le nom du fichier à télécharger |
string |
- |
|
variant |
Permet de définir la variante de style de la carte. Par défaut, seul un contour est appliqué. |
'outlined' \| 'filled' |
'outlined' |
|
layout |
Permet de définir la disposition du contenu de la carte. Une seule disposition verticale existe, mais deux dispositions horizontales sont disponibles. |
'vertical' \| 'left-align' \| 'right-align' |
'vertical' |
|
size |
La taille de la carte. |
'small' | 'medium' | 'large' |
'large' |
Slots
|
Nom |
Description |
|---|---|
|
(defaut) |
Le contenu principal, qui sera placé au centre de la carte, après son éventuel titre |
|
media |
Un contenu qui sera placé au début ou à la fin de la carte (selon la disposition choisie via l'attribut layout), et qui prendra toute sa largeur ou hauteur |
|
tags |
Permet d'ajouter des tags |
|
title-icon |
Permet d'intégrer une icône dans le titre de la carte |
|
title |
Le titre de la carte, qui sera mis en valeur par son style de texte |
|
subtitle |
Le sous-titre de la carte, qui sera placé sous son titre |
|
footer |
Permet d'intégrer des actions à la fin de la carte pour pousser l'utilisateur à intéragir avec celle-ci |
Références
Voici la liste des références vers les composants liés :