Sub menu
Home
Abonneren
Profiel menu
Abonneren
Inloggen
Service & Contact
Display options
System (device setting)
Light theme
Dark theme
Search
Close sub menu
Close sub menu
Related Topics
Used as related topics in articles.
This element is used to display related topics.
Gerelateerde onderwerpen
Topic 1
Volg
Ontvolg
Topic 2
Volg
Ontvolg
Topic 3
Volg
Ontvolg
Code: 🔼
📋
CSS
📋
HTML
<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' } ]} />