PreviewCard

Library

Allium Design Systemweb-only

Repository

github.com/telus/allium-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<div style={{ maxWidth: '30rem', margin: '0 auto' }}> <PreviewCard href="https://telus.com" tag="Example category" title="An article with a headline" footer="Footer content" fullBleedContent={{ alt: 'Full Bleed Image Example', src: '/allium-design-system/img/pigs-allium-lo.png' }} /> </div>

<div style={{ maxWidth: '30rem', margin: '0 auto' }}>
  <PreviewCard
    href="https://telus.com"
    tag="Example category"
    title="An article with a headline"
    footer="Footer content"
    fullBleedContent={{
      alt: 'Full Bleed Image Example',
      src: '/allium-design-system/img/pigs-allium-lo.png'
    }}
  />
</div>

Introduction

import { PreviewCard } from '@telus-uds/ds-allium'

A PreviewCard is a Card designed for guiding a user to an article based on the article's title and other details.

Guidance

• Showcase and guide users to another page
• Whole card is interactive
• Width expands based on column or container
• Height expands to the tallest PreviewCard in the row
• You can render any content full bleed-style by passing some JSX to the content field of the fullBleedContent prop:

Loading...

<PreviewCard href="https://telus.com" tag="Example category" title="An article with a headline" footer="Footer content" fullBleedContent={{ alt: 'Full Bleed Image Example', position: 'bottom', content: ( <OptimizeImage contentfulAssetUrl="https://images.ctfassets.net/3cqlnin176yn/1GfIHDOb3n3uO3wVnKjHZ2/3a3c59c5caa91a315da1b3804cdf0b1b/Alpaca-lets-make-the-future-friendly-Hero-Banner-Tile.jpg" alt="alpacas" /> ) }} />

<PreviewCard
  href="https://telus.com"
  tag="Example category"
  title="An article with a headline"
  footer="Footer content"
  fullBleedContent={{
    alt: 'Full Bleed Image Example',
    position: 'bottom',
    content: (
      <OptimizeImage
        contentfulAssetUrl="https://images.ctfassets.net/3cqlnin176yn/1GfIHDOb3n3uO3wVnKjHZ2/3a3c59c5caa91a315da1b3804cdf0b1b/Alpaca-lets-make-the-future-friendly-Hero-Banner-Tile.jpg"
        alt="alpacas"
      />
    )
  }}
/>

caution

Note that at the moment Video component does not provide perfect experience when used within a clickable cards (PreviewCard, StoryCard) with href set: the volume and progress sliders can be clicked but are not draggable. As a workaround, one can use onPress prop instead href to organize navigation in such cases.

Feel free to follow https://github.com/telus/allium-design-system/issues/6 if you would like to be up to date on the state of this issue.

Accessibility

The entire card is focused as one unit, and screenreaders read the content of each card as one unit. Multiple cards will therefore be read as a list of semantic links.

Platform considerations

This component is currently only supported on web.

Figma

Props

Name	Type	Default	Description
footer	node | string		Section containing additional information, such as author and date. Use '<PreviewCard.AuthorDate author={...} date={...} />' here for author and date.
fullBleedContent	FullBleedContent.propTypes || {}	fullBleedImage	Full bleed content to be placed on the card.
fullBleedImage	FullBleedContent.propTypes || {}		Full bleed image to be placed on the card, deprecated in favor of 'fullBleedContent'. @deprecated
href	string		The URL of the story to be navigated to. Note that 'Video' component does not play well when used within a 'PreviewCard' with 'href' prop set (the volume and progress sliders can be clicked but are not draggable). Please use 'onPress' prop instead 'href' to organize navigation in cases like this. @see https://github.com/telus/allium-design-system/issues/6
onPress	func		Optional function to be called on press e.g. for within-page navigation.
tag	string		Text stating the category of the content.
title*	string		Text stating the title or headline of the story.

Variants

This component does not have any stylistic variants.

It is similar to StoryCard, which has a slightly different layout and includes a description field for summarising article content.

Author and date in footer

The footer prop may contain any content. Many times, this will be author and date, and so a component PreviewCard.AuthorDate is provided to facilitate this.

Loading...

<div style={{ maxWidth: '30rem', margin: '0 auto' }}> <PreviewCard href="https://telus.com" tag="Example category" title="An article with a headline" footer={<PreviewCard.AuthorDate author="Name Of Author" date="Dec 25, 2021" />} fullBleedContent={{ alt: 'Full Bleed Image Example', src: '/allium-design-system/img/pigs-allium-lo.png' }} /> </div>

<div style={{ maxWidth: '30rem', margin: '0 auto' }}>
  <PreviewCard
    href="https://telus.com"
    tag="Example category"
    title="An article with a headline"
    footer={<PreviewCard.AuthorDate author="Name Of Author" date="Dec 25, 2021" />}
    fullBleedContent={{
      alt: 'Full Bleed Image Example',
      src: '/allium-design-system/img/pigs-allium-lo.png'
    }}
  />
</div>

Groups of PreviewCard components

Multiple PreviewCard components may be laid out in a stacking component to give users a selection of articles.

This is an example of three PreviewCards in a responsive StackView that flips from horizontal to vertical based on viewport:

import { PreviewCard, StackView } from '@telus-uds/ds-allium'

Loading...

<StackView direction={{ xs: 'column', md: 'row' }} space={{ xs: 2, lg: 3 }}> <PreviewCard href="https://telus.com" tag="Example category" title="Short headline" footer={<PreviewCard.AuthorDate author="Name Of Author" date="Dec 25, 2021" />} fullBleedContent={{ alt: 'Full Bleed Image Example', src: '/allium-design-system/img/pigs-allium-lo.png' }} /> <PreviewCard href="https://telus.com" tag="Example category" title="An article with a somewhat longer headline" footer={<PreviewCard.AuthorDate author="Name Of Author" date="Dec 25, 2021" />} fullBleedContent={{ alt: 'Full Bleed Image Example', src: '/allium-design-system/img/pigs-allium-lo.png' }} /> <PreviewCard href="https://telus.com" tag="Example category" title="An article with a much longer headline that wraps over more lines, resulting in taller content" footer={<PreviewCard.AuthorDate author="Name Of Author" date="Dec 25, 2021" />} fullBleedContent={{ alt: 'Full Bleed Image Example', src: '/allium-design-system/img/pigs-allium-lo.png' }} /> </StackView>

<StackView direction={{ xs: 'column', md: 'row' }} space={{ xs: 2, lg: 3 }}>
  <PreviewCard
    href="https://telus.com"
    tag="Example category"
    title="Short headline"
    footer={<PreviewCard.AuthorDate author="Name Of Author" date="Dec 25, 2021" />}
    fullBleedContent={{
      alt: 'Full Bleed Image Example',
      src: '/allium-design-system/img/pigs-allium-lo.png'
    }}
  />
  <PreviewCard
    href="https://telus.com"
    tag="Example category"
    title="An article with a somewhat longer headline"
    footer={<PreviewCard.AuthorDate author="Name Of Author" date="Dec 25, 2021" />}
    fullBleedContent={{
      alt: 'Full Bleed Image Example',
      src: '/allium-design-system/img/pigs-allium-lo.png'
    }}
  />
  <PreviewCard
    href="https://telus.com"
    tag="Example category"
    title="An article with a much longer headline that wraps over more lines, resulting in taller content"
    footer={<PreviewCard.AuthorDate author="Name Of Author" date="Dec 25, 2021" />}
    fullBleedContent={{
      alt: 'Full Bleed Image Example',
      src: '/allium-design-system/img/pigs-allium-lo.png'
    }}
  />
</StackView>

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support