TopicList

Example

<TopicList className="s-grid u-grid-four-cols u-gap-xs" variant="card" topics={props.topicList} />
Image without description
  • opinion
  • test
  • demo
  • story

Testing AAA

This is a hero topic. Short abstract.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing BBB

This is a hero topic. All topics actions must align.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing CCC

This is a hero topic. All topics have different lengths.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing DDD

This is a hero topic. This is another topic.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing EEE

This is a hero topic. All topics have different lengths. All topics actions must align.

Test action

Example

<TopicList className="s-grid u-grid-three-cols u-gap-l" variant="block" topics={props.topicList} />
Image without description
  • opinion
  • test
  • demo
  • story

Testing AAA

This is a hero topic. Short abstract.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing BBB

This is a hero topic. All topics actions must align.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing CCC

This is a hero topic. All topics have different lengths.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing DDD

This is a hero topic. This is another topic.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing EEE

This is a hero topic. All topics have different lengths. All topics actions must align.

Test action

Example

<TopicList className="s-grid u-grid-two-cols u-gap-l" variant="quote" topics={props.topicList} />
Image without description
  • opinion
  • test
  • demo
  • story

Testing AAA

This is a hero topic. Short abstract.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing BBB

This is a hero topic. All topics actions must align.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing CCC

This is a hero topic. All topics have different lengths.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing DDD

This is a hero topic. This is another topic.

Test action
Image without description
  • opinion
  • test
  • demo
  • story

Testing EEE

This is a hero topic. All topics have different lengths. All topics actions must align.

Test action

Frontmatter

topicList:
  - heading: Testing AAA
    labels: [opinion, test, demo, story]
    abstract: This is a hero topic
    image: /green-lib/story-assets/images/kai-dahms-97yTozZh7N8-unsplash.jpg
    icon: archive
    action:
      heading: Test action
      icon: share
  - heading: Testing BBB
    labels: [opinion, test, demo, story]
    abstract: This is a hero topic
    image: /green-lib/story-assets/images/rianne-zuur-PoxFTU7_QKo-unsplash.jpg
    icon: archive
    action:
      heading: Test action
      icon: share
  - heading: Testing CCC
    labels: [opinion, test, demo, story]
    abstract: This is a hero topic
    image: /green-lib/story-assets/images/jean-philippe-delberghe-75xPHEQBmvA-unsplash.jpg
    icon: archive
    action:
      heading: Test action
      icon: share