Karty (cards) podstawowe
- Upewnij się, że wskaźnik fokusu jest widoczny na wszystkich elementach, które muszą być podświetlone (otrzymują fokus).
- Każdy
<img>, który dodasz do swojej strony musi mieć atrybutalt. Jeśli obrazek jest informacyjny, wpisz walttekst z treścią równoważną obrazowi. - Jeśli obrazek jest dekoracyjny lub zbędny w stosunku do ilustrowanego tekstu, ustaw
alt=""(pusty), aby przekazać użytkownikom technologii wspomagającej, że obrazek nie jest potrzebny do zrozumienia strony. - Unikaj używania ogólnych słów, takich jak „zdjęcie”, „obrazek” lub „ikona” jako fragmentu wartości
alt, ponieważ nie przekazują one użytkownikowi cennych treści. Bądź możliwie jak najbardziej opisowy. - Możesz dodać
class="visuallyhidden"z tekstem opisowym, aby nadać więcej kontekstu przyciskowi lub celowi łącza.
Zasoby
Wytyczne WCAG 2.1
1.1.1 Treść nietekstowa - Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z kilkoma wyjątkami. (Poziom A)
Uwaga: Jeśli zawartość nietekstowa jest czystą dekoracją, jest używana tylko do formatowania wizualnego, lub nie jest prezentowana użytkownikom, to nie potrzebuje alternatyw tekstowych.
1.4.3 Kontrast (minimalny) - Wizualna prezentacja tekstu lub obrazu tekstu posiada współczynnik kontrastu wynoszący przynajmniej 4.5:1, poza kilkoma wyjątkami (Poziom AA)
1.4.5 Obrazy tekstu - Jeśli wykorzystywane technologie mogą przedstawiać treść wizualnie, do przekazywania informacji wykorzystuje się tekst, a nie obraz tekstu, z kilkoma wyjątkami (Poziom AA)
2.4.7 Widoczny fokus - Każdy interfejs posiadający możliwość obsługi przy pomocy klawiatury ma tryb obsługi, w którym fokus klawiatury jest stale widoczny. (Poziom AA)
<section class="card">
<div class="card__link-wrapper">
<div class="card__image">{{ image }}</div>
<div class="card__title">
<a target="_blank" href="{{ link }}" class="card__title--link">{{ title }}</a>
</div>
</div>
</section>
Skopiowane!
<section class="card-grid">
<section class="card">
<div class="card__link-wrapper">
<div class="card__image"><img src="assets/butterfly.jpg" alt="Motyl Blue Morpho"></div>
<div class="card__title">
<a target="_blank" href="https://www.floridamuseum.ufl.edu/exhibits/butterfly-rainforest/id-guide/blue/" class="card__title--link">Blue Morpho</a>
</div>
</div>
</section>
<section class="card">
<div class="card__link-wrapper">
<div class="card__image"><img src="assets/gold-banded.jpg" alt="Motyl złocisty leśnik"></div>
<div class="card__title">
<a target="_blank" href="https://www.floridamuseum.ufl.edu/exhibits/butterfly-rainforest/id-guide/blue/" class="card__title--link">Złocisty leśnik</a>
</div>
</div>
</section>
<section class="card">
<div class="card__link-wrapper">
<div class="card__image"><img src="assets/starry.jpg" alt="Motyl Gwiaździsty krakers nocny"></div>
<div class="card__title">
<a target="_blank" href="https://www.floridamuseum.ufl.edu/exhibits/butterfly-rainforest/id-guide/blue/" class="card__title--link">Gwiaździsty krakers nocny</a>
</div>
</div>
</section>
<section class="card">
<div class="card__link-wrapper">
<div class="card__image"><img src="assets/lacewing.jpg" alt="Motyl Cethosia biblis"></div>
<div class="card__title">
<a target="_blank" href="https://www.floridamuseum.ufl.edu/exhibits/butterfly-rainforest/id-guide/red/" class="card__title--link">Cethosia biblis</a>
</div>
</div>
</section>
<section class="card">
<div class="card__link-wrapper">
<div class="card__image"><img src="assets/swallowtail.jpg" alt="Motyl Papilio palinurus"></div>
<div class="card__title">
<a target="_blank" href="https://www.floridamuseum.ufl.edu/exhibits/butterfly-rainforest/id-guide/green/" class="card__title--link">Papilio palinurus</a>
</div>
</div>
</section>
<section class="card">
<div class="card__link-wrapper">
<div class="card__image"><img src="assets/glasswing.jpg" alt="Motyl szklanoskrzydły"></div>
<div class="card__title">
<a target="_blank" href="https://www.floridamuseum.ufl.edu/exhibits/butterfly-rainforest/id-guide/gray-white/" class="card__title--link">Szklanoskrzydły</a>
</div>
</div>
</section>
</section>Skopiowane!
Gus Grissom
Astronaut, NASA
Virgil Ivan „Gus” Grissom (ur. 3 kwietnia 1926 w Mitchell, zginął 27 stycznia 1967 na przylądku Canaveral w pożarze kabiny statku Apollo 1) – amerykański astronauta, podpułkownik United States Air Force.
Więcej informacji
<section class="cards-bio cards-bio-list__item-wrapper {{ modifier_class }}{{ photo or use_placeholder_images ? ' with-image' }}">
{% if use_placeholder_images %}
<div class="cards-bio-list__image">
{% if photo %}
{{ photo }}
{% else %}
<div class="cards-bio-list__image-placeholder"></div>
{% endif %}
</div>
{% else %}
{% if photo %}
<div class="cards-bio-list__image">
{{ photo }}
</div>
{% endif %}
{% endif %}
<div class="cards-bio-list__content">
<div class="cards-bio__content-section">
{% if link %}
<h3 class="cards-bio-list__name">
<a href ="{{ link }}" class="cards-bio-list__name-link">{{ name }} {{ suffix }}</a>
</h3>
{% else %}
<h3 class="cards-bio-list__name">{{ name }} {{ suffix }}</h3>
{% endif %}
{% if title %}
<div class="cards-bio__content-item cards-bio-list__title">{{ title }}</div>
{% endif %}
</div>
{% if address %}
<div class="cards-bio__content-section">
<div class="cards-bio__content-item cards-bio__address">
{{ address }}
{% if phone %}
<div class="cards-bio__content-item cards-bio__phone">
{{ phone }}
</div>
{% endif %}
{% if email %}
<div class="cards-bio__content-item cards-bio__email">
<a href="mailto:{{ email }}">
<i class="fa fa-fw fa-envelope"></i>
{{ email }}
</a>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if brief_description or bio or cv_link %}
<div class="cards-bio__content-section">
{% if brief_description %}
<div class="cards-bio__content-item cards-bio-list__brief-description">
{{ brief_description }}
</div>
{% endif %}
{% if bio %}
<div class="cards-bio__content-item cards-bio-list__bio">
{{ bio }}
</div>
{% endif %}
{% if cv_link %}
<div class="cards-bio__content-item cards-bio-list__cv">
{{ cv_link }}
</div>
{% endif %}
</div>
{% endif %}
{% if external_link %}
<div class="cards-bio__content-section">
<h4 class="cards-bio__content-section-title">Więcej informacji</h4>
<div class="cards-bio__content-item cards-bio-list__more-info-link">
<i class="fa fa-fw fa-globe"></i>
{{ external_link }}
</div>
</div>
{% endif %}
</div>
</section>
Skopiowane!
<div class="directory directory-layout--photo-grid-name">
<ul class="directory__items">
<li class="directory directory-layout--photo-grid-name directory__item">
<section class="cards-bio cards-bio-grid__item-wrapper photo-grid-names">
<div class="cards-bio-grid__image">
<a href="#"><img src="assets/mae-jemison.jpg" alt="Mae Carol Jemison w pomarańczowym kombinezonie kosmicznym, trzymająca kask na boku."></a>
</div>
<div class="cards-bio-grid__content">
<h3 class="cards-bio-grid__name">
<a href="https://pl.wikipedia.org/wiki/Mae_Jemison">Mae Carol Jemison</a>
</h3>
<div class="cards-bio-grid__title">Astronautka, NASA</div>
<div class="cards-bio-grid__email">
<a href="mailto:email@email.com">email@email.com</a>
</div>
</div>
</section>
</li>
<li class="directory directory-layout--photo-grid-name directory__item">
<section class="cards-bio cards-bio-grid__item-wrapper photo-grid-names">
<div class="cards-bio-grid__image">
<a href="#"><img src="assets/gus-grissom.jpg" alt="Gus Grissom trzymający replikę rakiety kosmicznej z amerykańską flagą w tle"></a>
</div>
<div class="cards-bio-grid__content">
<h3 class="cards-bio-grid__name">
<a href="https://pl.wikipedia.org/wiki/Virgil_Grissom">Gus Grissom</a>
</h3>
<div class="cards-bio-grid__title">Astronauta, NASA</div>
<div class="cards-bio-grid__email">
<a href="mailto:email@email.com">email@email.com</a>
</div>
</div>
</section>
</li>
<li class="directory directory-layout--photo-grid-name directory__item">
<section class="cards-bio cards-bio-grid__item-wrapper photo-grid-names">
<div class="cards-bio-grid__image">
<a href="#"><img src="assets/tracy-caldwell.jpg" alt="Tracy Caldwell w pomarańczowym kombinezonie kosmicznym ze swoim sterem przed nimi"></a>
</div>
<div class="cards-bio-grid__content">
<h3 class="cards-bio-grid__name">
<a href="https://pl.wikipedia.org/wiki/Tracy_Caldwell_Dyson">Tracy Caldwell Dyson</a>
</h3>
<div class="cards-bio-grid__title">Astronautka, NASA</div>
<div class="cards-bio-grid__email">
<a href="mailto:email@email.com">email@email.com</a>
</div>
</div>
</section>
</li>
</ul>
<div>
</div>
</div>Skopiowane!
<div class="color-overlay-cards">
<div class="three-photos">
<div class="field-content">
<ul>
<li class="col">
<div class="highlight__image image-overlay blue-overlay">
<img src="https://www.placecage.com/350/500" alt="Losowo generowany potret sławnego Nica Caga.">
<div class="highlight__img-overlay">Nic Cage</div>
</div>
</li>
<li class="col">
<div class="highlight__image image-overlay green-overlay">
<img src="https://www.stevensegallery.com/350/500" alt="Losowo generowany potret sławnego Stevena Segala.">
<div class="highlight__img-overlay">Steven Segal</div>
</div>
</li>
<li class="col">
<div class="highlight__image image-overlay purple-overlay">
<img src="https://www.fillmurray.com/350/500" alt="Losowo generowany potret sławnego Billa Murray'a.">
<div class="highlight__img-overlay">Bill Murray</div>
</div>
</li>
</ul>
</div>
</div>
</div>Skopiowane!
<section class="cards cards--slideout section">
<div class="l-center">
<div class="cards__content">
<div class="cards__column">
<button id="flip1" class="cards__item toggleflip card effect__click" aria-controls="content">
<div class="cards__item-image card__front">
<div class="cards__item-image">
<img src="https://img.huffingtonpost.com/asset/scalefit_630_noupscale/58b859e81500002200abcd18.jpeg" width="225" height="126" alt="">
</div>
<div>
<div class="cards__item-title">Prawda czy fałsz:<br>Liściożery to drapieżniki.</div>
<div id="content" class="card__back">
<div class="cards__item-description">
<p>Fałsz!<br>Liściożery zjadają głównie pąki drzew, nowe pędy, owoce i liście drzewa Cecropia.</p>
</div>
</div>
</div>
</div>
</button>
</div>
<div class="cards__column">
<button id="flip2" class="cards__item toggleflip card effect__click" aria-controls="content">
<div class="cards__item-image card__front">
<div class="cards__item-image">
<img src="https://68.media.tumblr.com/tumblr_lh5y87vnHg1qeqc8to1_500.jpg" width="225" height="126" alt="">
</div>
<div>
<div class="cards__item-title">Prawda czy fałsz:<br>Liściożery żyją na drzewach.</div>
<div id="content" class="card__back">
<div class="cards__item-description">
<p>Prawda!<br>Liściożery są zwierzętami żyjącymi na drzewach w dżunglach Ameryki Środkowej i Południowej.</p>
</div>
</div>
</div>
</div>
</button>
</div>
<div class="cards__column">
<button id="flip3" class="cards__item toggleflip card effect__click" aria-controls="content">
<div class="cards__item-image card__front">
<div class="cards__item-image">
<img src="https://static.boredpanda.com/blog/wp-content/uploads/2016/10/Cute-sloths-320-580885a0d0510__700.jpg" width="225" height="126" alt="">
</div>
<div>
<div class="cards__item-title">Prawda czy fałsz:<br>Liściożery żyją krótko.</div>
<div id="content" class="card__back">
<div class="cards__item-description">
<p>Fałsz!<br>Liściożery mogą żyć na wolności do czterdziestu lat.</p>
</div>
</div>
</div>
</div>
</button>
</div>
<div class="cards__column">
<button id="flip4" class="cards__item toggleflip card effect__click" aria-controls="content">
<div class="cards__item-image card__front">
<div class="cards__item-image">
<img src="https://www.enchanting-costarica.com/wp-content/uploads/2015/09/Sloth-baby-being-weighed-in-plastic-basket-Costa-Rica-Credit-Sam-Trull-2014.jpg" width="225" height="126" alt="">
</div>
<div>
<div class="cards__item-title">Prawda czy fałsz:<br>Liściożery są związane z pancernikami.</div>
<div id="content" class="card__back">
<div class="cards__item-description">
<p>Prawda!<br>Liściożery należą do starożytnej grupy ssaków zwanych Xenarthra, które rozwijały się w izolacji około osiemdziesięciu milionów lat temu. </p>
</div>
</div>
</div>
</div>
</button>
</div>
</div>
</div>
</section>Skopiowane!
Prawda!
Leniwce są niezdarne na lądzie, ale są świetnymi pływakami.
Fałsz!
Leniwce mogą wydłużyć swoje języki od 10 do 12 cali z ust.
Fałsz!
Leniwce śpią tylko do dwunastu godzin na dobę.
Prawda!
Leniwce powoli trawią twarde liście, które jedzą - trawienie posiłku może trwać nawet do miesiąca.
<section class="cards cards--slideout section">
<div class="l-center">
<div class="cards__content">
<div class="cards__column">
<div class="cards__item">
<div class="cards__front">
<div class="cards__item-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Two_toed_sloth.JPG" width="225" height="126" alt="Leniwiec wiszący do góry nogami z gałęzi drzewa.">
</div>
<div class="cards__item-title">
<a href="#sloth1">Prawda czy fałsz:<br>Leniwce mogą pływać.</a>
</div>
</div>
<div class="cards__back">
<div class="cards__item-top">
</div>
<div class="cards__item-description">
<p id="#sloth1">Prawda!<br>Leniwce są niezdarne na lądzie, ale są świetnymi pływakami.</p>
</div>
<div class="cards__item-buttons buttons buttons--center">
<a href="https://www.thedodo.com/8-awesome-things-you-didnt-kno-668962865.html" class="button"><span class="visuallyhidden">Prawda!<br>Leniwce są niezdarne na lądzie, ale są świetnymi pływakami. </span>Czytaj więcej</a>
</div>
</div>
</div>
</div>
<div class="cards__column">
<div class="cards__item">
<div class="cards__front">
<div class="cards__item-image">
<img src="https://c1.staticflickr.com/5/4064/4539519942_6d974aed83.jpg" width="225" height="126" alt="Zbliżenie leniwca chwytającego za pień drzewa.">
</div>
<div class="cards__item-title">
<a href="#sloth2">Prawda czy fałsz:<br>Leniwce mają krótkie języki.</a>
</div>
</div>
<div class="cards__back">
<div class="cards__item-top">
</div>
<div class="cards__item-description">
<p id="#sloth2">Fałsz!<br>Leniwce mogą wydłużyć swoje języki od 10 do 12 cali z ust.</p>
</div>
<div class="cards__item-buttons buttons buttons--center">
<a href="https://www.animalfactsencyclopedia.com/Sloth-facts.html" class="button"><span class="visuallyhidden">Fałsz!<br>Leniwce mogą wydłużyć swoje języki od 10 do 12 cali z ust. </span>Czytaj więcej</a>
</div>
</div>
</div>
</div>
<div class="cards__column">
<div class="cards__item">
<div class="cards__front">
<div class="cards__item-image">
<img src="https://vignette2.wikia.nocookie.net/sloths/images/b/b3/Buttercup1.jpg/revision/latest?cb=20140206010122" width="225" height="126" alt="Leniwiec siedzący w koszu wydaje się uśmiechać.">
</div>
<div class="cards__item-title">
<a href="#sloth3">Prawda czy fałsz:<br>Leniwce śpią dwadzieścia godzin dziennie.</a>
</div>
</div>
<div class="cards__back">
<div class="cards__item-top">
</div>
<div class="cards__item-description">
<p id="#sloth3">Fałsz!<br>Leniwce śpią tylko do dwunastu godzin na dobę.</p>
</div>
<div class="cards__item-buttons buttons buttons--center">
<a href="https://www.slothsanctuary.com/2013/02/sleeping-sloths" class="button"><span class="visuallyhidden">Fałsz!<br>Leniwce śpią tylko do dwunastu godzin na dobę. </span>Czytaj więcej</a>
</div>
</div>
</div>
</div>
<div class="cards__column">
<div class="cards__item">
<div class="cards__front">
<div class="cards__item-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2e/MC_Drei-Finger-Faultier.jpg" width="225" height="126" alt="Leniwiec przytulający się do drzewa w lesie podczas deszczu.">
</div>
<div class="cards__item-title">
<a href="#sloth4">Prawda czy fałsz:<br>Leniwce mają czteroczęściowe żołądki.</a>
</div>
</div>
<div class="cards__back">
<div class="cards__item-top">
</div>
<div class="cards__item-description">
<p id="#sloth4">Prawda!<br>Leniwce powoli trawią twarde liście, które jedzą - trawienie posiłku może trwać nawet do miesiąca.</p>
</div>
<div class="cards__item-buttons buttons buttons--center">
<a href="https://totescute.com/what-do-sloths-eat" class="button"><span class="visuallyhidden">Prawda!<br>Leniwce powoli trawią twarde liście, które jedzą - trawienie posiłku może trwać nawet do miesiąca. </span>Czytaj więcej</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Skopiowane!
Przystając pod lasem w śnieżny wieczór
Robert Frost
Wiem, czyj to las: znam właścicieli.
Ich dom jest we wsi; gdzieżby mieli
Dojrzeć mnie, gdy spoglądam w mroku
W ich las, po brzegi pełen bieli.
Koń nie wie, czemu go w pół kroku
Wstrzymałem: żadnych zagród wokół;
Las, lód, jeziora - tylko tyle
W ten najciemniejszy wieczór roku.
Dzwonkiem uprzęży koń co chwilę
Pyta, czy aby się nie mylę.
Tylko ten brzęk - i świst zawiei
W sypiącym gęsto białym pyle.
Ciągnie mnie w mroczną głąb tej kniei,
Lecz woła trzeźwy świat nadziei
I wiele mil od snu mnie dzieli,
I wiele mil od snu mnie dzieli.
<section class="cards highlight highlight--full section">
<div class="l-center">
<div class="highlight__content">
<div class="highlight__header">
<h2 class="highlight__title">Przystając pod lasem w śnieżny wieczór</h2>
<h3 class="highlight__sub-title">Robert Frost</h3>
</div>
<div class="highlight__description">
<p>Wiem, czyj to las: znam właścicieli.<br>
Ich dom jest we wsi; gdzieżby mieli<br>
Dojrzeć mnie, gdy spoglądam w mroku<br>
W ich las, po brzegi pełen bieli.</p>
<p>Koń nie wie, czemu go w pół kroku<br>
Wstrzymałem: żadnych zagród wokół;<br>
Las, lód, jeziora - tylko tyle<br>
W ten najciemniejszy wieczór roku.</p>
<p>Dzwonkiem uprzęży koń co chwilę<br>
Pyta, czy aby się nie mylę.<br>
Tylko ten brzęk - i świst zawiei<br>
W sypiącym gęsto białym pyle.</p>
<p>Ciągnie mnie w mroczną głąb tej kniei,<br>
Lecz woła trzeźwy świat nadziei<br>
I wiele mil od snu mnie dzieli,<br>
I wiele mil od snu mnie dzieli.</p>
</div>
</div>
</div>
</section>Skopiowane!
Wyróżniona karta z dużym zdjęciem po lewej stronie
In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Wyróżniona karta z małym zdjęciem po lewej stronie
In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<section class="highlight section highlight--left">
<div class="l-center">
<div class="highlight__image">
<img src="https://placebear.com/500/400" alt="Brązowy niedźwiedź fruwający na skałach w rzece.">
</div>
<div class="highlight__content">
<div class="highlight__header">
<h2 class="highlight__title">Wyróżniona karta z dużym zdjęciem po lewej stronie</h2>
</div>
<div class="highlight__description">
<p>In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>
</p></div>
<a href="#" aria-label="Dowiedz się więcej o czarnych niedźwiedziach" class="read-more">Opcjonalnie łącze Dowiedz się więcej</a>
</div>
</div>
</section>
<section class="highlight section highlight--left-small">
<div class="l-center">
<div class="highlight__image">
<img src="https://placebear.com/400/300" alt="Brązowy niedźwiedź fruwający na skałach w rzece.">
</div>
<div class="highlight__content">
<div class="highlight__header">
<h2 class="highlight__title">Wyróżniona karta z małym zdjęciem po lewej stronie</h2>
</div>
<div class="highlight__description">
<p>In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>
</p></div>
<a href="#" aria-label="Dowiedz się więcej o czarnych niedźwiedziach" class="read-more">Opcjonalnie łącze Dowiedz się więcej</a>
</div>
</div>
</section>Skopiowane!
Wyróżniona karta z dużym zdjęciem po prawej stronie
In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Wyróżniona karta z małym zdjęciem po prawej stronie
In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<section class="highlight section highlight--right">
<div class="l-center">
<div class="highlight__image">
<img src="https://placebear.com/500/400" alt="Brązowy niedźwiedź fruwający na skałach w rzece.">
</div>
<div class="highlight__content">
<div class="highlight__header">
<h2 class="highlight__title">Wyróżniona karta z dużym zdjęciem po prawej stronie</h2>
</div>
<div class="highlight__description">
<p>In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>
</p></div>
<a href="#" aria-label="Dowiedz się więcej o czarnych niedźwiedziach" class="read-more">Opcjonalnie łącze Dowiedz się więcej</a>
</div>
</div>
</section>
<section class="highlight section highlight--right-small">
<div class="l-center">
<div class="highlight__image">
<img src="https://placebear.com/400/300" alt="Brązowy niedźwiedź fruwający na skałach w rzece.">
</div>
<div class="highlight__content">
<div class="highlight__header">
<h2 class="highlight__title">Wyróżniona karta z małym zdjęciem po prawej stronie</h2>
</div>
<div class="highlight__description">
<p>In convallis euismod nibh a ornare. Integer vitae ultrices lectus, quis semper leo. Sed tempus massa vel arcu dapibus tempus. Quisque dignissim ac diam et auctor. In hac habitasse platea dictumst. Vestibulum ut tellus eu magna varius tempus. Sed vitae scelerisque odio, ut tempor dolor. Vivamus non ultrices nisl. Donec maximus vehicula consequat. Integer sed fermentum nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><p>
</p></div>
<a href="#" aria-label="Dowiedz się więcej o czarnych niedźwiedziach" class="read-more">Opcjonalnie łącze Dowiedz się więcej</a>
</div>
</div>
</section>Skopiowane!