Topic Headline

Example

<Topic topic={props.topic} variant="headline" />

• opinion
• test
• demo
• story

Headline example topic with a long heading for testing

This is an example of a balanced topic abstract text, spanning multiple lines, has a max width in characters and that is placed below the header.

Test action

Example

<Topic topic={props.topic} variant="headline" swapImage={true} />

• opinion
• test
• demo
• story

Headline example topic with a long heading for testing

This is an example of a balanced topic abstract text, spanning multiple lines, has a max width in characters and that is placed below the header.

Test action

Example

<Topic topic={{...props.topic}} variant="headline" />

• opinion
• test
• demo
• story

Headline example topic with a long heading for testing

This is an example of a balanced topic abstract text, spanning multiple lines, has a max width in characters and that is placed below the header.

Test action

Example

<div className="s-popout">
  <Topic topic={props.topic} variant="headline" />
</div>

• opinion
• test
• demo
• story

Headline example topic with a long heading for testing

This is an example of a balanced topic abstract text, spanning multiple lines, has a max width in characters and that is placed below the header.

Test action

Frontmatter

topic:
  heading: Headline example topic with a long heading for testing
  labels: [opinion, test, demo, story]
  abstract: This is an example of a balanced topic abstract text, spanning multiple lines, has a max width in characters and that is placed below the header.
  image: /green-lib/story-assets/images/pexels-skyler-ewing-4596712.jpg
  icon: archive
  action:
    heading: Test action
    icon: share