Card List#

A list of owc-cards displayed in a row.

Simple example:

Each card will display data based on the provided .fields and .data arrays. The header, body, and footer fields define what data is displayed where and the .data attribute defines the content for all cards.

export const simpleCardList = () => {
  return html`
    <owc-card-list
      .fields=${{
        header: row => html`${row.firstName}`,
        body: row => html`Meeting: ${row.subject}`,
        footer: row => html`Lorem Ipsum dolor`,
      }}
      .data=${[
        {
          firstName: 'Robert Chen',
          subject: 'Meeting with Michael, Lorem Ipsum dolor',
        },
        {
          firstName: 'Michael Doe',
          subject: 'Meeting with Robert, Lorem Ipsum dolor',
        },
        {
          firstName: 'John Doe',
          subject: 'Meeting with Manager, Lorem Ipsum dolor',
        },
      ]}
    ></owc-card-list>
  `;
};

Card list with title#

The .title attribute is used to specify the title for the list.

export const cardListTitle = () => {
  return html`
    <owc-card-list
      .fields=${{
        header: row => html`${row.firstName}`,
        body: row => html`Meeting: ${row.subject}`,
      }}
      .data=${[
        {
          firstName: 'Robert Chen',
          subject: 'Meeting with Michael, Lorem Ipsum dolor',
        },
        {
          firstName: 'Michael Doe',
          subject: 'Meeting with Robert, Lorem Ipsum dolor',
        },
        {
          firstName: 'John Doe',
          subject: 'Meeting with Manager, Lorem Ipsum dolor',
        },
      ]}
      .title=${'Title text'}
    ></owc-card-list>
  `;
};

Card list with view all link#

The .viewAllUrl attribute specifies the URL that will be navigated to when the "View All" link is clicked.

export const cardListViewAll = () => {
  return html`
    <owc-card-list
      .fields=${{
        header: row => html`${row.firstName}`,
        body: row => html`Meeting: ${row.subject}`,
      }}
      .data=${[
        {
          firstName: 'Robert Chen',
          subject: 'Meeting with Michael, Lorem Ipsum dolor',
        },
        {
          firstName: 'Michael Doe',
          subject: 'Meeting with Robert, Lorem Ipsum dolor',
        },
        {
          firstName: 'John Doe',
          subject: 'Meeting with Manager, Lorem Ipsum dolor',
        },
      ]}
      .viewAllUrl=${'https://www.example.com'}
    ></owc-card-list>
  `;
};

Card list with sorter#

With the .sorter attribute a sorter can be added that sorts the cards in a custom order.

export const cardListSorter = () => {
  return html`
    <owc-card-list
      .fields=${{
        header: row => html`${row.firstName}`,
        body: row => html`Meeting Date: ${row.meetingDate.toLocaleDateString()}`,
      }}
      .data=${[
        {
          firstName: 'Robert Chen',
          meetingDate: new Date('2022-06-28T14:30:00.000Z'),
        },
        {
          firstName: 'Michael Doe',
          meetingDate: new Date('2022-05-28T14:30:00.000Z'),
        },
        {
          firstName: 'John Doe',
          meetingDate: new Date('2023-03-28T14:30:00.000Z'),
        },
      ]}
      .sorter=${(a, b) => a.meetingDate - b.meetingDate}
    ></owc-card-list>
  `;
};

Card list with images#

With the .image attribute images can be added to the cards. .image has to be an object with a src and alt string.

export const cardImages = () => {
  return html`
    <owc-card-list
      .fields=${{
        header: row => html`${row.firstName}`,
        body: row => html`${row.subject}`,
        image: {
          src: row => row.image,
          alt: row => row.alt,
        },
      }}
      .data=${[
        {
          firstName: 'Robert Cat',
          image: 'https://loremflickr.com/320/240/cat',
          subject: 'A random small picture related to a cat',
          alt: 'A random small picture related to a cat',
        },
        {
          firstName: 'Michael Dog',
          image: 'https://loremflickr.com/320/240/dog',
          subject: 'A random small picture related to a dog',
          alt: 'A random small picture related to a dog',
        },
        {
          firstName: 'John Pork',
          image: 'https://loremflickr.com/320/240/pig',
          subject: 'A random small picture related to a pig',
          alt: 'A random small picture related to a pig',
        },
      ]}
    ></owc-card-list>
  `;
};

Card list with links#

With the .getRowLinkSettings attribute links can be added to the cards. .getCardLinkSettings has to be a function with href and target.

export const cardLink = () => {
  return html`
    <owc-card-list
      .fields=${{
        header: row => html`${row.firstName}`,
        body: row => html`Meeting: ${row.subject}`,
        footer: row => html`Lorem Ipsum dolor`,
      }}
      .data=${[
        {
          firstName: 'Robert Chen',
          subject: 'Meeting with Michael, Lorem Ipsum dolor',
        },
        {
          firstName: 'Michael Doe',
          subject: 'Meeting with Robert, Lorem Ipsum dolor',
        },
        {
          firstName: 'John Doe',
          subject: 'Meeting with Manager, Lorem Ipsum dolor',
        },
      ]}
      .getCardLinkSettings=${card => ({
        href: `/meetings/${card.firstName}`,
        target: '_blank',
      })}
    ></owc-card-list>
  `;
};

API#

Attributes & properties#

Property	Type	Default	Description
`title`	`string`	`''`	Heading above the list.
`viewAllUrl`	`string`	`''`	Renders an "Alle Anzeigen" link to this URL.
`data`	`T[]`	`[]`	The rows; at most the first 10 (after sorting) render as cards.
`fields`	`Fields<T>`	`{ body }`	Maps a row to card content: `body`, `header?`, `footer?`, `image?` (`{src, alt}`), `style?`.
`sorter`	`(a, b) => number`	keep order	Display sort; the data array itself is not mutated.
`getCardLinkSettings`	`(row) => { href }`	no links	Makes each card an overlay link.

The field types are importable from @open-wc/components/OwcCardList.types.js.

Contents