> Card

Card

Carte avec header, section et actions. Composant de type Box.

TagsuiInformationsFigmaExemples9StylesDisponibles

card

Titre loremSous-titre

PRÉSENT

Titre section

Description

Titre section

Description

export const card = () => {
  return (
    <Box style={{ width: '100%', maxWidth: 400 }}>
      <Card>
        <Card.Header
          titre="Titre lorem"
          sousTitre="Sous-titre"
          image={<Avatar size="md" fallbackText="M" />}
          badge={
            <Badge variant="success" size="sm">
              PRÉSENT
            </Badge>
          }
        />
        <Card.Section titre="Titre section" titreIcone="Calendar" description="Description" />
        <Card.Section titre="Titre section" titreIcone="Calendar" description="Description" />
        <Card.Actions>
          <Button variant="secondary" title="Libellé" size="sm" />
          <Button variant="primary" title="Libellé" size="sm" />
        </Card.Actions>
      </Card>
    </Box>
  );
};

cardDisabled

Titre loremSous-titre

PRÉSENT

Titre section

Description

Titre section

Description

export const cardDisabled = () => {
  return (
    <Box style={{ width: '100%', maxWidth: 400 }}>
      <Card>
        <Card.Header
          variant="disabled"
          titre="Titre lorem"
          sousTitre="Sous-titre"
          image={<Avatar size="md" src="https://picsum.photos/100/100" fallbackText="M" />}
          badge={
            <Badge variant="disabled" size="sm">
              PRÉSENT
            </Badge>
          }
        />
        <Card.Section variant="disabled" titre="Titre section" titreIcone="Calendar" description="Description" />
        <Card.Section variant="disabled" titre="Titre section" titreIcone="Calendar" description="Description" />
        <Card.Actions>
          <Button variant="secondary" title="Libellé" size="sm" disabled />
          <Button variant="primary" title="Libellé" size="sm" disabled />
        </Card.Actions>
      </Card>
    </Box>
  );
};

cardWithMedia

Titre loremSous-titre

PRÉSENT

Titre section

Description

Titre section

Description

export const cardWithMedia = () => {
  return (
    <Box style={{ width: '100%', maxWidth: 400 }}>
      <Card>
        <Card.Media>
          <img src="https://picsum.photos/400/200" alt="" style={{ width: '100%', display: 'block' }} />
        </Card.Media>
        <Card.Header
          titre="Titre lorem"
          sousTitre="Sous-titre"
          image={<Avatar size="md" fallbackText="M" />}
          badge={
            <Badge variant="success" size="sm">
              PRÉSENT
            </Badge>
          }
        />
        <Card.Section titre="Titre section" titreIcone="Calendar" description="Description" />
        <Card.Section titre="Titre section" titreIcone="Calendar" description="Description" />
        <Card.Actions>
          <Button variant="secondary" title="Libellé" size="sm" />
          <Button variant="primary" title="Libellé" size="sm" />
        </Card.Actions>
      </Card>
    </Box>
  );
};

cardWithMediaDisabled

Titre loremSous-titre

PRÉSENT

Titre section

Description

Titre section

Description

export const cardWithMediaDisabled = () => {
  return (
    <Box style={{ width: '100%', maxWidth: 400 }}>
      <Card>
        <Card.Media variant="disabled">
          <img src="https://picsum.photos/400/200" alt="" style={{ width: '100%', display: 'block' }} />
        </Card.Media>
        <Card.Header
          variant="disabled"
          titre="Titre lorem"
          sousTitre="Sous-titre"
          image={<Avatar size="md" fallbackText="M" />}
          badge={
            <Badge variant="disabled" size="sm">
              PRÉSENT
            </Badge>
          }
        />
        <Card.Section variant="disabled" titre="Titre section" titreIcone="Calendar" description="Description" />
        <Card.Section variant="disabled" titre="Titre section" titreIcone="Calendar" description="Description" />
        <Card.Actions>
          <Button variant="secondary" title="Libellé" size="sm" disabled />
          <Button variant="primary" title="Libellé" size="sm" disabled />
        </Card.Actions>
      </Card>
    </Box>
  );
};

cardSection

Titre de la carte

Description de la carte

export const cardSection = () => {
  return (
    <Card.Section
      titre="Titre de la carte"
      description="Description de la carte"
      titreIcone="Image"
      descriptionIcone="Image"
    />
  );
};

cardSectionDisabled

Titre de la carte

Description de la carte

export const cardSectionDisabled = () => {
  return (
    <Card.Section
      variant="disabled"
      titre="Titre de la carte"
      description="Description de la carte"
      titreIcone="Image"
      descriptionIcone="Image"
    />
  );
};

cardHeader

Titre loremSous-titre

PRÉSENT

Titre loremSous-titre

export const cardHeader = () => {
  return (
    <Box display="flex" flexDirection="column" gap="100">
      <Card.Header
        titre="Titre lorem"
        sousTitre="Sous-titre"
        image={<Avatar size="md" fallbackText="M" />}
        badge={
          <Badge variant="success" size="sm">
            PRÉSENT
          </Badge>
        }
      />
      <Card.Header titre="Titre lorem" sousTitre="Sous-titre" image={<LucideIcon name="Image" size="md" />} />
    </Box>
  );
};

cardHeaderDisabled

Titre loremSous-titre

PRÉSENT

export const cardHeaderDisabled = () => {
  return (
    <Card.Header
      variant="disabled"
      titre="Titre lorem"
      sousTitre="Sous-titre"
      image={<Avatar size="md" fallbackText="M" />}
      badge={
        <Badge variant="disabled" size="sm">
          PRÉSENT
        </Badge>
      }
    />
  );
};

cardActions

Privilégier l'utilisation de bouton en taille SM, avec le bouton primary toujours à droite.

export const cardActions = () => {
  return (
    <Card.Actions>
      <Button variant="secondary" title="Action" size="sm" />
      <Button variant="primary" title="Action" size="sm" />
    </Card.Actions>
  );
};

Alveole UI Kit — v1.8.4