label: Card
preview: "@uswds-content"
status: ready

variants:
  - name: default
    label: Default
    context:
      cards:
        - title: Default card
          media: false
          classes: "tablet:grid-col-4"
          media_classes: ""
          image_classes: ""
          content:
            - Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.
              Facere magnam quo nostrum amet odio ut ducimus?
        - title: The economy of cities
          media: false
          classes: "tablet:grid-col-4"
          media_classes: ""
          image_classes: ""
          content:
            - Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.
              Facere magnam quo nostrum amet odio ut ducimus?
        - title: Cities have the capability of providing something for everybody
          media: false
          classes: "tablet:grid-col-4"
          media_classes: ""
          image_classes: ""
          content:
            - Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.
              Facere magnam quo nostrum amet odio ut ducimus?

  - name: media
    label: Media
    context:
      cards:
        - title: Default media
          classes: "tablet:grid-col"
          media: true
          media_classes: ""
          image_classes: ""
          content:
            - Lorem ipsum dolor sit amet consectetur adipisicing elit.
        - title: Inset media
          classes: "usa-card--header-first tablet:grid-col"
          media: true
          media_classes: "usa-card__media--inset"
          image_classes: ""
          content:
            - Nemo illo et error deserunt qui doloremque provident
              perferendis fuga pariatur eum?
        - title: Exdent media
          classes: "tablet:grid-col"
          media: true
          media_classes: "usa-card__media--exdent"
          image_classes: ""
          content:
            - Tempore ab exercitationem distinctio iste esse
              numquam a rerum culpa at quibusdam
        - title: Media with header first
          classes: "usa-card--header-first tablet:grid-col"
          media: true
          media_classes: "usa-card__media--exdent"
          image_classes: ""
          content:
            - Tempore ab exercitationem distinctio iste esse
              numquam a rerum culpa at quibusdam

  - name: flag
    label: Flag
    context:
      cards:
        - title: Default flag
          classes: "usa-card--flag desktop:grid-col-6"
          media: true
          media_classes: ""
          image_classes: ""
          content:
            - Lorem ipsum dolor sit amet consectetur adipisicing elit.
        - title: Flag media right inset
          classes: "usa-card--flag usa-card--media-right desktop:grid-col-6"
          media: true
          media_classes: "usa-card__media--inset"
          image_classes: ""
          content:
            - Nemo illo et error deserunt qui doloremque provident
              perferendis fuga pariatur eum?