3.2 #Organisms.Cards Cards
Different variations of cards.
Example
Cards: Vertical - Title on image
Praesent ac massa at
Cards: Vertical - Title below image
Markup: lib/components/styleguide/organisms/cards.html
<div class="app-body">
<div class="container">
<div class="row js-same-height-container js-card-list-wrapper">
<p class="mb-2 kss__description">Cards: Vertical - Title on image</p>
<div class="col-lg-4 js-same-height-element js-card-list-item">
<article class="card" style="height: 100%">
<div class="card__image">
<picture>
<img src="https://picsum.photos/750/500" alt="alt-text" />
</picture>
<h2 class="card__title card__title--long">
<span class="card__image--overlay"></span>
<span class="card__title__label">Praesent ac massa at</span>
</h2>
</div>
<div class="card__content">
<div class="card__content__wrapper">
<div class="js-tag-wrapper"></div>
<div class="card__content__summary wysiwyg">
Nunc nulla. Sed in libero ut nibh placerat accumsan. Donec sodales
sagittis magna. Etiam vitae tortor.
</div>
<div class="card__content__date">
<div class="card__content__date__icon">
<i class="fa-regular fa-calendar"></i>
</div>
<span> 28/07/2022 - 31/12/2022 </span>
</div>
</div>
<a
href="#"
class="button button--small card__link stretched-link"
title="Sed in libero ut nibh placerat accumsan"
aria-label="Read more about Sed in libero ut nibh placerat accumsan"
target="_blank"
>
<span class="button__title">Read more</span>
<div class="icon--btn-wrapper ms-3">
<i class="fa-light fa-arrow-right-long icon"></i>
</div>
</a>
</div>
</article>
</div>
<div class="col-lg-4 js-same-height-element js-card-list-item">
<article class="card" style="height: 100%">
<div class="card__image">
<picture>
<img src="https://picsum.photos/750/500" alt="alt-text" />
</picture>
<div class="card__favorite">
<i class="fa-solid fa-heart"></i>
</div>
<h2 class="card__title">
<span class="card__image--overlay"></span>
<span class="card__title__label"
>Maecenas tempus tellus eget</span
>
</h2>
<div class="card__highlight">News</div>
</div>
<div class="card__content">
<div class="card__content__wrapper">
<div class="js-tag-wrapper">
<div class="tags">
<a href="#" class="taxonomy-term vocabulary-tags tag tag--red">
Food
</a>
<a href="#" class="taxonomy-term vocabulary-tags tag">
Food
</a>
<a href="#" class="taxonomy-term vocabulary-tags tag">
Guide
</a>
</div>
</div>
<div class="card__content__date">
<div class="card__content__date__icon">
<i class="fa-regular fa-calendar"></i>
</div>
<span>17 mei 2022</span>
</div>
</div>
<a
href="/nl/nieuws/nieuws-nl"
class="button button--small card__link stretched-link"
title="Maecenas tempus tellus eget"
aria-label="Read more about Maecenas tempus tellus eget"
target="_blank"
>
<span class="button__title">Read more</span>
<div class="icon--btn-wrapper ms-3">
<i class="fa-light fa-arrow-right-long icon"></i>
</div>
</a>
</div>
</article>
</div>
<div class="col-lg-4 js-same-height-element js-card-list-item">
<article class="see-do card card--favorited" style="height: 100%">
<div class="card__image">
<picture>
<img src="https://picsum.photos/750/500" alt="alt-text" />
</picture>
<h2 class="card__title">
<span class="card__image--overlay"></span>
<span class="card__title__label">Poertoren</span>
</h2>
<div class="card__favorite">
<i class="fa-solid fa-heart"></i>
</div>
</div>
<div class="card__content">
<div class="card__content__wrapper">
<div>
<div class="tags">
<a href="#" class="taxonomy-term vocabulary-tags tag">
Food
</a>
<a href="#" class="taxonomy-term vocabulary-tags tag">
Hotspot
</a>
</div>
</div>
<div class="card__content__summary wysiwyg evel">
<p>
Donec vitae sapien ut libero venenatis faucibus. Vestibulum
turpis sem, aliquet eget, lobortis pellentesque.
</p>
</div>
<div class="card__content__location">
<div class="card__content__location__icon">
<i class="fa-regular fa-location-dot"></i>
</div>
<span>Begijnenvest -, 8000 Brugge</span>
</div>
</div>
<a
href="#"
class="button button--small card__link stretched-link"
title="Poertoren"
aria-label="Read more about Poertoren"
>
<span class="button__title">Read more</span>
<div class="icon--btn-wrapper ms-3">
<i class="fa-light fa-arrow-right-long icon"></i>
</div>
</a>
</div>
</article>
</div>
</div>
<div class="row js-same-height-container js-card-list-wrapper">
<p class="mb-2 mt-5 kss__description">Cards: Vertical - Title below image</p>
<div class="col-lg-6 js-same-height-element js-card-list-item">
<article class="card card--eat-stay js-card" data-favorite="91" data-id="91">
<div class="card__image">
<picture>
<img src="https://picsum.photos/750/500" alt="alt-text" />
</picture>
<div class="card__favorite js-favorite">
<i class="fa-solid fa-heart"></i>
</div>
</div>
<div class="card__content js-same-height-card">
<div class="card__content__wrapper">
<div class="js-tag-wrapper">
<div class="tags">
<a href="http://www.google.be" class="tag" about="/en/taxonomy/term/4">
Food
</a>
</div>
</div>
<div class="card__content__introduction">
<h2>Grand Hotel Casselbergh</h2>
</div>
<div class="card__content__summary wysiwyg">
Attente gastvrijheid in een exclusief kader Grand Hotel Casselbergh Brugge**** telt 118 elegante kamers. Ze combineren hedendaagse luxe m...
</div>
<div class="card__content__location">
<div class="card__content__location__icon">
<svg class="svg-inline--fa fa-location-dot" aria-hidden="true" focusable="false" data-prefix="far" data-icon="location-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M272 192C272 236.2 236.2 272 192 272C147.8 272 112 236.2 112 192C112 147.8 147.8 112 192 112C236.2 112 272 147.8 272 192zM192 160C174.3 160 160 174.3 160 192C160 209.7 174.3 224 192 224C209.7 224 224 209.7 224 192C224 174.3 209.7 160 192 160zM384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192H384zM192 48C112.5 48 48 112.5 48 192C48 204.4 52.49 223.6 63.3 249.2C73.78 274 88.66 301.4 105.8 329.1C134.2 375.3 167.2 419.1 192 451.7C216.8 419.1 249.8 375.3 278.2 329.1C295.3 301.4 310.2 274 320.7 249.2C331.5 223.6 336 204.4 336 192C336 112.5 271.5 48 192 48V48z"></path></svg><!-- <i class="fa-regular fa-location-dot"></i> -->
</div>
<span>HOOGSTRAAT 6, 8000 Brugge</span>
</div>
</div>
<a href="https://www.google.be" class="button button--small card__link stretched-link" title="Grand Hotel Casselbergh" aria-label="Read more about Grand Hotel Casselbergh" target="_blank"> <span class="button__title">Read more</span>
<div class="icon--btn-wrapper ms-3">
<i class="fa-light fa-arrow-right-long icon"></i>
</div>
</a>
</div>
</article>
</div>
<div class="col-lg-6 js-same-height-element js-card-list-item">
<article class="card card--eat-stay js-card" data-favorite="91" data-id="91">
<div class="card__image">
<picture>
<img src="https://picsum.photos/750/500" alt="alt-text" />
</picture>
<div class="card__favorite js-favorite">
<i class="fa-solid fa-heart"></i>
</div>
</div>
<div class="card__content js-same-height-card">
<div class="card__content__wrapper">
<div class="js-tag-wrapper">
</div>
<div class="card__content__introduction">
<h2>Grand Hotel Casselbergh</h2>
</div>
<div class="card__content__summary wysiwyg">
Attente gastvrijheid in een exclusief kader Grand Hotel Casselbergh Brugge**** telt 118 elegante kamers. Ze combineren hedendaagse luxe m...
</div>
<div class="card__content__location">
<div class="card__content__location__icon">
<svg class="svg-inline--fa fa-location-dot" aria-hidden="true" focusable="false" data-prefix="far" data-icon="location-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M272 192C272 236.2 236.2 272 192 272C147.8 272 112 236.2 112 192C112 147.8 147.8 112 192 112C236.2 112 272 147.8 272 192zM192 160C174.3 160 160 174.3 160 192C160 209.7 174.3 224 192 224C209.7 224 224 209.7 224 192C224 174.3 209.7 160 192 160zM384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192H384zM192 48C112.5 48 48 112.5 48 192C48 204.4 52.49 223.6 63.3 249.2C73.78 274 88.66 301.4 105.8 329.1C134.2 375.3 167.2 419.1 192 451.7C216.8 419.1 249.8 375.3 278.2 329.1C295.3 301.4 310.2 274 320.7 249.2C331.5 223.6 336 204.4 336 192C336 112.5 271.5 48 192 48V48z"></path></svg><!-- <i class="fa-regular fa-location-dot"></i> -->
</div>
<span>HOOGSTRAAT 6, 8000 Brugge</span>
</div>
</div>
<a href="https://www.google.be" class="button button--small card__link stretched-link" title="Grand Hotel Casselbergh" aria-label="Read more about Grand Hotel Casselbergh" target="_blank"> <span class="button__title">Read more</span>
<div class="icon--btn-wrapper ms-3">
<i class="fa-light fa-arrow-right-long icon"></i>
</div>
</a>
</div>
</article>
</div>
</div>
<div class="row">
<p class="mb-2 mt-5 kss__description">Cards: Horizontal</p>
<div class="col-12">
<article class="card card--news-item card--horizontal js-card">
<div class="card__image ">
<picture>
<img src="https://picsum.photos/750/500" alt="alt-text" />
</picture>
</div>
<div class="card__content">
<div class="card__content__wrapper">
<div class="js-tag-wrapper js-same-height-element">
<div class="tags">
<a href="https://www.google.be" class="tag--red">
Feest
</a>
<a href="https://www.google.be" class="tag">
Toegankelijk
</a>
<a href="https://www.google.be" class="tag">
Musea en attracties
</a>
<a href="https://www.google.be" class="tag">
Indoor
</a>
</div>
</div>
<h2 class="card__title">Feest op de Burg</h2>
<div class="card__content__date">
<div class="card__content__date__icon">
<svg class="svg-inline--fa fa-calendar" aria-hidden="true" focusable="false" data-prefix="far" data-icon="calendar" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"></path></svg><!-- <i class="fa-regular fa-calendar"></i> -->
</div>
<span>17 Nov 2022</span>
</div>
</div>
<a
href="#"
class="button button--small card__link stretched-link"
title="Feest op de Burg"
aria-label="Read more about Feest op de Burg"
>
<span class="button__title">Read more</span>
<div class="icon--btn-wrapper ms-3">
<i class="fa-light fa-arrow-right-long icon"></i>
</div>
</a>
</div>
</article>
<article class="event card card--horizontal" style="height: auto">
<div class="card__image">
<picture>
<img src="https://picsum.photos/750/500" alt="alt-text" />
</picture>
</div>
<div class="card__content">
<div class="card__content__wrapper">
<div class="js-tag-wrapper js-same-height-element">
<div class="tags">
<a href="https://www.google.be" class="tag--red">
Feest
</a>
</div>
</div>
<h2 class="card__title">Feest op de Burg</h2>
<div class="card__favorite">
<i class="fa-solid fa-heart"></i>
</div>
<div class="card__content__date">
<div class="card__content__date__icon">
<i class="fa-regular fa-calendar"></i>
</div>
<span>09/11/2022</span>
</div>
</div>
<a
href="#"
class="button button--small card__link stretched-link"
title="Feest op de Burg"
aria-label="Read more about Feest op de Burg"
>
<span class="button__title">Read more</span>
<div class="icon--btn-wrapper ms-3">
<i class="fa-light fa-arrow-right-long icon"></i>
</div>
</a>
</div>
</article>
</div>
<div class="col-12">
<article class="card card--horizontal card--favorited" style="height: auto">
<div class="card__image">
<picture>
<img src="https://picsum.photos/750/500" alt="alt-text" />
</picture>
</div>
<div class="card__content">
<div class="card__content__wrapper">
<h2 class="card__title">One location</h2>
<div class="card__favorite">
<i class="fa-solid fa-heart"></i>
</div>
<div class="card__content__summary wysiwyg">
<p>
Praesent vestibulum dapibus nibh. Cras varius. Morbi mollis
tellus ac sapien.
</p>
</div>
</div>
<a
href="#"
class="button button--small card__link stretched-link"
title="One location"
aria-label="Read more about One location"
target="_blank"
>
<span class="button__title">Read more</span>
<div class="icon--btn-wrapper ms-3">
<i class="fa-light fa-arrow-right-long icon"></i>
</div>
</a>
</div>
</article>
</div>
</div>
</div>
</div>
Source:
../client/lib/components/card/_card.scss, line 1