3.1 #Organisms.Accordion Accordion
Accordion organism.
Example
Accordion title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
Markup: lib/components/styleguide/organisms/accordion.html
<div class="app-body">
<section class="container accordion pt-medium pb-medium">
<div class="row">
<div class="col-12">
<h2 class="pb-medium">Accordion title</h2>
<div class="accordion__wrapper js-accordion">
<div class="accordion__item js-accordion-item">
<div class="row">
<div class="col-12">
<button class="accordion__item__heading js-accordion-item-button" aria-label="Open accordion item about demo title" aria-expanded="false">
<div class="accordion__item__heading__wrapper">
<i class="fa-light fa-circle-info"></i>
<h3 class="accordion__item__heading__text">accordion demo title</h3>
</div>
<i class="fa-solid fa-chevron-down icon--chevron-down accordion__item__heading__icon"></i>
</button>
</div>
</div>
<div class="accordion__item__content">
<section class="section paragraph--text">
<div class="container">
<div class="row">
<div class="col-12">
<div class="wysiwyg paragraph--text__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="accordion__item js-accordion-item">
<div class="row">
<div class="col-12">
<button class="accordion__item__heading js-accordion-item-button" aria-label="Open accordion item about demo title" aria-expanded="false">
<div class="accordion__item__heading__wrapper">
<i class="fa-light fa-circle-info"></i>
<h3 class="accordion__item__heading__text">accordion demo title</h3>
</div>
<i class="fa-solid fa-chevron-down icon--chevron-down accordion__item__heading__icon"></i>
</button>
</div>
</div>
<div class="accordion__item__content">
<section class="section paragraph--text">
<div class="container">
<div class="row">
<div class="col-12">
<div class="wysiwyg paragraph--text__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="accordion__item js-accordion-item">
<div class="row">
<div class="col-12">
<button class="accordion__item__heading js-accordion-item-button" aria-label="Open accordion item about demo title" aria-expanded="false">
<div class="accordion__item__heading__wrapper">
<i class="fa-light fa-circle-info"></i>
<h3 class="accordion__item__heading__text">accordion demo title</h3>
</div>
<i class="fa-solid fa-chevron-down icon--chevron-down accordion__item__heading__icon"></i>
</button>
</div>
</div>
<div class="accordion__item__content">
<section class="section paragraph--text">
<div class="container">
<div class="row">
<div class="col-12">
<div class="wysiwyg paragraph--text__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="accordion__item js-accordion-item">
<div class="row">
<div class="col-12">
<button class="accordion__item__heading js-accordion-item-button" aria-label="Open accordion item about demo title" aria-expanded="false">
<div class="accordion__item__heading__wrapper">
<h3 class="accordion__item__heading__text">accordion demo title</h3>
</div>
<i class="fa-solid fa-chevron-down icon--chevron-down accordion__item__heading__icon"></i>
</button>
</div>
</div>
<div class="accordion__item__content">
<section class="section paragraph--text">
<div class="container">
<div class="row">
<div class="col-12">
<div class="wysiwyg paragraph--text__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="accordion__item js-accordion-item">
<div class="row">
<div class="col-12">
<button class="accordion__item__heading js-accordion-item-button" aria-label="Open accordion item about demo title" aria-expanded="false">
<div class="accordion__item__heading__wrapper">
<i class="fa-light fa-circle-info"></i>
<h3 class="accordion__item__heading__text">accordion demo title</h3>
</div>
<i class="fa-solid fa-chevron-down icon--chevron-down accordion__item__heading__icon"></i>
</button>
</div>
</div>
<div class="accordion__item__content">
<section class="section paragraph--text">
<div class="container">
<div class="row">
<div class="col-12">
<div class="wysiwyg paragraph--text__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id quam et dolor interdum hendrerit. Vestibulum convallis varius purus, a commodo ligula euismod non. In et odio volutpat dolor molestie porta. Curabitur vitae rhoncus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lobortis eu ligula id euismod. Quisque maximus eros vitae aliquam accumsan. Morbi a lorem tristique, ultrices neque et, semper ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec interdum commodo enim, vitae commodo sapien iaculis sed.
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Source:
../client/lib/components/accordion/_accordion.scss, line 1
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
3.3 #Organisms.Cta Cta
Cta organism.
Example
Markup: lib/components/styleguide/organisms/cta.html
<div class="app-body">
<p class="mb-2 mt-5 kss__description">Display mode: Button</p>
<section class="paragraph--cta paragraph--cta--no-banner pt-medium pb-medium">
<div class="row">
<div class="col-12">
<a href="https://www.google.be" class="button--cta" target="_blank">
<span class="button--cta__bg"></span>
<span class="button--cta--left">
<span class="button--cta--left--text">Cta link text</span>
</span>
<span class="button--cta--right icon--btn-wrapper ms-3">
<i class="fa-regular fa-arrow-up-right"></i>
</span>
</a>
</div>
</div>
</section>
<p class="mb-2 mt-5 kss__description">Display mode: Link</p>
<section id="anchor-96" class="section paragraph--cta paragraph--cta--no-banner pt-medium pb-medium">
<div class="row">
<div class="col-12">
<a href="https://www.google.be" class="button button--small" target="_blank">
<span class="button__title">Cta link text</span>
<div class="icon--btn-wrapper ms-3">
<i class="fa-regular fa-arrow-up-right"></i>
</div>
</a>
</div>
</div>
</section>
<p class="mt-5 kss__description">Display mode: Banner</p>
<p class="mb-2 kss__description">Text align: left</p>
<section class="paragraph--cta pt-medium pb-medium">
<div class="row">
<div class="col-12 cta-banner">
<div class="cta-banner--wrapper">
<div class="cta-banner__bg">
<picture>
<img src="https://picsum.photos/1300/650" alt="cta banner image" width="" height="">
</picture>
</div>
<span class="cta-banner--overlay"></span>
<div class="cta-banner__content col-md-6 offset-md-2">
<h2>
Cta Banner
</h2>
<div class="wysiwyg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus. Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus.
</p>
</div>
<a href="https://www.google.be" class="button button--large js-button" data-flip="Cta link text" target="_blank">
<span class="button__content__wrapper">
<span class="button__content button__content--noflip">
<span class="button__content__label">
Cta link text
</span>
<span class="icon--btn-wrapper ms-3">
<i class="fa-regular fa-arrow-up-right"></i>
</span>
</span>
<span class="button__content button__content--flip">
<span class="button__content__label js-button-flip-label">
Cta link text
</span>
<span class="icon--btn-wrapper ms-3">
<i class="fa-regular fa-arrow-up-right"></i>
</span>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<p class="mt-5 kss__description">Display mode: Banner</p>
<p class="mb-2 kss__description">Text align: center</p>
<section class="paragraph--cta pt-medium pb-medium">
<div class="row">
<div class="col-12 cta-banner cta-banner--centered">
<div class="cta-banner--wrapper">
<div class="cta-banner__bg">
<picture>
<img src="https://picsum.photos/1300/650" alt="cta banner image" width="" height="">
</picture>
</div>
<span class="cta-banner--overlay"></span>
<div class="cta-banner__content col-md-6 offset-md-2">
<h2>
Cta Banner
</h2>
<div class="wysiwyg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus. Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus.
</p>
</div>
<a href="https://www.google.be" class="button button--large js-button" data-flip="Cta link text" target="_blank">
<span class="button__content__wrapper">
<span class="button__content button__content--noflip">
<span class="button__content__label">
Cta link text
</span>
<span class="icon--btn-wrapper ms-3">
<i class="fa-regular fa-arrow-up-right"></i>
</span>
</span>
<span class="button__content button__content--flip">
<span class="button__content__label js-button-flip-label">
Cta link text
</span>
<span class="icon--btn-wrapper ms-3">
<i class="fa-regular fa-arrow-up-right"></i>
</span>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
Source:
../client/lib/components/cta-banner/_cta-banner.scss, line 1
3.4 #Organisms.Downloads Downloads
Downloads organism.
Example
JPG - 4.18 MB
JPG - 4.18 MB
JPG - 4.18 MB
JPG - 4.18 MB
Markup: lib/components/styleguide/organisms/downloads.html
<div class="app-body">
<section class="section paragraph--download downloads js-same-height-container pt-medium pb-medium">
<div class="container">
<div class="row">
<div class="offset-lg-1 col-lg-10 offset-xl-2 col-xl-8 content">
<div class="row">
<div class="col-12 title-and-link">
<h2> These are downloads</h2>
<div>
<a href="/en/locations" class="button button--small" target="_self">
<span class="button__title">Cta button</span>
<span class="icon--btn-wrapper ms-3">
<i class="fa-light fa-arrow-right-long"></i>
</span>
</a>
</div>
</div>
</div>
<div class="row g-4">
<div class="col-12 col-md-6">
<div class="downloads__download js-same-height-element">
<div class="downloads__download__wrapper align-items-center w-100">
<div class="downloads__download__teaser">
<picture>
<img
src="https://picsum.photos/120/160"
alt="alt text"
/>
</picture>
</div>
<div class="downloads__download__content">
<div class="file file--mime-image-jpeg file--image download-link">
<div class="download-link__text">
<div>
<a href="/sites/default/files/downloads/pexels-abi-greer-5662749.jpg" type="image/jpeg" title="pexels-abi-greer-5662749.jpg" target="_blank">
pexels-abi-greer-5662749.jpg
</a>
</div>
<span>JPG - 4.18 MB</span>
</div>
</div>
</div>
<div class="downloads__download__download-icon">
<i class="fa-regular fa-arrow-down-to-bracket"></i>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="downloads__download js-same-height-element">
<div class="downloads__download__wrapper align-items-center w-100">
<div class="downloads__download__teaser">
<div class="fontawesome-icons">
<div class="fontawesome-icon">
<i class="fal fa-church" data-fa-transform="" data-fa-mask="" style="--fa-primary-color: #000000; --fa-secondary-color: #000000;"></i>
</div>
</div>
</div>
<div class="downloads__download__content">
<div class="file file--mime-image-jpeg file--image download-link">
<div class="download-link__text">
<div>
<a href="/sites/default/files/downloads/pexels-abi-greer-5662749.jpg" type="image/jpeg" title="pexels-abi-greer-5662749.jpg" target="_blank">
pexels-abi-greer-5662749.jpg
</a>
</div>
<span>JPG - 4.18 MB</span>
</div>
</div>
</div>
<div class="downloads__download__download-icon">
<i class="fa-regular fa-arrow-down-to-bracket"></i>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="downloads__download js-same-height-element">
<div class="downloads__download__wrapper align-items-center w-100">
<div class="downloads__download__teaser">
<div class="fontawesome-icons">
<div class="fontawesome-icon">
<i class="fal fa-church" data-fa-transform="" data-fa-mask="" style="--fa-primary-color: #000000; --fa-secondary-color: #000000;"></i>
</div>
</div>
</div>
<div class="downloads__download__content">
<div class="file file--mime-image-jpeg file--image download-link">
<div class="download-link__text">
<div>
<a href="/sites/default/files/downloads/pexels-abi-greer-5662749.jpg" type="image/jpeg" title="pexels-abi-greer-5662749.jpg" target="_blank">
pexels-abi-greer-5662749.jpg
</a>
</div>
<span>JPG - 4.18 MB</span>
</div>
</div>
</div>
<div class="downloads__download__download-icon">
<i class="fa-regular fa-arrow-down-to-bracket"></i>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="downloads__download js-same-height-element">
<div class="downloads__download__wrapper align-items-center w-100">
<div class="downloads__download__teaser">
<picture>
<img
src="https://picsum.photos/120/160"
alt="alt text"
/>
</picture>
</div>
<div class="downloads__download__content">
<div class="file file--mime-image-jpeg file--image download-link">
<div class="download-link__text">
<div>
<a href="/sites/default/files/downloads/pexels-abi-greer-5662749.jpg" type="image/jpeg" title="pexels-abi-greer-5662749.jpg" target="_blank">
pexels-abi-greer-5662749.jpg
</a>
</div>
<span>JPG - 4.18 MB</span>
</div>
</div>
</div>
<div class="downloads__download__download-icon">
<i class="fa-regular fa-arrow-down-to-bracket"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Source:
../client/lib/components/downloads/_downloads.scss, line 1
3.5 #Organisms.Info-blockr Author Info
Author Info organism.
Example
Author
Markup: lib/components/styleguide/organisms/info-block.html
<div class="app-body">
<div class="container">
<section class="info-block pt-medium pb-medium">
<div class="row">
<div class="col-12">
<div class="info-block__wrapper">
<h2 class="info-block__title">Author</h2>
<div class="info-block__content">
<div class="info-block__content__img">
<picture>
<img src="https://picsum.photos/120/120" alt="Geoff" />
</picture>
</div>
<address class="info-block__content__info">
<p class="h6-style">Firstname Lastname</p>
<p>Function inside the company</p>
<a
class="info-block__link"
href="tel:+320000000000"
tabindex="-1"
>
<i class="fa-regular fa-phone icon icon--cl"></i>
<span> +32 0000000000 </span>
</a>
<a
class="info-block__link"
href="test@testmail.be"
tabindex="-1"
>
<i class="fa-regular fa-envelope icon icon--cl"></i>
<span> test@testmail.be </span>
</a>
</address>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Source:
../client/lib/components/info-block/_info-block.scss, line 1
3.6 #Organisms.Introduction Introduction
Introduction organism.
Example
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
Markup: lib/components/styleguide/organisms/introduction.html
<div class="app-body">
<section class="section container paragraph--introduction pt-medium pb-medium">
<div class="row">
<div class="col-12">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor.
</p>
</div>
</div>
</section>
</div>
Source:
../client/lib/components/introduction/_introduction.scss, line 1
3.7 #Organisms.Map Map
Map organism (uses https://leafletjs.com/).
Example
Map Osm
This is a demo description for this marker
Highlight
This is a demo description for this marker
Highlight
Installation notes
If you want to use the map component, don't forget to load the css in the head of your application:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin="" />
Custom icons
There are a bunch of custom icons already available in the dist folder (./dist/img/static/markers).
If you want to add your own custom markers, it is important that you would do it as follows:
- Upload .png files with a 63x63px dimension.
- Make sure to upload a hover state .png icon with the same dimensions (63x63px).
Blue icons (leisure, cfo, sector, press):
-
Monument
-
Bed
-
Camera
-
Drink
-
Location
-
Map
-
Parking sign
-
Restaurant
-
Heart
Red icons (convention bureau):
-
Monument
-
Bed
-
Camera
-
Drink
-
Location
-
Map
-
Parking sign
-
Restaurant
-
Heart
Markup: lib/components/styleguide/organisms/map-osm.html
<section class="container map js-map-osm pt-large pb-large" data-id="map-osm">
<div class="row">
<div class="col-12">
<h2 class="pb-medium">Map Osm</h2>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="map__markers">
<div class="map__marker js-map-osm-marker"
data-lat="50.989246"
data-lon="3.703037"
data-icon="./dist/img/static/markers/blue/location.png"
data-icon-hover=" ./dist/img/static/markers/blue/location-hover.png"
data-title="This is a demo titel"
data-id="null">
<div class="map__marker__hidden js-map-osm-marker-desc">
<div class="wysiwyg">
<p>
This is a demo description for this marker
</p>
</div>
</div>
<div class="map__marker__hidden js-map-osm-marker-tags">
<div class="tags">
<div class="tag">tag 1</div>
<div class="tag">tag 2</div>
<div class="tag">tag 3</div>
</div>
</div>
<div class="map__marker__hidden js-map-osm-marker-highlight">
<!-- You can add two color values to the class: 'blue' or 'red', the default color is darkgrey -->
<div class="card__highlight blue">
Highlight
</div>
</div>
</div>
<div class="map__marker js-map-osm-marker"
data-lat="51.229404"
data-lon="3.34472"
data-icon="./dist/img/static/markers/red/monument-red.png"
data-icon-hover="./dist/img/static/markers/red/monument-red-hover.png"
data-title="Demo Marker"
>
<div class="map__marker__hidden js-map-osm-marker-img">
<img src="https://picsum.photos/530/250" alt="marker-image">
</div>
<div class="map__marker__hidden js-map-osm-marker-desc">
<div class="wysiwyg">
<p>
This is a demo description for this marker
</p>
</div>
</div>
<div class="map__marker__hidden js-map-osm-marker-tags">
<div class="tags">
<div class="tag">tag 1</div>
<div class="tag">tag 2</div>
<div class="tag">tag 3</div>
</div>
</div>
<div class="map__marker__hidden js-map-osm-marker-highlight">
<div class="card__highlight">
Highlight
</div>
</div>
</div>
</div>
<div id="map-osm" class="map__container js-map-osm-container"></div>
</div>
</div>
</section>
<section class="container pb-large">
<div class="row">
<div class="col-12">
<h3 class="pt-small pb-small">Installation notes</h3>
<div class="wysiwyg">
<p>
If you want to use the map component, don't forget to load the css in the head of your application: <br>
</p>
<code>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin="" />
</code>
</div>
</div>
</div>
</section>
<section class="container">
<div class="row">
<div class="col-12">
<h3 class="pt-small pb-small">Custom icons</h3>
<div class="wysiwyg">
<p>
There are a bunch of custom icons already available in the dist folder (./dist/img/static/markers). <br>
If you want to add your own custom markers, it is important that you would do it as follows:<br>
</p>
<ul class="pb-small">
<li>
Upload .png files with a 63x63px dimension.
</li>
<li>
Make sure to upload a hover state .png icon with the same dimensions (63x63px).
</li>
</ul>
<p><strong>Blue icons (leisure, cfo, sector, press):</strong></p>
</div>
<ul class="row gy-4">
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/blue/monument.png" alt="monument marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/monument-hover.png" alt="monument marker hover" />
</div>
<span class="kss__icon__name">Monument</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/blue/bed.png" alt="bed marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/bed-hover.png" alt="bed marker hover" />
</div>
<span class="kss__icon__name">Bed</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/blue/camera.png" alt="camera marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/camera-hover.png" alt="camera marker hover" />
</div>
<span class="kss__icon__name">Camera</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/blue/drink.png" alt="drink marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/drink-hover.png" alt="drink marker hover" />
</div>
<span class="kss__icon__name">Drink</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/blue/location.png" alt="location marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/location-hover.png" alt="location marker hover" />
</div>
<span class="kss__icon__name">Location</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/blue/map.png" alt="map marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/map-hover.png" alt="map marker hover" />
</div>
<span class="kss__icon__name">Map</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/blue/parking-sign.png" alt="parking-sign marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/parking-sign-hover.png" alt="parking-sign marker hover" />
</div>
<span class="kss__icon__name">Parking sign</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/blue/restaurant.png" alt="restaurant marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/blue/restaurant-hover.png" alt="restaurant marker hover" />
</div>
<span class="kss__icon__name">Restaurant</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/heart.png" alt="heart marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/heart-hover.png" alt="heart marker hover" />
</div>
<span class="kss__icon__name">Heart</span>
</div>
</li>
</ul>
<div class="wysiwyg pt-small">
<p><strong>Red icons (convention bureau):</strong></p>
</div>
<ul class="row gy-4">
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/red/monument-red.png" alt="monument marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/monument-red-hover.png" alt="monument marker hover" />
</div>
<span class="kss__icon__name">Monument</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/red/bed-red.png" alt="bed marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/bed-red-hover.png" alt="bed marker hover" />
</div>
<span class="kss__icon__name">Bed</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/red/camera-red.png" alt="camera marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/camera-red-hover.png" alt="camera marker hover" />
</div>
<span class="kss__icon__name">Camera</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/red/drink-red.png" alt="drink marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/drink-red-hover.png" alt="drink marker hover" />
</div>
<span class="kss__icon__name">Drink</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/red/location-red.png" alt="location marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/location-red-hover.png" alt="location marker hover" />
</div>
<span class="kss__icon__name">Location</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/red/map-red.png" alt="map marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/map-red-hover.png" alt="map marker hover" />
</div>
<span class="kss__icon__name">Map</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/red/parking-sign-red.png" alt="parking-sign marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/parking-sign-red-hover.png" alt="parking-sign marker hover" />
</div>
<span class="kss__icon__name">Parking sign</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/red/restaurant-red.png" alt="restaurant marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/red/restaurant-red-hover.png" alt="restaurant marker hover" />
</div>
<span class="kss__icon__name">Restaurant</span>
</div>
</li>
<li class="col-6 col-md-2">
<div class="kss__icon kss__icon--marker">
<div class="kss__icon__marker">
<img src="./dist/img/static/markers/star.png" alt="heart marker"/>
<img class="kss__icon__marker__hover" src="./dist/img/static/markers/star-hover.png" alt="heart marker hover" />
</div>
<span class="kss__icon__name">Heart</span>
</div>
</li>
</ul>
</div>
</div>
</section>
Source:
../client/lib/components/map-osm/_map.scss, line 1
3.8 #Organisms.MediaCarousel Media carousel
Media carousel.
Example
Markup: lib/components/styleguide/organisms/media-carousel.html
<div class="app-body">
<div class="container">
<section
data-paragraph="1280"
class="section media-carousel js-media-carousel paragraph--media-carousel pt-medium pb-medium"
>
<div class="row">
<div class="col-12">
<div class="media-carousel__wrapper glide js-media">
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides media__slides">
<li
class="glide__slide media__slide js-media-item js-media-carousel-item"
>
<div class="media__media">
<div class="media-carousel__item">
<div
class="media-carousel__item__img js-media-carousel-img"
>
<picture>
<img
src="https://picsum.photos/1200/672?random=1"
alt="alt text"
/>
</picture>
</div>
<div class="media-carousel__item__desc">
<span class="description"> Koopweekend juni 2022 </span>
<span class="copyright">
<i class="fa-light fa-copyright"></i>
Stad Brugge
</span>
</div>
</div>
</div>
</li>
<li
class="glide__slide media__slide js-media-item js-media-carousel-item"
>
<div class="media__media">
<div class="media-carousel__item">
<div
class="media-carousel__item__img js-media-carousel-img"
>
<picture>
<img
src="https://picsum.photos/1200/672?random=2"
alt="alt text"
/>
</picture>
</div>
<div class="media-carousel__item__desc">
<span class="description">
Fotoshoot Wandelgids Oooh! Brugge
</span>
<span class="copyright">
<i class="fa-light fa-copyright"></i>
BRUGGE
</span>
</div>
</div>
</div>
</li>
<li
class="glide__slide media__slide js-media-item js-media-carousel-item"
>
<div class="media__media">
<div class="media-carousel__item">
<div
class="media-carousel__item__img js-media-carousel-img"
>
<picture>
<img
src="https://picsum.photos/1200/672?random=3"
alt="alt text"
/>
</picture>
</div>
<div class="media-carousel__item__desc">
<span class="description">
Bootje aan de Spinolarei
</span>
<span class="copyright">
<i class="fa-light fa-copyright"></i>
BRUGGE
</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<button
class="media-carousel__gallery__btn js-media-carousel-gallery-btn"
aria-label="Show fullscreen"
>
<i
class="fa-regular fa-up-right-and-down-left-from-center icon--fullscreen"
></i>
</button>
<div
class="glide__arrows media-carousel__nav js-media-carousel-nav"
data-glide-el="controls"
>
<button
class="glide__arrow glide__arrow--left btn--glide"
aria-label="Go to previous slide"
data-glide-dir="<"
>
<i class="fa-light fa-arrow-left-long"></i>
</button>
<button
class="glide__arrow glide__arrow--right btn--glide"
aria-label="Go to next slide"
data-glide-dir=">"
>
<i class="fa-light fa-arrow-right-long"></i>
</button>
</div>
</div>
</div>
</div>
<div class="js-gallery">
<a
class="glightbox glightbox-1280"
data-gallery="1280"
data-type="image"
href="https://picsum.photos/1300/866?random=1"
data-title="Koopweekend juni 2022"
data-description="Stad Brugge"
>
</a>
<a
class="glightbox glightbox-1280"
data-gallery="1280"
data-type="image"
href="https://picsum.photos/1300/866?random=2"
data-title="Fotoshoot Wandelgids Oooh! Brugge"
data-description="BRUGGE"
>
</a>
<a
class="glightbox glightbox-1280"
data-gallery="1280"
data-type="image"
href="https://picsum.photos/1300/866?random=3"
data-title="Bootje aan de Spinolarei"
data-description="BRUGGE"
>
</a>
</div>
</section>
</div>
</div>
Source:
../client/lib/components/media-carousel/_media-carousel.scss, line 1
3.9 #Organisms.MediaGrid Media grid
Media grid organism.
Example
Media grid
Markup: lib/components/styleguide/organisms/media-grid.html
<div class="app-body">
<section class="container paragraph--media-grid pt-medium pb-medium">
<div class="row">
<div class="col-12">
<h2 class="pb-small">Media grid</h2>
<div class="media-grid media-grid--masonry js-gallery">
<a class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid" data-type="image" href="https://picsum.photos/800/800">
<img src="https://picsum.photos/400/400">
</a>
<a class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid" data-type="image" href="https://picsum.photos/800/450">
<img src="https://picsum.photos/400/225">
</a>
<a href="https://youtu.be/pSehV7SjJQg" class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid">
<img src="http://i.ytimg.com/vi/pSehV7SjJQg/maxresdefault.jpg">
<div class="btn btn--play-video btn--play-video--triangle">
<i class="fa-solid fa-play icon--play-triangle"></i>
</div>
</a>
<a class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid" data-type="image" href="https://picsum.photos/800/600">
<img src="https://picsum.photos/400/300">
</a>
<a class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid" data-type="image" href="https://picsum.photos/800/512">
<img src="https://picsum.photos/400/256">
</a>
<a class="glightbox glightbox-id-media-grid media-grid__item mb-4" data-gallery="id-media-grid" data-type="image" href="https://picsum.photos/800/412">
<img src="https://picsum.photos/400/206">
</a>
</div>
</div>
</div>
</section>
</div>
Source:
../client/lib/components/media-grid/_media-grid.scss, line 1
3.10 #Organisms.Notification Notification
Notification organism.
Example
Status: Alert
Cras sagittis. Etiam imperdiet imperdiet orci. Aenean ut
eros et nisl sagittis vestibulum. Curabitur a felis in nunc
fringilla tristique.
Status: Info
Cras sagittis. Etiam imperdiet imperdiet orci. Aenean ut
eros et nisl sagittis vestibulum. Curabitur a felis in nunc
fringilla tristique.
Status: Notification
Cras sagittis. Etiam imperdiet imperdiet orci. Aenean ut
eros et nisl sagittis vestibulum. Curabitur a felis in nunc
fringilla tristique.
Markup: lib/components/styleguide/organisms/notification.html
<div class="app-body">
<div class="row">
<div class="col-12">
<p class="mb-2 kss__description">Status: Alert</p>
<div class="header__popin header__popin--alert js-header-popin">
<div class="container container--header">
<div class="row">
<div class="col-12">
<div class="header__popin__content">
<div class="header__popin__message">
<span class="icon">
<i class="fa-light fa-circle-info"></i>
</span>
<div class="message">
Cras sagittis. Etiam imperdiet imperdiet orci. Aenean ut
eros et nisl sagittis vestibulum. Curabitur a felis in nunc
fringilla tristique.
</div>
</div>
<button
class="btn--close js-close-btn"
aria-label="Close header popin"
>
<i class="fa-light fa-xmark icon icon--close-popin"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<p class="mb-2 mt-5 kss__description">Status: Info</p>
<div class="header__popin header__popin--info js-header-popin">
<div class="container container--header">
<div class="row">
<div class="col-12">
<div class="header__popin__content">
<div class="header__popin__message">
<span class="icon">
<i class="fa-light fa-circle-info"></i>
</span>
<div class="message">
Cras sagittis. Etiam imperdiet imperdiet orci. Aenean ut
eros et nisl sagittis vestibulum. Curabitur a felis in nunc
fringilla tristique.
</div>
</div>
<button
class="btn--close js-close-btn"
aria-label="Close header popin"
>
<i class="fa-light fa-xmark icon icon--close-popin"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<p class="mb-2 mt-5 kss__description">Status: Notification</p>
<div class="header__popin header__popin--notification js-header-popin">
<div class="container container--header">
<div class="row">
<div class="col-12">
<div class="header__popin__content">
<div class="header__popin__message">
<span class="icon">
<i class="fa-light fa-circle-info"></i>
</span>
<div class="message">
Cras sagittis. Etiam imperdiet imperdiet orci. Aenean ut
eros et nisl sagittis vestibulum. Curabitur a felis in nunc
fringilla tristique.
</div>
</div>
<button
class="btn--close js-close-btn"
aria-label="Close header popin"
>
<i class="fa-light fa-xmark icon icon--close-popin"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Source:
../client/scss/layout/header/_header.scss, line 1
3.11 #Organisms.Quotes Quotes
Quotes organism.
Example
-
Lorem ipsum dolor sit amet consectetur adipiscing elit ante, hac sagittis penatibus erat pretium integer aliquam odio
-
Lorem ipsum dolor sit amet consectetur adipiscing elit a integer semper habitant cras, id egestas varius elementum justo quisque viverra.
Markup: lib/components/styleguide/organisms/quotes.html
<div class="app-body">
<div class="container">
<section class="paragraph--quotes pb-medium pt-medium">
<div class="row">
<div class="col-12">
<div class="quotes js-quotes js-slideshow glide--ltr glide--carousel glide--swipeable">
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides">
<li class="quote glide__slide">
<div class="row">
<div class="col-12">
<div class="row">
<div class="quote__wrapper quote__wrapper--single quote__wrapper--center">
<div class="">
<div class="quote__text quote__text--single">
<h2 class="quote__text__quote h2-display quote__text__quote--long">Lorem ipsum dolor sit
amet consectetur adipiscing elit vitae litora mattis duis, sed id elementum cras natoque
gravida facilisis habitant urna nostra,</h2>
<div class="quote__text__info text-xsmall ">
<div class="quote__text__info__author">
This is a person, This is my extra
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="quote glide__slide">
<div class="row">
<div class="col-12">
<div class="quote__wrapper row gx-5 ">
<div class="col-12 col-md-6">
<div class="quote__image">
<picture>
<img
src="https://picsum.photos/id/10/750/500"
alt="alt text"
loading="lazy"
/>
</picture>
</div>
</div>
<div class="col-12 col-md-6">
<div class="quote__text">
<h2 class="quote__text__quote h2-display ">Lorem ipsum dolor sit amet consectetur adipiscing
elit ante, hac sagittis penatibus erat pretium integer aliquam odio</h2>
<div class="quote__text__info text-xsmall ">
<div class="quote__text__info__author">
Another person
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="quote glide__slide">
<div class="row">
<div class="col-12">
<div class="quote__wrapper row gx-5 ">
<div class="col-12 col-md-6">
<div class="quote__image">
<picture>
<img
src="https://picsum.photos/id/21/500/750"
alt="alt text"
loading="lazy"
/>
</picture>
</div>
</div>
<div class="col-12 col-md-6">
<div class="quote__text">
<h2 class="quote__text__quote h2-display">
Lorem ipsum dolor sit amet consectetur adipiscing elit a integer semper habitant cras, id
egestas varius elementum justo quisque viverra.
</h2>
<div class="quote__text__info text-xsmall">
<div class="quote__text__info__author">
Another person
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="quote glide__slide">
<div class="row">
<div class="col-12">
<div class="row">
<div class="quote__wrapper quote__wrapper--single ">
<div class="col-12 offset-md-1 col-md-10">
<div class="quote__text quote__text--single">
<h2 class="quote__text__quote h2-display">
Imperdiet sollicitudin quisque litora cum malesuada nam feugiat, cursus habitant
curabitur posuere ut egestas aptent sodales</h2>
<div class="quote__text__info text-xsmall">
<div class="quote__text__info__author">
Yet another person, extra
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="glide__arrows quotes__nav" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left btn--glide" aria-label="Go to previous slide"
data-glide-dir="<">
<svg class="svg-inline--fa fa-arrow-left-long" aria-hidden="true" focusable="false" data-prefix="fal"
data-icon="arrow-left-long" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
data-fa-i2svg="">
<path fill="currentColor"
d="M4.7 244.7c-6.2 6.2-6.2 16.4 0 22.6l144 144c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L54.6 272 496 272c8.8 0 16-7.2 16-16s-7.2-16-16-16L54.6 240 171.3 123.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0l-144 144z"></path>
</svg><!-- <i class="fa-light fa-arrow-left-long"></i> -->
</button>
<button class="glide__arrow glide__arrow--right btn--glide" aria-label="Go to next slide"
data-glide-dir=">">
<svg class="svg-inline--fa fa-arrow-right-long" aria-hidden="true" focusable="false" data-prefix="fal"
data-icon="arrow-right-long" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
data-fa-i2svg="">
<path fill="currentColor"
d="M507.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-144-144c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L457.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l441.4 0L340.7 388.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l144-144z"></path>
</svg><!-- <i class="fa-light fa-arrow-right-long"></i> -->
</button>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Source:
../client/lib/components/quotes/_quotes.scss, line 1
3.12 #Organisms.tabs Tabs
Tabs organism.
Example
Example text block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus.
Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.
Example text block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus. Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.
link to googleExample text block
Nam sagittis leo id urna fringilla, quis dapibus erat feugiat. Suspendisse iaculis ligula quis ligula tempor placerat.
Nunc vitae fermentum massa. Nam porttitor quam quis odio gravida tincidunt. Pellentesque eget tincidunt lorem. Aenean porta rutrum tellus placerat pharetra. Pellentesque vel consequat mauris. Proin ac iaculis ipsum. Mauris at condimentum enim. Donec cursus facilisis euismod. Nam iaculis eros eu mi sagittis tristique. Integer blandit neque ut mattis luctus.
Example text block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus.
Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.
Markup: lib/components/styleguide/organisms/tabs.html
<div class="app-body">
<section class="paragraph--tabs pt-medium pb-medium">
<div class="row">
<div class="col-12">
<div class="tabs-vb tabs-vb--services js-tabs">
<div class="tabs-vb__menu row">
<div class="col-lg-3">
<button class="tabs-vb__menu__btn js-tabs-menu-btn js-active" data-id="tab-1">
<span>Tab Item 1</span>
<span class="line"></span>
</button>
</div>
<div class="col-lg-3">
<button class="tabs-vb__menu__btn js-tabs-menu-btn" data-id="tab-2">
<span>Tab Item 2</span>
<span class="line"></span>
</button>
</div>
<div class="col-lg-3">
<button class="tabs-vb__menu__btn js-tabs-menu-btn" data-id="tab-3">
<span>Tab Item 3</span>
<span class="line"></span>
</button>
</div>
<div class="col-lg-3">
<button class="tabs-vb__menu__btn js-tabs-menu-btn" data-id="tab-4">
<span>Tab Item 4</span>
<span class="line"></span>
</button>
</div>
</div>
<div class="tabs-vb__menu--mobile select__wrapper js-select-wrapper">
<select aria-label="tabs-vb" id="tomselect-1" class="tomselected ts-hidden-accessible">
<option value="tab-2">Tab Item 2</option>
<option value="tab-3">Tab Item 3</option>
<option value="tab-4">Tab Item 4</option>
<option value="tab-1">Tab Item 1</option>
</select>
<span class="select__wrapper__icon">
<i class="fa-solid fa-chevron-down icon icon--chevron-down"></i>
</span>
</div>
<div class="tabs-vb__list">
<div class="tabs-vb__list__item js-tabs-list-item js-visible" data-id="tab-1">
<section id="anchor-101" class="paragraph--text pt-large pb-large">
<div class="row">
<div class="col-12">
<h3 class="pb-small">
Example text block
</h3>
<div class="wysiwyg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus.</p>
<p>Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.</p>
</div>
</div>
</div>
</section>
</div>
<div class="tabs-vb__list__item js-tabs-list-item" data-id="tab-2">
<section id="anchor-103" class="section paragraph--text pt-large pb-large">
<div class="row">
<div class="col-12">
<h3 class="pb-small">
Example text block
</h3>
<div class="wysiwyg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus. Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.</p>
<a href="https://www.google.be" target="_blank">link to google</a>
</div>
</div>
</div>
</section>
</div>
<div class="tabs-vb__list__item js-tabs-list-item" data-id="tab-3">
<section id="anchor-105" class="section paragraph--text pt-large pb-large">
<div class="row">
<div class="col-12">
<h3 class="pb-small">
Example text block
</h3>
<div class="wysiwyg">
<p>Nam sagittis leo id urna fringilla, quis dapibus erat feugiat. Suspendisse iaculis ligula quis ligula tempor placerat.</p>
<p>Nunc vitae fermentum massa. Nam porttitor quam quis odio gravida tincidunt. Pellentesque eget tincidunt lorem. Aenean porta rutrum tellus placerat pharetra. Pellentesque vel consequat mauris. Proin ac iaculis ipsum. Mauris at condimentum enim. Donec cursus facilisis euismod. Nam iaculis eros eu mi sagittis tristique. Integer blandit neque ut mattis luctus.</p>
</div>
</div>
</div>
</section>
</div>
<div class="tabs-vb__list__item js-tabs-list-item" data-id="tab-4">
<div data-quickedit-field-id="paragraph/108/field_blocks/en/default" data-once="quickedit">
<section id="anchor-107" class="section paragraph--text pt-large pb-large">
<div class="row">
<div class="col-12">
<h3 class="pb-small">
Example text block
</h3>
<div class="wysiwyg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis venenatis libero eget sodales. In vitae sollicitudin metus.</p>
<p>Fusce turpis libero, pellentesque sit amet nisl id, vehicula finibus tellus. Fusce lorem sapien, venenatis in mi at, ullamcorper feugiat turpis. Aliquam erat volutpat. Pellentesque dignissim vulputate sem porttitor iaculis. Nunc eu pellentesque nisi, in dignissim orci.</p>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Source:
../client/lib/components/tabs/_tabs.scss, line 1
3.13 #Organisms.Text Text
Text organism.
Example
H2 Text title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
Lorem ipsum dolor sit amet consectetur adipiscing elit
Display: CTA
Lorem ipsum dolor sit amet consectetur adipiscing elit, nullam ultrices quis nec imperdiet ante dictumst cubilia, mollis feugiat tellus vitae lobortis per. Penatibus tempor proin natoque nisi non integer id fames mauris, hendrerit tempus a mus libero netus laoreet sollicitudin aliquet inceptos, habitasse turpis magnis porttitor porta molestie rhoncus morbi.
Markup: lib/components/styleguide/organisms/text.html
<div class="app-body">
<section class="container paragraph--text pt-medium pb-medium">
<div class="row">
<div class="col-12">
<h2 class="pb-small">H2 Text title</h2>
<div class="wysiwyg">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
</div>
</div>
</div>
</section>
<section class="section paragraph--text pb-medium pt-medium text--cta">
<div class="paragraph--text__inner">
<div class="row">
<div class="col-12">
<h2>
Lorem ipsum dolor sit amet consectetur adipiscing elit
</h2>
<div class="wysiwyg">
<p>Display: CTA</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, nullam ultrices quis nec imperdiet ante dictumst cubilia, mollis feugiat tellus vitae lobortis per. Penatibus tempor proin natoque nisi non integer id fames mauris, hendrerit tempus a mus libero netus laoreet sollicitudin aliquet inceptos, habitasse turpis magnis porttitor porta molestie rhoncus morbi.</p>
</div>
</div>
</div>
</div>
</section>
</div>
Source:
../client/lib/components/text/_text.scss, line 1
3.14 #Organisms.TextMedia Text/media
Text/media organism.
Example
Koopweekend juni 2022
Stad Brugge
Text/media
Display: CTA
Media position: right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget maximus sem, vitae commodo purus. Morbi odio enim, interdum gravida tristique vel, cursus quis risus. Quisque diam diam, volutpat id sapien a, gravida elementum purus. Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean quis tellus in mi vehicula iaculis nec vel est.
Fotoshoot Wandelgids Oooh! Brugge
BRUGGE
Text/media
Display: CTA
Media position: left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget maximus sem, vitae commodo purus. Morbi odio enim, interdum gravida tristique vel, cursus quis risus. Quisque diam diam, volutpat id sapien a, gravida elementum purus. Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean quis tellus in mi vehicula iaculis nec vel est.
Text/Media
Display: CTA
Media position: right
Youtube video implementation
Koopweekend juni 2022
Stad Brugge
Text/media
Display: normal
Media position: left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget maximus sem, vitae commodo purus. Morbi odio enim, interdum gravida tristique vel, cursus quis risus. Quisque diam diam, volutpat id sapien a, gravida elementum purus. Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean quis tellus in mi vehicula iaculis nec vel est.
Koopweekend juni 2022
Stad Brugge
Text/media
Display: normal
Media position: right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget maximus sem, vitae commodo purus. Morbi odio enim, interdum gravida tristique vel, cursus quis risus. Quisque diam diam, volutpat id sapien a, gravida elementum purus. Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean quis tellus in mi vehicula iaculis nec vel est.
Koopweekend juni 2022
Stad Brugge
Text/media
Display: normal
Media position: up
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget maximus sem, vitae commodo purus. Morbi odio enim, interdum gravida tristique vel, cursus quis risus. Quisque diam diam, volutpat id sapien a, gravida elementum purus. Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean quis tellus in mi vehicula iaculis nec vel est.
Koopweekend juni 2022
Stad Brugge
Text/media
Display: normal
Media position: down
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget maximus sem, vitae commodo purus. Morbi odio enim, interdum gravida tristique vel, cursus quis risus. Quisque diam diam, volutpat id sapien a, gravida elementum purus. Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean quis tellus in mi vehicula iaculis nec vel est.
Markup: lib/components/styleguide/organisms/text-media.html
<div class="app-body">
<div class="container">
<div class="">
<section
class="section text-media media--right text-media--cta paragraph--text-media pt-medium pb-medium"
>
<div class="row flex-reverse">
<div class="col-12 col-md-6 text-media__media">
<div class="js-media">
<div class="js-media-item">
<div class="media__media">
<picture>
<img src="https://picsum.photos/750/500" alt="alt text">
</picture>
<div class="media__media__desc">
<span class="description"> Koopweekend juni 2022 </span>
<span class="copyright">
<i class="fa-light fa-copyright"></i>
Stad Brugge
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 text-media__content">
<div class="text-media__text__wrapper">
<div class="text-media__text">
<h2 class="pb-small">Text/media</h2>
<div class="wysiwyg">
<p>Display: CTA</p>
<p>Media position: right</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
eget maximus sem, vitae commodo purus. Morbi odio enim,
interdum gravida tristique vel, cursus quis risus. Quisque
diam diam, volutpat id sapien a, gravida elementum purus.
Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean
quis tellus in mi vehicula iaculis nec vel est.
</p>
<a href="https://www.google.be" class="button button--small card__link" title="Go to google" aria-label="Go to google" target="_blank">
<span class="button__title">External link</span>
<div class="icon--btn-wrapper ms-3">
<i class="fa-solid fa-arrow-up-right"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section
class="section text-media media--left text-media--cta paragraph--text-media pt-medium pb-medium"
>
<div class="row">
<div class="col-12 col-md-6 text-media__media">
<div class="js-media">
<div class="js-media-item">
<div class="media__media">
<picture>
<img src="https://picsum.photos/750/500" alt="alt text">
</picture>
<div class="media__media__desc">
<span class="description">
Fotoshoot Wandelgids Oooh! Brugge
</span>
<span class="copyright">
<i class="fa-light fa-copyright"></i>
BRUGGE
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 text-media__content">
<div class="text-media__text__wrapper">
<div class="text-media__text">
<h2 class="pb-small">Text/media</h2>
<div class="wysiwyg">
<p>Display: CTA</p>
<p>Media position: left</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
eget maximus sem, vitae commodo purus. Morbi odio enim,
interdum gravida tristique vel, cursus quis risus. Quisque
diam diam, volutpat id sapien a, gravida elementum purus.
Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean
quis tellus in mi vehicula iaculis nec vel est.
</p>
<a href="https://www.google.be" class="button button--small card__link" title="Go to google" aria-label="Go to google">
<span class="button__title">Internal link</span>
<div class="icon--btn-wrapper ms-3">
<i class="fa-light fa-arrow-right-long icon"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section
class="section text-media media--right text-media--cta paragraph--text-media pt-medium pb-medium"
>
<div class="row flex-reverse">
<div class="col-12 col-md-6 text-media__media">
<div class="js-media">
<div class="js-media-item">
<div class="media__media">
<div class="js-media-video" data-embed="_xRUeJN-E8A">
<div
class="js-plyr-embed"
data-plyr-provider="youtube"
data-plyr-embed-id="_xRUeJN-E8A"
></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 text-media__content">
<div class="text-media__text__wrapper">
<div class="text-media__text">
<h2 class="pb-small">Text/Media</h2>
<div class="wysiwyg">
<p>Display: CTA</p>
<p>Media position: right</p>
<p>Youtube video implementation</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="section text-media media--left paragraph--text-media pt-medium pb-medium">
<div class="row">
<div class="col-12 col-md-6 text-media__media">
<div class="js-media">
<div class="js-media-item">
<div class="media__media">
<picture>
<img src="https://picsum.photos/750/500" alt="alt text">
</picture>
<div class="media__media__desc">
<span class="description"> Koopweekend juni 2022 </span>
<span class="copyright">
<i class="fa-light fa-copyright"></i>
Stad Brugge
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 text-media__content">
<div class="text-media__text__wrapper">
<div class="text-media__text">
<h2 class="pb-small">Text/media</h2>
<div class="wysiwyg">
<p>Display: normal</p>
<p>Media position: left</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
eget maximus sem, vitae commodo purus. Morbi odio enim,
interdum gravida tristique vel, cursus quis risus. Quisque
diam diam, volutpat id sapien a, gravida elementum purus.
Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean
quis tellus in mi vehicula iaculis nec vel est.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section text-media media--right paragraph--text-media pt-medium pb-medium">
<div class="row flex-reverse">
<div class="col-12 col-md-6 text-media__media">
<div class="js-media">
<div class="js-media-item">
<div class="media__media">
<picture>
<img src="https://picsum.photos/750/500" alt="alt text">
</picture>
<div class="media__media__desc">
<span class="description"> Koopweekend juni 2022 </span>
<span class="copyright">
<i class="fa-light fa-copyright"></i>
Stad Brugge
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6 text-media__content">
<div class="text-media__text__wrapper">
<div class="text-media__text">
<h2 class="pb-small">Text/media</h2>
<div class="wysiwyg">
<p>Display: normal</p>
<p>Media position: right</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
eget maximus sem, vitae commodo purus. Morbi odio enim,
interdum gravida tristique vel, cursus quis risus. Quisque
diam diam, volutpat id sapien a, gravida elementum purus.
Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean
quis tellus in mi vehicula iaculis nec vel est.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section text-media media--up paragraph--text-media pt-medium pb-medium">
<div class="row">
<div class="col-12 text-media__media">
<div class="js-media">
<div class="js-media-item">
<div class="media__media">
<picture>
<img src="https://picsum.photos/1300/866" alt="alt text">
</picture>
<div class="media__media__desc">
<span class="description"> Koopweekend juni 2022 </span>
<span class="copyright">
<i class="fa-light fa-copyright"></i>
Stad Brugge
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 section-mb text-media__content">
<div class="text-media__text__wrapper">
<div class="text-media__text">
<h2 class="pb-small">Text/media</h2>
<div class="wysiwyg">
<p>Display: normal</p>
<p>Media position: up</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
eget maximus sem, vitae commodo purus. Morbi odio enim,
interdum gravida tristique vel, cursus quis risus. Quisque
diam diam, volutpat id sapien a, gravida elementum purus.
Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean
quis tellus in mi vehicula iaculis nec vel est.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section text-media media--down paragraph--text-media pt-medium pb-medium">
<div class="row flex-column-reverse">
<div class="col-12 text-media__media">
<div class="js-media">
<div class="js-media-item">
<div class="media__media">
<picture>
<img src="https://picsum.photos/1300/866" alt="alt text">
</picture>
<div class="media__media__desc">
<span class="description"> Koopweekend juni 2022 </span>
<span class="copyright">
<i class="fa-light fa-copyright"></i>
Stad Brugge
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 section-mb text-media__content">
<div class="text-media__text__wrapper">
<div class="text-media__text">
<h2 class="pb-small">Text/media</h2>
<div class="wysiwyg">
<p>Display: normal</p>
<p>Media position: down</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
eget maximus sem, vitae commodo purus. Morbi odio enim,
interdum gravida tristique vel, cursus quis risus. Quisque
diam diam, volutpat id sapien a, gravida elementum purus.
Morbi in neque et nibh ornare iaculis at sit amet urna. Aenean
quis tellus in mi vehicula iaculis nec vel est.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Source:
../client/lib/components/text-media/_text-media.scss, line 1
3.15 #Organisms.UspList USP list
USP list organism.
Example
USP list
USP item title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
USP Item title with longer text
Lorem ipsum dolor sit amet consectetur adipiscing elit lacinia fermentum gravida mi, aenean cursus dapibus malesuada ante imperdiet auctor semper nibh nulla ligula.
USP item title
Lorem ipsum dolor sit amet consectetur adipiscing, elit nostra sollicitudin consequat netus.
USP item title
Curabitur nibh sociis pellentesque mus turpis inceptos augue, magnis convallis eros scelerisque tincidunt morbi, ridiculus mollis risus justo nostra nascetur.
Markup: lib/components/styleguide/organisms/usp.html
<div class="app-body">
<section id="anchor-10041" class="section paragraph--kpi-list pb-medium pt-medium">
<div class="row">
<div class="col-12">
<h2>
USP list
</h2>
<div class="kpi-list row gy-4">
<div class="kpi-item col-12 col-md-6 col-lg-4 col-xl-3">
<div class="kpi-item__content">
<div class="kpi-item__content__icon">
<i class="fa-regular fa-calendar-plus"></i>
</div>
<h3 class="kpi-item__content__title">
USP item title
</h3>
<div class="kpi-item__content__text wysiwyg">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</p>
</div>
</div>
</div>
<div class="kpi-item col-12 col-md-6 col-lg-4 col-xl-3">
<div class="kpi-item__content">
<div class="kpi-item__content__icon">
<i class="fa-regular fa-calendar-plus"></i>
</div>
<h3 class="kpi-item__content__title">
USP Item title with longer text
</h3>
<div class="kpi-item__content__text wysiwyg">
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit lacinia fermentum gravida mi, aenean cursus dapibus malesuada ante imperdiet auctor semper nibh nulla ligula.</p>
</div>
</div>
</div>
<div class="kpi-item col-12 col-md-6 col-lg-4 col-xl-3">
<div class="kpi-item__content">
<div class="kpi-item__content__icon">
<i class="fa-regular fa-calendar-plus"></i>
</div>
<h3 class="kpi-item__content__title">
USP item title
</h3>
<div class="kpi-item__content__text wysiwyg">
<p>Lorem ipsum dolor sit amet consectetur adipiscing, elit nostra sollicitudin consequat netus. </p>
</div>
</div>
</div>
<div class="kpi-item col-12 col-md-6 col-lg-4 col-xl-3">
<div class="kpi-item__content">
<div class="kpi-item__content__icon">
<i class="fa-regular fa-calendar-plus"></i>
</div>
<h3 class="kpi-item__content__title">
USP item title
</h3>
<div class="kpi-item__content__text wysiwyg">
<p>Curabitur nibh sociis pellentesque mus turpis inceptos augue, magnis convallis eros scelerisque tincidunt morbi, ridiculus mollis risus justo nostra nascetur.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Source:
../client/lib/components/kpi/_kpi.scss, line 1
3.16 #Organisms.Video Video
Video organism.
Example
Video organism
Markup: lib/components/styleguide/organisms/video.html
<div class="app-body">
<section class="container paragraph--video pt-medium pb-medium">
<div class="row">
<div class="col-12">
<h2 class="pb-small">Video organism</h2>
<div class="video js-media">
<div class="js-media-video" data-embed="_xRUeJN-E8A">
<div
class="js-plyr-embed"
data-plyr-provider="youtube"
data-plyr-embed-id="_xRUeJN-E8A"
></div>
</div>
</div>
</div>
</div>
</section>
</div>
Source:
../client/lib/components/video/_video.scss, line 1