Related Topics

Used as related topics in articles.

This element is used to display related topics.

Code: 🔼

<section class="RelatedTopics_fd-related-topics__Hfl_A xs__mb+8">
  <h3 class="heading sans s xs__p+4 xs__m-0">Gerelateerde onderwerpen</h3>
  <ul class="xs__p+4">
    <li class="xs__mb+4"><a href="/tag/topic1"><span class="heading sans xs">Topic 1</span></a><button tag="Topic 1" class="ButtonFollow_fdFollowButton__sF_0C" data-tag="Topic 1" data-selected="false" data-addurl="/add-interest" data-deleteurl="/delete-interest"><span class="ButtonFollow_cross__Qza8_"></span> <span class="ButtonFollow_buttonText__86ck7 ButtonFollow_defaultText__rryd_">Volg</span><span class="ButtonFollow_buttonText__86ck7 ButtonFollow_activeText__cN2Dh">Ontvolg</span></button></li>
    <li class="xs__mb+4"><a href="/tag/topic2"><span class="heading sans xs">Topic 2</span></a><button tag="Topic 2" selected="" class="ButtonFollow_fdFollowButton__sF_0C" data-tag="Topic 2" data-selected="true" data-addurl="/add-interest" data-deleteurl="/delete-interest"><span class="ButtonFollow_cross__Qza8_"></span> <span class="ButtonFollow_buttonText__86ck7 ButtonFollow_defaultText__rryd_">Volg</span><span class="ButtonFollow_buttonText__86ck7 ButtonFollow_activeText__cN2Dh">Ontvolg</span></button></li>
    <li class="xs__mb+4"><a href="/tag/topic3"><span class="heading sans xs">Topic 3</span></a><button tag="Topic 3" class="ButtonFollow_fdFollowButton__sF_0C" data-tag="Topic 3" data-selected="false" data-addurl="/add-interest" data-deleteurl="/delete-interest"><span class="ButtonFollow_cross__Qza8_"></span> <span class="ButtonFollow_buttonText__86ck7 ButtonFollow_defaultText__rryd_">Volg</span><span class="ButtonFollow_buttonText__86ck7 ButtonFollow_activeText__cN2Dh">Ontvolg</span></button></li>
  </ul>
</section>

📋React

<RelatedTopics
  topics={[
    {
      href: '/tag/topic1',
      onClick: function k(){},
      selected: false,
      topic: 'Topic 1'
    },
    {
      href: '/tag/topic2',
      onClick: function k(){},
      selected: true,
      topic: 'Topic 2'
    },
    {
      href: '/tag/topic3',
      onClick: function k(){},
      selected: false,
      topic: 'Topic 3'
    }
  ]}
 />