Story Cards allow content authors to display a story or other webpage from the same website within the standard story card layout. Use this component to promote content that lives inside the current website without recreating that content.
Component Information
Benefits
Story Cards are best suited for:
- Promoting a story from the same website on a different page.
- Linking to website story content within the context of another page on the same website.
- Card content is generated automatically based on the story’s Open Graph data.
Live Examples
- Demo: Grid Components
Component Options and Limitations
- The Story Card uses information made available by the story template data on the destination page to populate the card.
- Fields that are not completed in the story template data and open graph data, such as Read Time, will remain empty.
- Content authors should edit the respective data fields within a specific story or page to update the appearance of the story card. Keep in mind that any changes to the story will impact all story cards and external story cards that may be using the story as a data source.
Guidelines
- Before publishing, confirm the card displays the expected title, image, description and destination URL.
- Card information will display based on data pulled from the destination page.
- On desktop view, multiple Story Cards will appear in a row. Up to three stories appear per row.
- On mobile view, multiple Story Cards will stack.
- If an Open Graph field is incomplete, the data field will not display and will appear empty in Sitecore.
Similar Components:
Instructions for Use
In Page Builder:
- Select the page in the Content Tree.
- Click “+” button in any Placeholder box below the Breadcrumb links.
- Select Media Story Layout component from the list. It appears in the Containers section.
- Click “+” button in the Media Story Layout component.
- Click Story Card.
- Expand the content item list to locate the desired story page. Click to select the page and click Assign.
Alternate method:
- Click Components tab at top of the Content Tree.
- Locate the Media Story Layout component in the Containers section.
- Drag the Media Story Layout component to any empty placeholder area in the main area of the page below the Breadcrumb links.
- Click “+” button in the Media Story Layout component.
- Click Story Card.
- Expand the content item list to locate the desired story page. Click to select the page and click Assign.
To add additional Story Card components to the same Media Story Layout container:
- Click Components tab at top of the Content Tree.
- Locate the Story Card component in the Grid Components section.
- Drag the Story Card component to the Media Story Layout. A purple line will indicate where the component will be placed. Stories are stacked from left to right and top to bottom.
- Follow the steps above to select the story data source.
Users may place multiple Media Story Layout containers on the same page. Story Cards and External Story Cards may be combined within the same Media Story Layout container.