StoryCard

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' }}> <StoryCard href="https://telus.com" tag="Example category" date="Dec 25, 2021" title="An article with a headline" description="A description in which the content of the linked article is succinctly summarised." fullBleedContent={{ alt: 'Full Bleed Image Example', src: '/allium-design-system/img/pigs-allium-lo.png' }} /> </div>

<div style={{ maxWidth: '30rem', margin: '0 auto' }}>
  <StoryCard
    href="https://telus.com"
    tag="Example category"
    date="Dec 25, 2021"
    title="An article with a headline"
    description="A description in which the content of the linked article is succinctly summarised."
    fullBleedContent={{
      alt: 'Full Bleed Image Example',
      src: '/allium-design-system/img/pigs-allium-lo.png'
    }}
  />
</div>

Introduction

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

A StoryCard is a Card designed for guiding a user to an article based on the article's title and description.

Guidance

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

Loading...

<StoryCard href="https://telus.com" tag="Example category" date="Dec 25, 2021" title="An article with a headline" description="A description in which the content of the linked article is succinctly summarised." 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" /> ) }} />

<StoryCard
  href="https://telus.com"
  tag="Example category"
  date="Dec 25, 2021"
  title="An article with a headline"
  description="A description in which the content of the linked article is succinctly summarised."
  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
date*	string		Text stating the date a story was published.
description*	string		Text giving a short description of the story. One paragraph of plain text.
fullBleedContent	FullBleedContent.propTypes || {}	fullBleedImage	Full bleed image 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 'StoryCard' 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

StoryCard has no stylistic variants.

It is similar to PreviewCard, which has a slightly different layout and no article description.

Groups of StoryCard components

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

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

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

Loading...

<StackView direction={{ xs: 'column', md: 'row' }} space={{ xs: 2, lg: 3 }}> <StoryCard href="https://telus.com" tag="Example category" date="Dec 25, 2021" title="An article with a headline" description="A description in which the content of the linked article is succinctly summarised." fullBleedContent={{ alt: 'Full Bleed Image Example', src: '/allium-design-system/img/pigs-allium-lo.png' }} /> <StoryCard href="https://telus.com" tag="Example category" date="Dec 25, 2021" title="An article with a headline" description="A description in which the content of the linked article is succinctly summarised." fullBleedContent={{ alt: 'Full Bleed Image Example', src: '/allium-design-system/img/pigs-allium-lo.png' }} /> <StoryCard href="https://telus.com" tag="Example category" date="Dec 25, 2021" title="An article with a headline" description="A description in which the content of the linked article is succinctly summarised." 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 }}>
  <StoryCard
    href="https://telus.com"
    tag="Example category"
    date="Dec 25, 2021"
    title="An article with a headline"
    description="A description in which the content of the linked article is succinctly summarised."
    fullBleedContent={{
      alt: 'Full Bleed Image Example',
      src: '/allium-design-system/img/pigs-allium-lo.png'
    }}
  />
  <StoryCard
    href="https://telus.com"
    tag="Example category"
    date="Dec 25, 2021"
    title="An article with a headline"
    description="A description in which the content of the linked article is succinctly summarised."
    fullBleedContent={{
      alt: 'Full Bleed Image Example',
      src: '/allium-design-system/img/pigs-allium-lo.png'
    }}
  />
  <StoryCard
    href="https://telus.com"
    tag="Example category"
    date="Dec 25, 2021"
    title="An article with a headline"
    description="A description in which the content of the linked article is succinctly summarised."
    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