6.0.34 • Public • Published

psammead-story-promo-list - Known Vulnerabilities Dependency Status peerDependencies Status Storybook GitHub license npm version PRs Welcome


The @bbc/psammead-story-promo-list package is a set of three components, StoryPromoUl, StoryPromoLi and StoryPromoLiBase. They use ul and li HTML elements respectively. The StoryPromoLi and StoryPromoLiBase components are both li elements and can be used interchangeably as they have similar props the only difference is that the StoryPromoLiBase ships with no padding presets thereby making it much more configurable to any set of padding/margin rules set on child elements.


npm install @bbc/psammead-story-promo-list


Argument Type Required Default Example
children node yes N/A <StoryPromoLi><StoryPromo image={Image} info={Info} /></StoryPromoLi>
border bool no true false


Commonly used alongside psammead-story-promo.

import React, { Fragment } from 'react';
import StoryPromo, { Headline, Summary } from '@bbc/psammead-story-promo';
import { StoryPromoLi, StoryPromoUl } from '@bbc/psammead-story-promo-list';
import { latin } from '@bbc/gel-foundations/scripts';

const Image = (
  <img src="https://foobar.com/image.jpg" />

const Info = (
    <Headline script={latin}>
      <Link href="https://www.bbc.co.uk/news">The headline of the promo</Link>
    <Summary script={latin}>The summary of the promo</Summary>
    <time>12 March 2019</time>


    <StoryPromo image={Image} info={Info} />;
    <StoryPromo image={Image} info={Info} />;

When to use this component

This component is designed to be used with story promos on 'index' pages.

Accessibility notes

We have added the role list and listitem to the corresponding list items due to a VoiceOver bug to reinstate the list semantics.

We haven't yet thoroughly looked at cross device browser AT testing yet, this is in-progress. We will update with a11y notes when carrying out a proper release.


Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead respository.

Code of Conduct

We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.


Psammead is Apache 2.0 licensed.


npm i @bbc/psammead-story-promo-list

DownloadsWeekly Downloads






Unpacked Size

65.7 kB

Total Files


Last publish


  • news-vj-bot
  • silver-jenkins
  • bbc-web-core
  • ibl-jenkins
  • iplayer-web-jenkins
  • sport-web-jenkins
  • bbcconnections
  • bbc-gnl-ci
  • bbc-morph
  • itv-ci-machine
  • audienceplatformdev
  • bbc-archivesearch-development-team
  • sounds-web-jenkins
  • rmsdev
  • bbc-voice-pipeline
  • weather-jenkins
  • newslabs-jenkins
  • api-management-jenkins
  • mdtbuild
  • bbc-online
  • cps-support
  • bbc-cd-jenkins
  • locator-deploy
  • bbc-isite
  • travel-jenkins
  • participation-jenkins
  • bbc-news-jenkins
  • bbcrd
  • ibl
  • iplayerradio-aws
  • media-playout-jenkins
  • partner-platform-jenkins
  • bbc-admin
  • gel-jenkins
  • pcs-amp-jenkins
  • education-jenkins
  • insyn-jenkins
  • kite-jenkins
  • bbcrd-artifactory
  • iplayer-pc-downloads-pipeline-bot