Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
Building up from molecules to organisms encourages creating standalone, portable, reusable components.
<div class="fp-bottom-modal">
<div class="fp-bottom-modal--header">
<i class="fp-icon fp-glyph-filter -s16"></i>Title
</div>
<div class="fp-bottom-modal--close">
<button class="fp-icon fp-glyph-close -color-shade-900 -s16 -pointer"></button>
</div>
<div class="fp-bottom-modal--content">Modal Content
</div>
</div>.fp-bottom-modal
.fp-bottom-modal--header
i.fp-icon.fp-glyph-filter.-s16
| Title
.fp-bottom-modal--close
button.fp-icon.fp-glyph-close.-color-shade-900.-s16.-pointer
.fp-bottom-modal--content Modal Content<div class="fp-card">Card content
</div>
<div class="fp-card -dark">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<span class="fp-text">Text
</span>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">Text
</span>
</div>
</div>
</div>
<div class="fp-card">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<h3 class="fp-title">Title
</h3>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-converter -secondary">
<div class="fp-converter-input">
<div class="fp-converter-input--ticker">EUR</div>
<input class="fp-converter-input--input" type="number" value="123"/>
<div class="fp-converter-input--icon">
<i class="fp-icon fp-glyph-euro -s18"></i>
</div>
</div>
<div class="fp-converter-input">
<div class="fp-converter-input--ticker">EUR</div>
<input class="fp-converter-input--input" type="number" value="123"/>
<div class="fp-converter-input--icon">
<i class="fp-icon fp-glyph-coin -s18"></i>
</div>
</div>
<div class="fp-converter--icon">
<i class="fp-icon fp-glyph-arrows-down-up -s18"></i>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text -color-shade-600">It's a long descriptive text
</span>
</div>
<div class="fp-vertical-spacing--line">
<input class="fp-input-text" placeholder="Code"/>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column"><img class="fp-illustration -kriptown-logo"/>
</div>
<div class="fp-horizontal-spacing--column"><img class="fp-illustration -mangopay-logo"/>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line -justify-center">
<button class="fp-button">Button label
</button>
</div>
</div>
</div>
<div class="fp-card -highlighted">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" id="first"/>
</div>
<div class="fp-checkable-element--label">
<label for="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label><a class="fp-link">Link</a>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" id="second"/>
</div>
<div class="fp-checkable-element--label">
<label for="second">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label><a class="fp-link">Link</a>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" id="third"/>
</div>
<div class="fp-checkable-element--label">
<label for="third">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label><a class="fp-link">Link</a>
</div>
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-checkable-element">
<div class="fp-checkable-element--checkbox">
<input class="fp-checkbox" type="checkbox" id="fourth"/>
</div>
<div class="fp-checkable-element--label">
<label for="fourth">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</label><a class="fp-link">Link</a>
</div>
</div>
</div>
</div>
</div>.fp-card Card content
.fp-card.-dark
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
span.fp-text Text
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold Text
.fp-card
.fp-vertical-spacing
.fp-vertical-spacing--line
h3.fp-title Title
.fp-vertical-spacing--line
.fp-converter.-secondary
.fp-converter-input
.fp-converter-input--ticker EUR
input.fp-converter-input--input(type="number" value="123")
.fp-converter-input--icon
i.fp-icon.fp-glyph-euro.-s18
.fp-converter-input
.fp-converter-input--ticker EUR
input.fp-converter-input--input(type="number" value="123")
.fp-converter-input--icon
i.fp-icon.fp-glyph-coin.-s18
.fp-converter--icon
i.fp-icon.fp-glyph-arrows-down-up.-s18
.fp-vertical-spacing--line
span.fp-text.-color-shade-600 It's a long descriptive text
.fp-vertical-spacing--line
input.fp-input-text(placeholder="Code")
.fp-vertical-spacing--line.-justify-center
.fp-horizontal-spacing
.fp-horizontal-spacing--column
img.fp-illustration.-kriptown-logo
.fp-horizontal-spacing--column
img.fp-illustration.-mangopay-logo
.fp-vertical-spacing--line.-justify-center
button.fp-button Button label
.fp-card.-highlighted
.fp-vertical-spacing
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input#first.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label(for="first")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
a.fp-link Link
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input#second.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label(for="second")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
a.fp-link Link
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input#third.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label(for="third")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
a.fp-link Link
.fp-vertical-spacing--line
.fp-checkable-element
.fp-checkable-element--checkbox
input#fourth.fp-checkbox(type="checkbox")
.fp-checkable-element--label
label(for="fourth")
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
a.fp-link Link<div class="fp-chat">
<div class="fp-chat--header">
<button class="fp-icon fp-glyph-arrow-left -color-shade-900 -s14 -pointer"></button>
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<span class="fp-text -color-shade-900 -text-semi-bold">John DOE
</span>
</div>
<div class="fp-chat--messages">
<div class="fp-chat--messages-notification">12 sept</div>
<div class="fp-horizontal-spacing -items-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<span class="fp-text -text-sm">Salut !
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing -items-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<span class="fp-text -text-sm">Qu'est-ce que tu fais ce week-end ? 😊
</span>
</div>
</div>
</div>
<div class="fp-chat--message-sent">
<div class="fp-card -dark">
<span class="fp-text -text-sm">Salut !
</span>
</div>
</div>
<div class="fp-chat--message-sent">
<div class="fp-card -dark">
<span class="fp-text -text-sm">Rien de prévu pour l'instant. Tu as une idée ? 😎
</span>
</div>
</div>
<div class="fp-chat--messages-notification">13 sept</div>
<div class="fp-horizontal-spacing -items-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<span class="fp-text -text-sm">Oui ! J'ai entendu parler d'un nouveau café en ville. On pourrait y aller samedi après-midi ?
</span>
</div>
</div>
</div>
<div class="fp-chat--message-sent">
<div class="fp-card -dark">
<span class="fp-text -text-sm">Super idée ! J'adore découvrir de nouveaux endroits. À quelle heure ?
</span>
</div>
</div>
<div class="fp-horizontal-spacing -items-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-card">
<span class="fp-text -text-sm">Disons 15h ? Comme ça, on peut aussi se balader un peu après.
</span>
</div>
</div>
</div>
</div>
<div class="fp-chat--input">
<div class="fp-icons-input">
<div class="fp-icons-input--right-icon">
<button class="fp-icon fp-glyph-send -s16 -pointer"></button>
</div>
<input class="fp-input-text" id="icons-input-mixin" placeholder="Écrivez votre message ..."/>
</div>
</div>
</div>.fp-chat
.fp-chat--header
button.fp-icon.fp-glyph-arrow-left.-color-shade-900.-s14.-pointer
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
span.fp-text.-color-shade-900.-text-semi-bold John DOE
.fp-chat--messages
.fp-chat--messages-notification 12 sept
.fp-horizontal-spacing.-items-end.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column
.fp-card
span.fp-text.-text-sm Salut !
.fp-horizontal-spacing.-items-end.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column
.fp-card
span.fp-text.-text-sm Qu'est-ce que tu fais ce week-end ? 😊
.fp-chat--message-sent
.fp-card.-dark
span.fp-text.-text-sm Salut !
.fp-chat--message-sent
.fp-card.-dark
span.fp-text.-text-sm Rien de prévu pour l'instant. Tu as une idée ? 😎
.fp-chat--messages-notification 13 sept
.fp-horizontal-spacing.-items-end.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column
.fp-card
span.fp-text.-text-sm Oui ! J'ai entendu parler d'un nouveau café en ville. On pourrait y aller samedi après-midi ?
.fp-chat--message-sent
.fp-card.-dark
span.fp-text.-text-sm Super idée ! J'adore découvrir de nouveaux endroits. À quelle heure ?
.fp-horizontal-spacing.-items-end.-s-sm
.fp-horizontal-spacing--column
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-horizontal-spacing--column
.fp-card
span.fp-text.-text-sm Disons 15h ? Comme ça, on peut aussi se balader un peu après.
.fp-chat--input
.fp-icons-input
.fp-icons-input--right-icon
button.fp-icon.fp-glyph-send.-s16.-pointer
input#icons-input-mixin.fp-input-text(placeholder="Écrivez votre message ...")<div class="fp-display">
<div class="fp-display--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--thumbnails"><img class="fp-display--thumbnail-image -active" src="https://files.fairplayer.co/exclusive.jpg"/><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
<div class="fp-display--thumbnail-video">
<div class="fp-video -expand ">
<video>
<source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
</video>
<div class="fp-video--trigger">
<i class="fp-icon fp-glyph-play -color-shade-900 -s16"></i>
</div>
</div>
</div><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--left-action">
<i class="fp-icon fp-glyph-arrow-left -s16"></i>
</div>
<div class="fp-display--right-action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</div>
<div class="fp-display -wide">
<div class="fp-display--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--left-action">
<i class="fp-icon fp-glyph-arrow-left -s16"></i>
</div>
<div class="fp-display--right-action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</div>
<div class="fp-display">
<div class="fp-display--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
<div class="fp-display--image-mask">
<span class="fp-badge">Badge
</span>
</div>
</div>
</div>
<div class="fp-display">
<div class="fp-display--image">
<video controls="controls">
<source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
</video>
</div>
<div class="fp-display--thumbnails"><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
<div class="fp-display--thumbnail-video -active">
<div class="fp-video -expand ">
<video>
<source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
</video>
<div class="fp-video--trigger">
<i class="fp-icon fp-glyph-play -color-shade-900 -s16"></i>
</div>
</div>
</div><img class="fp-display--thumbnail-image" src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
</div>.fp-display
.fp-display--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--thumbnails
img.fp-display--thumbnail-image.-active(src="https://files.fairplayer.co/exclusive.jpg")
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--thumbnail-video
.fp-video.-expand
video
source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-video--trigger
i.fp-icon.fp-glyph-play.-color-shade-900.-s16
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--left-action
i.fp-icon.fp-glyph-arrow-left.-s16
.fp-display--right-action
i.fp-icon.fp-glyph-widen.-s16
.fp-display.-wide
.fp-display--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--left-action
i.fp-icon.fp-glyph-arrow-left.-s16
.fp-display--right-action
i.fp-icon.fp-glyph-widen.-s16
.fp-display
.fp-display--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--image-mask
span.fp-badge Badge
.fp-display
.fp-display--image
video(controls="controls")
source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-display--thumbnails
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--thumbnail-video.-active
.fp-video.-expand
video
source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-video--trigger
i.fp-icon.fp-glyph-play.-color-shade-900.-s16
img.fp-display--thumbnail-image(src="https://files.fairplayer.co/exclusive.jpg")<div class="fp-dropdown">
<input id="dropdown" type="checkbox" name="dropdown"/>
<label class="fp-dropdown--trigger" for="dropdown">
<i class="fp-icon fp-glyph-dots-vertical"></i>
</label>
<div class="fp-dropdown--menu">
<div class="fp-dropdown-item">
<i class="fp-icon fp-glyph-edit -s12"></i>
<div class="fp-dropdown-item--text">Éditer</div>
</div>
<div class="fp-dropdown-item">
<i class="fp-icon fp-glyph-copy -s12"></i>
<div class="fp-dropdown-item--text">Cloner</div>
</div>
<div class="fp-separator -secondary">
</div>
<div class="fp-dropdown-item -danger">
<i class="fp-icon fp-glyph-trash -s12"></i>
<div class="fp-dropdown-item--text">Supprimer</div>
</div>
</div>
</div>.fp-dropdown
input#dropdown(type="checkbox" name="dropdown")
label.fp-dropdown--trigger(for="dropdown")
i.fp-icon.fp-glyph-dots-vertical
.fp-dropdown--menu
.fp-dropdown-item
i.fp-icon.fp-glyph-edit.-s12
.fp-dropdown-item--text Éditer
.fp-dropdown-item
i.fp-icon.fp-glyph-copy.-s12
.fp-dropdown-item--text Cloner
.fp-separator.-secondary
.fp-dropdown-item.-danger
i.fp-icon.fp-glyph-trash.-s12
.fp-dropdown-item--text Supprimer<img class="fp-highlighted-media" src="https://files.fairplayer.co/exclusive.jpg"/>img.fp-highlighted-media(src="https://files.fairplayer.co/exclusive.jpg")<div class="fp-horizontal-menu"><a class="fp-horizontal-menu-item -active">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-wallet -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Wallet</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-shopping-bag -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Shop</span></a><a class="fp-horizontal-menu-item">
<div class="fp-horizontal-menu-item--icon">
<i class="fp-icon fp-glyph-user -color-shade-400 -s24"></i>
</div><span class="fp-horizontal-menu-item--text">Profile</span></a>
</div>.fp-horizontal-menu
a.fp-horizontal-menu-item.-active
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-wallet.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Wallet
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-shopping-bag.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Shop
a.fp-horizontal-menu-item
.fp-horizontal-menu-item--icon
i.fp-icon.fp-glyph-user.-color-shade-400.-s24
span.fp-horizontal-menu-item--text Profile<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">First
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">Second
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">Third
</div>
</div>
</div>
<div class="fp-horizontal-spacing -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">First
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">Second
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">Third
</div>
</div>
</div>
<div class="fp-horizontal-spacing -equivalent">
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">First
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">Second
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">Third
</div>
</div>
</div>
<div class="fp-horizontal-spacing -justify-space-evenly">
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">First
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">Second
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">Third
</div>
</div>
</div>
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<div class="tikui-column">First
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">Second
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="tikui-column">Third
</div>
</div>
</div>.fp-horizontal-spacing
.fp-horizontal-spacing--column
.tikui-column First
.fp-horizontal-spacing--column
.tikui-column Second
.fp-horizontal-spacing--column
.tikui-column Third
.fp-horizontal-spacing.-s-sm
.fp-horizontal-spacing--column
.tikui-column First
.fp-horizontal-spacing--column
.tikui-column Second
.fp-horizontal-spacing--column
.tikui-column Third
.fp-horizontal-spacing.-equivalent
.fp-horizontal-spacing--column
.tikui-column First
.fp-horizontal-spacing--column
.tikui-column Second
.fp-horizontal-spacing--column
.tikui-column Third
.fp-horizontal-spacing.-justify-space-evenly
.fp-horizontal-spacing--column
.tikui-column First
.fp-horizontal-spacing--column
.tikui-column Second
.fp-horizontal-spacing--column
.tikui-column Third
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
.tikui-column First
.fp-horizontal-spacing--column
.tikui-column Second
.fp-horizontal-spacing--column
.tikui-column Third<div class="fp-interlocutors">
<div class="fp-interlocutors--header">
<h2 class="fp-title">Conversations
</h2>
</div>
<div class="fp-interlocutors--list"><a class="fp-interlocutor" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
<div class="fp-interlocutor--unread">
<div class="fp-chip">1
</div>
</div></a><a class="fp-interlocutor -active" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div></a><a class="fp-interlocutor" href="/">
<div class="fp-interlocutor--picture">
<div class="fp-image -circled "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
<div class="fp-interlocutor--summary">
<span class="fp-text -color-shade-700 -text-semi-bold">John DOE
</span>
<div class="fp-text -color-shade-500 -lines-1 -text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
<div class="fp-interlocutor--unread">
<div class="fp-chip">1
</div>
</div></a>
</div>
<div class="fp-interlocutors--empty">
<span class="fp-text -text-semi-bold">Démarrez une nouvelle conversation !
</span>
<span class="fp-text">Une fois que vous aurez envoyé des messages, vos conversations apparaîtront ici.
</span>
</div>
</div>.fp-interlocutors
.fp-interlocutors--header
h2.fp-title Conversations
.fp-interlocutors--list
a.fp-interlocutor(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.fp-interlocutor--unread
.fp-chip 1
a.fp-interlocutor.-active(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
a.fp-interlocutor(href="/")
.fp-interlocutor--picture
.fp-image.-circled
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-interlocutor--summary
span.fp-text.-color-shade-700.-text-semi-bold John DOE
.fp-text.-color-shade-500.-lines-1.-text-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.fp-interlocutor--unread
.fp-chip 1
.fp-interlocutors--empty
span.fp-text.-text-semi-bold Démarrez une nouvelle conversation !
span.fp-text Une fois que vous aurez envoyé des messages, vos conversations apparaîtront ici.<div class="fp-modal">
<div class="fp-modal--content">Modal content</div>
</div>.fp-modal
.fp-modal--content Modal content<div class="fp-post">
<div class="fp-post--content">
<div class="fp-display -wide">
<div class="fp-display--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-display--left-action">
<i class="fp-icon fp-glyph-arrow-left -s16"></i>
</div>
<div class="fp-display--right-action">
<i class="fp-icon fp-glyph-widen -s16"></i>
</div>
</div>
<span class="fp-text -color-shade-500">28 juin 2024
</span>
<h1 class="fp-title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</h1>
<span class="fp-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
</span>
<span class="fp-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
</span>
<span class="fp-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
</span>
</div>
<aside>
<div class="fp-post--medias">
<div class="fp-image -wide -rounded "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-video -wide">
<video>
<source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
</video>
<div class="fp-video--trigger">
<i class="fp-icon fp-glyph-play -color-shade-900 -s16"></i>
</div>
</div>
<div class="fp-image -wide -rounded "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-image -wide -rounded "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
</div>
</aside>
</div>.fp-post
.fp-post--content
.fp-display.-wide
.fp-display--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-display--left-action
i.fp-icon.fp-glyph-arrow-left.-s16
.fp-display--right-action
i.fp-icon.fp-glyph-widen.-s16
span.fp-text.-color-shade-500 28 juin 2024
h1.fp-title Lorem ipsum dolor sit amet, consectetuer adipiscing elit
span.fp-text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
span.fp-text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
span.fp-text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
aside
.fp-post--medias
.fp-image.-wide.-rounded
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-video.-wide
video
source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-video--trigger
i.fp-icon.fp-glyph-play.-color-shade-900.-s16
.fp-image.-wide.-rounded
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-image.-wide.-rounded
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
<div class="fp-presentation-card--image-badge">
<i class="fp-icon fp-glyph-clock"></i>
<div class="fp-presentation-card--image-badge-text">
<span class="fp-text -text-xs">Début dans
</span>
<span class="fp-text -text-sm -text-semi-bold">14j 23h 45mn 11s
</span>
</div>
</div>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
<div class="fp-presentation-card--image-badge">
<div class="fp-dot"></div>
<div class="fp-presentation-card--image-badge-text">
<span class="fp-text -text-xs">Temps restant
</span>
<span class="fp-text -text-sm -text-semi-bold">14j 23h 45mn 11s
</span>
</div>
</div>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
<div class="fp-presentation-card--image-badge">
<div class="fp-image -circled -sm"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-presentation-card--image-badge-text">
<span class="fp-text -text-xs">Remporté par
</span>
<span class="fp-text -text-sm -text-semi-bold">John DOE
</span>
</div>
</div>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
<div class="fp-presentation-card--mask">
<span class="fp-badge">Badge
</span>
</div>
</div>.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--image-badge
i.fp-icon.fp-glyph-clock
.fp-presentation-card--image-badge-text
span.fp-text.-text-xs Début dans
span.fp-text.-text-sm.-text-semi-bold 14j 23h 45mn 11s
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--image-badge
.fp-dot
.fp-presentation-card--image-badge-text
span.fp-text.-text-xs Temps restant
span.fp-text.-text-sm.-text-semi-bold 14j 23h 45mn 11s
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--image-badge
.fp-image.-circled.-sm
img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-presentation-card--image-badge-text
span.fp-text.-text-xs Remporté par
span.fp-text.-text-sm.-text-semi-bold John DOE
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-presentation-card--mask
span.fp-badge Badge<div class="fp-responsive-grid -cols3 -s-sm">
<div class="fp-responsive-grid--column">
<div class="tikui-column">1
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="tikui-column">2
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="tikui-column">3
</div>
</div>
</div>
<div class="fp-responsive-grid -cols3">
<div class="fp-responsive-grid--column">
<div class="tikui-column">1
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="tikui-column">2
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="tikui-column">3
</div>
</div>
</div>
<div class="fp-responsive-grid -cols3 -s-lg">
<div class="fp-responsive-grid--column">
<div class="tikui-column">1
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="tikui-column">2
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="tikui-column">3
</div>
</div>
</div>
<div class="fp-responsive-grid -cols3 -cols1-up-md -s-lg">
<div class="fp-responsive-grid--column">
<div class="tikui-column">1
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="tikui-column">2
</div>
</div>
<div class="fp-responsive-grid--column">
<div class="tikui-column">3
</div>
</div>
</div>.fp-responsive-grid.-cols3.-s-sm
.fp-responsive-grid--column
.tikui-column 1
.fp-responsive-grid--column
.tikui-column 2
.fp-responsive-grid--column
.tikui-column 3
.fp-responsive-grid.-cols3
.fp-responsive-grid--column
.tikui-column 1
.fp-responsive-grid--column
.tikui-column 2
.fp-responsive-grid--column
.tikui-column 3
.fp-responsive-grid.-cols3.-s-lg
.fp-responsive-grid--column
.tikui-column 1
.fp-responsive-grid--column
.tikui-column 2
.fp-responsive-grid--column
.tikui-column 3
.fp-responsive-grid.-cols3.-cols1-up-md.-s-lg
.fp-responsive-grid--column
.tikui-column 1
.fp-responsive-grid--column
.tikui-column 2
.fp-responsive-grid--column
.tikui-column 3<div class="fp-slider">
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image -active">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fp-slider--image">
<div class="fp-presentation-card">
<div class="fp-presentation-card--image"><img src="https://files.fairplayer.co/exclusive.jpg"/>
</div>
<div class="fp-presentation-card--title">Presentation card title
</div>
<div class="fp-presentation-card--line">
<div class="fp-icon-with-text">
<i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
<div class="fp-icon-with-text--text">
<div class="fp-icon-with-text--text-line">
<span class="fp-text -color-shade-900 -no-wrap -text-md -text-semi-bold">9000 TKN
</span>
<span class="fp-text -color-shade-500"> /
</span>
<span class="fp-text -color-shade-500 -no-wrap"> 120 €
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>.fp-slider
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image.-active
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-slider--image
.fp-presentation-card
.fp-presentation-card--image
img(src="https://files.fairplayer.co/exclusive.jpg")
.fp-presentation-card--title Presentation card title
.fp-presentation-card--line
.fp-icon-with-text
i.fp-icon.fp-glyph-coin.-color-shade-900.-s18
.fp-icon-with-text--text
.fp-icon-with-text--text-line
span.fp-text.-color-shade-900.-no-wrap.-text-md.-text-semi-bold 9000 TKN
span.fp-text.-color-shade-500 /
span.fp-text.-color-shade-500.-no-wrap 120 €<div class="fp-sticky-pane">
<div class="fp-sticky-pane--content">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Content
</h1>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
<div class="fp-vertical-spacing--line">
<span class="fp-text">Text
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<aside class="fp-sticky-pane--aside">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<h1 class="fp-title">Aside
</h1>
</div>
<div class="fp-vertical-spacing--line">
<div class="fp-card">Card content
</div>
</div>
</div>
</aside>
</div>.fp-sticky-pane
.fp-sticky-pane--content
.fp-vertical-spacing
.fp-vertical-spacing--line
h1.fp-title Content
.fp-vertical-spacing--line
.fp-card
.fp-vertical-spacing
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
span.fp-text Text
.fp-vertical-spacing--line
span.fp-text Text
aside.fp-sticky-pane--aside
.fp-vertical-spacing
.fp-vertical-spacing--line
h1.fp-title Aside
.fp-vertical-spacing--line
.fp-card Card content<div class="fp-titled-card">
<div class="fp-titled-card--title">
<div class="fp-titled-card--title-main">06 Oct 2022</div>
<div class="fp-titled-card--title-info">Info</div>
</div>
<div class="fp-card -dark">
<div class="fp-horizontal-spacing">
<div class="fp-horizontal-spacing--column -expand">
<span class="fp-text">Text
</span>
</div>
<div class="fp-horizontal-spacing--column">
<span class="fp-text -text-semi-bold">Text
</span>
</div>
</div>
</div>
</div>.fp-titled-card
.fp-titled-card--title
.fp-titled-card--title-main 06 Oct 2022
.fp-titled-card--title-info Info
.fp-card.-dark
.fp-horizontal-spacing
.fp-horizontal-spacing--column.-expand
span.fp-text Text
.fp-horizontal-spacing--column
span.fp-text.-text-semi-bold Text<div class="fp-top-menu"><a class="fp-top-menu-item -active">Accueil</a><a class="fp-top-menu-item">Portefeuille</a><a class="fp-top-menu-item">Boutique</a><a class="fp-top-menu-item">
<i class="fp-icon fp-glyph-user -s24"></i></a>
</div>.fp-top-menu
a.fp-top-menu-item.-active Accueil
a.fp-top-menu-item Portefeuille
a.fp-top-menu-item Boutique
a.fp-top-menu-item
i.fp-icon.fp-glyph-user.-s24<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line">
<div class="tikui-column">Line 1
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="tikui-column">Line 2
</div>
</div>
<div class="fp-vertical-spacing--line">
<div class="tikui-column">Line 3
</div>
</div>
</div>.fp-vertical-spacing
.fp-vertical-spacing--line
.tikui-column Line 1
.fp-vertical-spacing--line
.tikui-column Line 2
.fp-vertical-spacing--line
.tikui-column Line 3<table class="fp-table">
<thead>
<tr>
<th>First column title</th>
<th>Second column title</th>
<th>Third column title</th>
<th class="-shrink"></th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="fp-tag -info">INFO</span>
</td>
<td>Second cell</td>
<td>Third cell</td>
<td>
<div class="fp-dropdown">
<input id="dropdown" type="checkbox" name="dropdown"/>
<label class="fp-dropdown--trigger" for="dropdown">
<i class="fp-icon fp-glyph-dots-vertical"></i>
</label>
<div class="fp-dropdown--menu">
<div class="fp-dropdown-item">
<i class="fp-icon fp-glyph-edit -s12"></i>
<div class="fp-dropdown-item--text">Éditer</div>
</div>
<div class="fp-dropdown-item">
<i class="fp-icon fp-glyph-copy -s12"></i>
<div class="fp-dropdown-item--text">Cloner</div>
</div>
<div class="fp-separator -secondary">
</div>
<div class="fp-dropdown-item -danger">
<i class="fp-icon fp-glyph-trash -s12"></i>
<div class="fp-dropdown-item--text">Supprimer</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td><span class="fp-tag -danger">DANGER</span>
</td>
<td>Second cell</td>
<td>Third cell</td>
<td>
<div class="fp-dropdown">
<input id="dropdown" type="checkbox" name="dropdown"/>
<label class="fp-dropdown--trigger" for="dropdown">
<i class="fp-icon fp-glyph-dots-vertical"></i>
</label>
<div class="fp-dropdown--menu">
<div class="fp-dropdown-item">
<i class="fp-icon fp-glyph-edit -s12"></i>
<div class="fp-dropdown-item--text">Éditer</div>
</div>
<div class="fp-dropdown-item">
<i class="fp-icon fp-glyph-copy -s12"></i>
<div class="fp-dropdown-item--text">Cloner</div>
</div>
<div class="fp-separator -secondary">
</div>
<div class="fp-dropdown-item -danger">
<i class="fp-icon fp-glyph-trash -s12"></i>
<div class="fp-dropdown-item--text">Supprimer</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table class="fp-table">
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Email</th>
<th>Bonne réponse</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="fp-table--expanded-line-trigger" for="expandable-table-0"></label>
<i class="fp-icon fp-glyph-chevron-down -color-shade-500 -s12"></i>
</td>
<td>27/02/2024 09:56:51</td>
<td>mail@fairplayer.co</td>
<td>4</td>
<td>
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">40 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">20€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">+
</div>
<div class="fp-horizontal-spacing--column">
<input class="fp-input-text" value="20"/>
</div>
<div class="fp-horizontal-spacing--column">=
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">20 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">10€
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="fp-table--expanded-line">
<td></td>
<td colspan="4">
<input class="fp-table--expanded-line-checkbox" type="checkbox" name="expandable-table" id="expandable-table-0"/>
<div class="fp-table--expanded-line-content">
<span class="fp-text -color-shade-700">Expandable line content
</span>
</div>
</td>
</tr>
<tr>
<td>
<label class="fp-table--expanded-line-trigger" for="expandable-table-1"></label>
<i class="fp-icon fp-glyph-chevron-down -color-shade-500 -s12"></i>
</td>
<td>27/02/2024 09:56:51</td>
<td>mail@fairplayer.co</td>
<td>4</td>
<td>
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">40 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">20€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">+
</div>
<div class="fp-horizontal-spacing--column">
<input class="fp-input-text" value="20"/>
</div>
<div class="fp-horizontal-spacing--column">=
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">20 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">10€
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="fp-table--expanded-line">
<td></td>
<td colspan="4">
<input class="fp-table--expanded-line-checkbox" type="checkbox" name="expandable-table" id="expandable-table-1"/>
<div class="fp-table--expanded-line-content">
<span class="fp-text -color-shade-700">Expandable line content
</span>
</div>
</td>
</tr>
<tr>
<td>
<label class="fp-table--expanded-line-trigger" for="expandable-table-2"></label>
<i class="fp-icon fp-glyph-chevron-down -color-shade-500 -s12"></i>
</td>
<td>27/02/2024 09:56:51</td>
<td>mail@fairplayer.co</td>
<td>4</td>
<td>
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">40 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">20€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">+
</div>
<div class="fp-horizontal-spacing--column">
<input class="fp-input-text" value="20"/>
</div>
<div class="fp-horizontal-spacing--column">=
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">20 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">10€
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="fp-table--expanded-line">
<td></td>
<td colspan="4">
<input class="fp-table--expanded-line-checkbox" type="checkbox" name="expandable-table" id="expandable-table-2"/>
<div class="fp-table--expanded-line-content">
<span class="fp-text -color-shade-700">Expandable line content
</span>
</div>
</td>
</tr>
<tr>
<td>
<label class="fp-table--expanded-line-trigger" for="expandable-table-3"></label>
<i class="fp-icon fp-glyph-chevron-down -color-shade-500 -s12"></i>
</td>
<td>27/02/2024 09:56:51</td>
<td>mail@fairplayer.co</td>
<td>4</td>
<td>
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">40 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">20€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">+
</div>
<div class="fp-horizontal-spacing--column">
<input class="fp-input-text" value="20"/>
</div>
<div class="fp-horizontal-spacing--column">=
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">20 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">10€
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="fp-table--expanded-line">
<td></td>
<td colspan="4">
<input class="fp-table--expanded-line-checkbox" type="checkbox" name="expandable-table" id="expandable-table-3"/>
<div class="fp-table--expanded-line-content">
<span class="fp-text -color-shade-700">Expandable line content
</span>
</div>
</td>
</tr>
<tr>
<td>
<label class="fp-table--expanded-line-trigger" for="expandable-table-4"></label>
<i class="fp-icon fp-glyph-chevron-down -color-shade-500 -s12"></i>
</td>
<td>27/02/2024 09:56:51</td>
<td>mail@fairplayer.co</td>
<td>4</td>
<td>
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">40 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">20€
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">+
</div>
<div class="fp-horizontal-spacing--column">
<input class="fp-input-text" value="20"/>
</div>
<div class="fp-horizontal-spacing--column">=
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing -s-none">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">20 TKN
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm">10€
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="fp-table--expanded-line">
<td></td>
<td colspan="4">
<input class="fp-table--expanded-line-checkbox" type="checkbox" name="expandable-table" id="expandable-table-4"/>
<div class="fp-table--expanded-line-content">
<span class="fp-text -color-shade-700">Expandable line content
</span>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">
<div class="fp-horizontal-spacing -items-center -justify-end -s-sm">
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm -text-regular">Jetons distribués via bonnes réponses :
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm -text-regular">Jetons distribués via bonus :
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-sm -text-semi-bold">Total :
</span>
</div>
</div>
</div>
<div class="fp-horizontal-spacing--column">
<div class="fp-vertical-spacing">
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">200 TKN
</span>
<span class="fp-text -text-sm -text-regular"> / 100€
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">100 TKN
</span>
<span class="fp-text -text-sm -text-regular"> / 50€
</span>
</div>
<div class="fp-vertical-spacing--line -align-right">
<span class="fp-text -text-semi-bold">300 TKN
</span>
<span class="fp-text -text-sm -text-regular"> / 150€
</span>
</div>
</div>
</div>
</div>
</th>
</tr>
</tfoot>
</table>table.fp-table
thead
tr
th First column title
th Second column title
th Third column title
th.-shrink
tbody
tr
td
span.fp-tag.-info INFO
td Second cell
td Third cell
td
.fp-dropdown
input#dropdown(type="checkbox" name="dropdown")
label.fp-dropdown--trigger(for="dropdown")
i.fp-icon.fp-glyph-dots-vertical
.fp-dropdown--menu
.fp-dropdown-item
i.fp-icon.fp-glyph-edit.-s12
.fp-dropdown-item--text Éditer
.fp-dropdown-item
i.fp-icon.fp-glyph-copy.-s12
.fp-dropdown-item--text Cloner
.fp-separator.-secondary
.fp-dropdown-item.-danger
i.fp-icon.fp-glyph-trash.-s12
.fp-dropdown-item--text Supprimer
tr
td
span.fp-tag.-danger DANGER
td Second cell
td Third cell
td
.fp-dropdown
input#dropdown(type="checkbox" name="dropdown")
label.fp-dropdown--trigger(for="dropdown")
i.fp-icon.fp-glyph-dots-vertical
.fp-dropdown--menu
.fp-dropdown-item
i.fp-icon.fp-glyph-edit.-s12
.fp-dropdown-item--text Éditer
.fp-dropdown-item
i.fp-icon.fp-glyph-copy.-s12
.fp-dropdown-item--text Cloner
.fp-separator.-secondary
.fp-dropdown-item.-danger
i.fp-icon.fp-glyph-trash.-s12
.fp-dropdown-item--text Supprimer
table.fp-table
thead
tr
th
th Date
th Email
th Bonne réponse
th
tbody
tr
td
label.fp-table--expanded-line-trigger(for="expandable-table-0")
i.fp-icon.fp-glyph-chevron-down.-color-shade-500.-s12
td 27/02/2024 09:56:51
td mail@fairplayer.co
td 4
td
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 40 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 20€
.fp-horizontal-spacing--column +
.fp-horizontal-spacing--column
input.fp-input-text(value="20")
.fp-horizontal-spacing--column =
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 20 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 10€
tr.fp-table--expanded-line
td
td(colspan="4")
input#expandable-table-0.fp-table--expanded-line-checkbox(type="checkbox" name="expandable-table")
.fp-table--expanded-line-content
span.fp-text.-color-shade-700 Expandable line content
tr
td
label.fp-table--expanded-line-trigger(for="expandable-table-1")
i.fp-icon.fp-glyph-chevron-down.-color-shade-500.-s12
td 27/02/2024 09:56:51
td mail@fairplayer.co
td 4
td
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 40 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 20€
.fp-horizontal-spacing--column +
.fp-horizontal-spacing--column
input.fp-input-text(value="20")
.fp-horizontal-spacing--column =
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 20 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 10€
tr.fp-table--expanded-line
td
td(colspan="4")
input#expandable-table-1.fp-table--expanded-line-checkbox(type="checkbox" name="expandable-table")
.fp-table--expanded-line-content
span.fp-text.-color-shade-700 Expandable line content
tr
td
label.fp-table--expanded-line-trigger(for="expandable-table-2")
i.fp-icon.fp-glyph-chevron-down.-color-shade-500.-s12
td 27/02/2024 09:56:51
td mail@fairplayer.co
td 4
td
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 40 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 20€
.fp-horizontal-spacing--column +
.fp-horizontal-spacing--column
input.fp-input-text(value="20")
.fp-horizontal-spacing--column =
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 20 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 10€
tr.fp-table--expanded-line
td
td(colspan="4")
input#expandable-table-2.fp-table--expanded-line-checkbox(type="checkbox" name="expandable-table")
.fp-table--expanded-line-content
span.fp-text.-color-shade-700 Expandable line content
tr
td
label.fp-table--expanded-line-trigger(for="expandable-table-3")
i.fp-icon.fp-glyph-chevron-down.-color-shade-500.-s12
td 27/02/2024 09:56:51
td mail@fairplayer.co
td 4
td
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 40 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 20€
.fp-horizontal-spacing--column +
.fp-horizontal-spacing--column
input.fp-input-text(value="20")
.fp-horizontal-spacing--column =
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 20 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 10€
tr.fp-table--expanded-line
td
td(colspan="4")
input#expandable-table-3.fp-table--expanded-line-checkbox(type="checkbox" name="expandable-table")
.fp-table--expanded-line-content
span.fp-text.-color-shade-700 Expandable line content
tr
td
label.fp-table--expanded-line-trigger(for="expandable-table-4")
i.fp-icon.fp-glyph-chevron-down.-color-shade-500.-s12
td 27/02/2024 09:56:51
td mail@fairplayer.co
td 4
td
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 40 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 20€
.fp-horizontal-spacing--column +
.fp-horizontal-spacing--column
input.fp-input-text(value="20")
.fp-horizontal-spacing--column =
.fp-horizontal-spacing--column
.fp-vertical-spacing.-s-none
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 20 TKN
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm 10€
tr.fp-table--expanded-line
td
td(colspan="4")
input#expandable-table-4.fp-table--expanded-line-checkbox(type="checkbox" name="expandable-table")
.fp-table--expanded-line-content
span.fp-text.-color-shade-700 Expandable line content
tfoot
tr
th(colspan="5")
.fp-horizontal-spacing.-items-center.-justify-end.-s-sm
.fp-horizontal-spacing--column
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm.-text-regular Jetons distribués via bonnes réponses :
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm.-text-regular Jetons distribués via bonus :
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-sm.-text-semi-bold Total :
.fp-horizontal-spacing--column
.fp-vertical-spacing
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 200 TKN
span.fp-text.-text-sm.-text-regular / 100€
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 100 TKN
span.fp-text.-text-sm.-text-regular / 50€
.fp-vertical-spacing--line.-align-right
span.fp-text.-text-semi-bold 300 TKN
span.fp-text.-text-sm.-text-regular / 150€