Card List

Displays a list of Card components

Import

  import { CardList } from '@devseed-ui/card-list'

Example

<DevseedUiThemeProvider>
  <CardList>
    <Card
      display="card"
      title="Image Card"
      image="https://place-hold.it/300x160"
    />
  </CardList>
</DevseedUiThemeProvider>

Output HTML

<div class="card-list__CardListInner-sc-14ud96z-0 jfRvJC">
  <ol class="card-list__List-sc-14ud96z-1 jKhDmf">
    <article class="card__CardEl-sc-1wnh0vq-0 mAfEj">
      <a display="card" class="card__CardContent-sc-1wnh0vq-1 cveFEm"
        ><figure>
          <img
            src="https://place-hold.it/300x160"
            alt="Image"
            class="card__CardImage-sc-1wnh0vq-2 dhpnhN"
          />
        </figure>
        <header class="card__CardHeader-sc-1wnh0vq-3 gTppkl">
          <h1
            class="src__Heading-sc-1xk3dx8-0 card__CardTitle-sc-1wnh0vq-4 iuPHNF"
          >
            Image Card 1
          </h1>
        </header></a
      >
    </article>
  </ol>
</div>

API Documentation

Card

rows:
  - Prop name: "display"
    Type: "oneOf ['card', 'compact']"
    Description: "Sets display style of card"
    Default value: ""
  - Prop name: "title"
    Type: "string"
    Description: "Sets cards title"
    Default value: ""
  - Prop name: "image"
    Type: "string"
    Description: "Set URL for card image"
    Default value: ""

Card-List

rows:
  - Prop name: "data"
    Type: "array"
    Description: "Optional array of Card prop objects"
    Default value: ""