3.14 #Organisms.TextMedia Text/media
Text/media organism.
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.
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
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.
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.
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.
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>
../client/lib/components/text-media/_text-media.scss, line 1