AFP Inventor detail @afp-inventor-detail
A description list /w optional Kicker and Headline
Variants
Default @afp-inventor-detail
<div class="afp-inventor-detail afp-inventor-detail--default">
<div class="afp-inventor-detail__inner">
<div class="afp-inventor-detail__inner-content-wrapper">
<div class="afp-inventor-detail__inner-content">
<div class="afp-inventor-detail__kicker">Innovativ weil,</div>
<div class="afp-inventor-detail__headline">
<h3 class="headline headline--3">der Fuss beim tanzen nicht mehr so schmerzt!</h3>
</div>
<div class="afp-inventor-detail__description-wrapper">
<dl class="afp-inventor-detail__description-list">
<div class="afp-inventor-detail__description-item">
<dt class="afp-inventor-detail__description-term">Erfunden von</dt>
<dd class="afp-inventor-detail__description-details">Sophia Lindner</dd>
</div>
<div class="afp-inventor-detail__description-item">
<dt class="afp-inventor-detail__description-term">Kategorie</dt>
<dd class="afp-inventor-detail__description-details">Schüler</dd>
</div>
<div class="afp-inventor-detail__description-item">
<dt class="afp-inventor-detail__description-term">Platz</dt>
<dd class="afp-inventor-detail__description-details">2. Platz</dd>
</div>
<div class="afp-inventor-detail__description-item">
<dt class="afp-inventor-detail__description-term">Jahr</dt>
<dd class="afp-inventor-detail__description-details">2021</dd>
</div>
<div class="afp-inventor-detail__description-item">
<dt class="afp-inventor-detail__description-term">Themen</dt>
<dd class="afp-inventor-detail__description-details">#mode</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="afp-inventor-detail__buttons"><a class="button button--primary afp-inventor-detail__buttons-prev" href="#"><svg class="icon icon--arrow-left button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-left"></use>
</svg><span class="button__text">Zurück</span></a><a class="cta-link afp-inventor-detail__buttons-cta" href="#"><span class="cta-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="cta-link__text">Zurück zu den Innovationen</span></a><a class="button button--primary afp-inventor-detail__buttons-next" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg><span class="button__text">Weiter</span></a></div>
</div>
</div>{
"kicker": "Innovativ weil,",
"headline": {
"text": "der Fuss beim tanzen nicht mehr so schmerzt!",
"size": 3,
"level": 3
},
"desc": {
"items": [
{
"descTerm": "Erfunden von",
"descDetails": "Sophia Lindner"
},
{
"descTerm": "Kategorie",
"descDetails": "Schüler"
},
{
"descTerm": "Platz",
"descDetails": "2. Platz"
},
{
"descTerm": "Jahr",
"descDetails": 2021
},
{
"descTerm": "Themen",
"descDetails": "#mode"
}
]
},
"buttons": true
}
Overlay variant @afp-inventor-detail--overlay
<div class="afp-inventor-detail afp-inventor-detail--default afp-inventor-detail--overlay">
<div class="afp-inventor-detail__inner">
<div class="afp-inventor-detail__inner-content-wrapper">
<div class="afp-inventor-detail__inner-content">
<div class="afp-inventor-detail__description-wrapper">
<dl class="afp-inventor-detail__description-list">
<div class="afp-inventor-detail__description-item">
<dt class="afp-inventor-detail__description-term">Preis</dt>
<dd class="afp-inventor-detail__description-details">2ter Preis (2021)</dd>
</div>
<div class="afp-inventor-detail__description-item">
<dt class="afp-inventor-detail__description-term">Kategorie</dt>
<dd class="afp-inventor-detail__description-details">Schüler</dd>
</div>
<div class="afp-inventor-detail__description-item">
<dt class="afp-inventor-detail__description-term">Erfunden von</dt>
<dd class="afp-inventor-detail__description-details">Sophia Lindner</dd>
</div>
<div class="afp-inventor-detail__description-item">
<dt class="afp-inventor-detail__description-term">Themen</dt>
<dd class="afp-inventor-detail__description-details">#mode</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>{
"kicker": null,
"headline": null,
"desc": {
"items": [
{
"descTerm": "Preis",
"descDetails": "2ter Preis (2021)"
},
{
"descTerm": "Kategorie",
"descDetails": "Schüler"
},
{
"descTerm": "Erfunden von",
"descDetails": "Sophia Lindner"
},
{
"descTerm": "Themen",
"descDetails": "#mode"
}
]
},
"buttons": null,
"overlay": true,
"ctaLink": {
"text": "Zu allen Innovationen"
},
"buttonLeft": {
"context": {
"text": "Zur letzen Innovation"
}
},
"buttonRight": {
"text": "Zur nächsten Innovation"
}
}