dsfr4drupal-1.x-dev/components/card/card.component.yml

name: DSFR - Card
description: The card is a link to an editorial page of which it gives an overview. It is usually part of a collection or preview list of similar content. The card is never presented in isolation.
status: stable
group: DSFR
variants:
  sm:
    title: Small
    description: Component small size
  md:
    title: Medium
    description: Component medium size (default)
  lg:
    title: Large
    description: Component large size
props:
  properties:
    attributes:
      type: Drupal\Core\Template\Attribute
      title: Attributes
    bg_boxes:
      type: string
      title: Backgrounds and boxes
      description: Card offers different variations in terms of background and box.
      enum:
        - grey
        - no-border
        - no-background
        - shadow
    description:
      type: string
      title: Description
    detail:
      type: string
      title: Top detail
    detail_end:
      type: string
      title: Bottom detail
    detail_end_icon:
      type: string
      title: Bottom detail icon
      description: 'Example: "checkbox-line"'
    detail_icon:
      type: string
      title: Top detail icon
      description: 'Example: "checkbox-line"'
    disabled:
      type: boolean
      title: Disable link?
      default: false
      description: If true, remove the href from the link to disable it or add the disabled attribute to the button.
    enlarge_button:
      type: boolean
      title: Enlarge button?
      description: Extend the button to the whole card. Will not be used for cards with footer.
      default: false
    enlarge_link:
      type: boolean
      title: Enlarge link?
      description: Extend the link to the whole card. Will not be used for cards with footer.
      default: false
    file_assess:
      type: boolean
      title: File assess
      default: false
      description: Evaluate the file (in "href" attribute) to automatically generate file details (type and size and language).
    footer:
      type: string
      title: Footer
      description: Should be button or link group.
    horizontal:
      type: boolean
      title: Horizontal card?
      default: false
    horizontal_ratio:
      type: string
      title: Ratio for horizontal cards
      description: The default ratio is 40% for the image. Can also be 33/66 or 50/50.
      enum:
        - tier
        - half
    image:
      type: string
      title: Image
      description: Do not forget to add class "fr-responsive-img" to the image.
    image_badges:
      type: string
      title: Image badges
    is_download:
      type: boolean
      title: Is a download card?
      default: false
    link_attributes:
      type: Drupal\Core\Template\Attribute
      title: Link attributes
    no_arrow:
      type: boolean
      title: Hide an arrow?
      description: Hides an arrow in the card bottom.
      default: false
    tags_badges:
      type: string
      title: Tags or badges groups
    title:
      type: string
      title: Title
    title_attributes:
      type: Drupal\Core\Template\Attribute
      title: Title attributes
    title_tag:
      type: string
      title: Title HTML tag
      default: h3
    url:
      type: string
      title: URL
    use_button:
      type: boolean
      title: Use button?
      description: Use button instead of link.
      default: false
  required:
    - title
libraryOverrides:
  dependencies:
    - dsfr4drupal/component.card