Basic Card
- Make sure you have tabbing focus indicators for all elements that need to be highlighted.
- Every
<img>you add to your site needs to have an alt attribute. If the image is informational, set thealtequal to a descriptive alternative for that image. - If the image is decorative or redundant to adjacent text, set
alt="", which conveys to assistive technology users that the image isn’t necessary for understanding the page. - Avoid using generic strings like photo, image, or icon as
altvalues, as they don’t communicate valuable content to the user. Be as descriptive as possible. - You can add
class="visuallyhidden"with descriptive text to give more context to a button or link's purpose.
WCAG 2.1 Guidelines
1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)
Note: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.
1.4.3 Contrast (Minimum) - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (some exceptions). (Level AA)
1.4.5 Images of Text - If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text (some exceptions). (Level AA)
2.4.7 Focus Visible - Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level 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>
Copied!
<section class="card-grid">
<section class="card">
<div class="card__link-wrapper">
<div class="card__image"><img src="../assets/butterfly.jpg" alt="Blue Morpho butterfly"></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="Gold-banded Forester butterfly"></div>
<div class="card__title">
<a target="_blank" href="https://www.floridamuseum.ufl.edu/exhibits/butterfly-rainforest/id-guide/blue/" class="card__title--link">Gold-banded Forester</a>
</div>
</div>
</section>
<section class="card">
<div class="card__link-wrapper">
<div class="card__image"><img src="../assets/starry.jpg" alt="Starry Night Cracker butterfly"></div>
<div class="card__title">
<a target="_blank" href="https://www.floridamuseum.ufl.edu/exhibits/butterfly-rainforest/id-guide/blue/" class="card__title--link">Starry Night Cracker</a>
</div>
</div>
</section>
<section class="card">
<div class="card__link-wrapper">
<div class="card__image"><img src="../assets/lacewing.jpg" alt="Red Lacewing butterfly"></div>
<div class="card__title">
<a target="_blank" href="https://www.floridamuseum.ufl.edu/exhibits/butterfly-rainforest/id-guide/red/" class="card__title--link">Red Lacewing</a>
</div>
</div>
</section>
<section class="card">
<div class="card__link-wrapper">
<div class="card__image"><img src="../assets/swallowtail.jpg" alt="Emerald Swallowtail butterfly"></div>
<div class="card__title">
<a target="_blank" href="https://www.floridamuseum.ufl.edu/exhibits/butterfly-rainforest/id-guide/green/" class="card__title--link">Emerald Swallowtail</a>
</div>
</div>
</section>
<section class="card">
<div class="card__link-wrapper">
<div class="card__image"><img src="../assets/glasswing.jpg" alt="Glasswing butterfly"></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">Glasswing</a>
</div>
</div>
</section>
</section>Copied!
Gus Grissom
Astronaut, NASA
Lieutenant Colonel Virgil Ivan (Gus) Grissom (April 3, 1926 – January 27, 1967) was one of the original NASA Project Mercury astronauts, a United States Air Force test pilot, and a mechanical engineer. He was the second American to fly in space, and the first member of the NASA Astronaut Corps to fly in space twice.
More Information
<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">More Information</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>
Copied!
<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 in an orange space suit holding their helmet to their side"></a>
</div>
<div class="cards-bio-grid__content">
<h3 class="cards-bio-grid__name">
<a href="https://en.wikipedia.org/wiki/Mae_Jemison">Mae Carol Jemison</a>
</h3>
<div class="cards-bio-grid__title">Astronaut, 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 holding replica space rocket with American flag in the background"></a>
</div>
<div class="cards-bio-grid__content">
<h3 class="cards-bio-grid__name">
<a href="https://en.wikipedia.org/wiki/Gus_Grissom">Gus Grissom</a>
</h3>
<div class="cards-bio-grid__title">Astronaut, 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 in an orange space suit with their helment in front of them"></a>
</div>
<div class="cards-bio-grid__content">
<h3 class="cards-bio-grid__name">
<a href="https://en.wikipedia.org/wiki/Tracy_Caldwell_Dyson">Tracy Caldwell Dyson</a>
</h3>
<div class="cards-bio-grid__title">Astronaut, 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>Copied!
<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="Randomly generated image of the zany Nic Cage.">
<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="Randomly generated photo of Steven Segal.">
<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="randomly generated image of the fabulous Bill Murray.">
<div class="highlight__img-overlay">Bill Murray</div>
</div>
</li>
</ul>
</div>
</div>
</div>Copied!
<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">True or False:<br>Sloths are carnivores.</div>
<div id="content" class="card__back">
<div class="cards__item-description">
<p>False!<br>Sloths mainly eat the tree buds, new shoots, fruit and leaves, of the Cecropia tree.</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">True or False:<br>Sloths live in trees.</div>
<div id="content" class="card__back">
<div class="cards__item-description">
<p>True!<br>Sloths are tree-dwelling animals, they are found in the jungles of Central and South America.</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">True or False:<br>Sloths have a short lifespan.</div>
<div id="content" class="card__back">
<div class="cards__item-description">
<p>False!<br>Sloths can live up to forty years in the wild.</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">True or False:<br>Sloths are related to armadillos.</div>
<div id="content" class="card__back">
<div class="cards__item-description">
<p>True!<br>Sloths belong to an ancient group of mammals called Xenarthra, which evolved in isolation around eighty million years ago.</p>
</div>
</div>
</div>
</div>
</button>
</div>
</div>
</div>
</section>Copied!
True!
Sloths are clumsy on land but are great swimmers.
False!
Sloths can extend their tongues 10 to 12 inches out of their mouths.
False!
Sloths only sleep up to twelve hours a day.
True!
Sloths slowly digest the tough leaves they eat - it can take up to a month for them to digest a meal.
<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="A sloth hanging upside down from a tree branch.">
</div>
<div class="cards__item-title">
<a href="#sloth1">True or False:<br>Sloths can swim.</a>
</div>
</div>
<div class="cards__back">
<div class="cards__item-top">
</div>
<div class="cards__item-description">
<p id="#sloth1">True!<br>Sloths are clumsy on land but are great swimmers.</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">True!<br>Sloths are clumsy on land but are great swimmers. </span>Learn more</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="Close-up of a sloth gripping a tree trunk.">
</div>
<div class="cards__item-title">
<a href="#sloth2">True or False:<br>Sloths have short tongues.</a>
</div>
</div>
<div class="cards__back">
<div class="cards__item-top">
</div>
<div class="cards__item-description">
<p id="#sloth2">False!<br>Sloths can extend their tongues 10 to 12 inches out of their mouths.</p>
</div>
<div class="cards__item-buttons buttons buttons--center">
<a href="https://www.animalfactsencyclopedia.com/Sloth-facts.html" class="button"><span class="visuallyhidden">False!<br>Sloths can extend their tongues ten to twelve inches out of their mouths. </span>Learn more</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://i.natgeofe.com/n/524ad16b-2a2b-479f-a811-dc31ace57fa8/02_slothlove_leaves.jpg" width="225" height="126" alt="Three sloths faces that seem to be smiling.">
</div>
<div class="cards__item-title">
<a href="#sloth3">True or False:<br>Sloths sleep twenty hours a day.</a>
</div>
</div>
<div class="cards__back">
<div class="cards__item-top">
</div>
<div class="cards__item-description">
<p id="#sloth3">False!<br>Sloths only sleep up to twelve hours a day.</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">False!<br>Sloths only sleep up to twelve hours a day. </span>Learn more</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="Sloth hugging a tree in the rainforest.">
</div>
<div class="cards__item-title">
<a href="#sloth4">True or False:<br>Sloths have four-part stomachs.</a>
</div>
</div>
<div class="cards__back">
<div class="cards__item-top">
</div>
<div class="cards__item-description">
<p id="#sloth4">True!<br>Sloths slowly digest the tough leaves they eat - it can take up to a month for them to digest a meal.</p>
</div>
<div class="cards__item-buttons buttons buttons--center">
<a href="https://kids.nationalgeographic.com/5-reasons-why/article/5-reasons-sloths-are-spectacular" class="button"><span class="visuallyhidden">True!<br>Sloths slowly digest the tough leaves they eat. It can take up to a month for them to digest a meal. </span>Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Copied!
Stopping by Woods on a Snowy Evening
Robert Frost
Whose woods these are I think I know.
His house is in the village, though;
He will not see me stopping here
To watch his woods fill up with snow.
My little horse must think it queer
To stop without a farmhouse near
Between the woods and frozen lake
The darkest evening of the year.
He gives his harness bells a shake
To ask if there is some mistake.
The only other sound's the sweep
Of easy wind and downy flake.
The woods are lovely, dark, and deep.
But I have promises to keep,
And miles to go before I sleep,
And miles to go before I sleep.
<section class="cards highlight highlight--full section">
<div class="l-center">
<div class="highlight__content">
<div class="highlight__header">
<h2 class="highlight__title">Stopping by Woods on a Snowy Evening</h2>
<h3 class="highlight__sub-title">Robert Frost</h3>
</div>
<div class="highlight__description">
<p>Whose woods these are I think I know.<br>
His house is in the village, though;<br>
He will not see me stopping here<br>
To watch his woods fill up with snow.<br><br>
My little horse must think it queer<br>
To stop without a farmhouse near<br>
Between the woods and frozen lake<br>
The darkest evening of the year.<br><br>
He gives his harness bells a shake<br>
To ask if there is some mistake.<br>
The only other sound's the sweep<br>
Of easy wind and downy flake.<br><br>
The woods are lovely, dark, and deep.<br>
But I have promises to keep,<br>
And miles to go before I sleep,<br>
And miles to go before I sleep.<p>
</div>
</div>
</div>
</section>Copied!
Highlight Card Left with Large Photo
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.
Highlight Card Left with Small Photo
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="Brown bear frolicing on rocks in the river.">
</div>
<div class="highlight__content">
<div class="highlight__header">
<h2 class="highlight__title">Highlight Card Left with Large Photo</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="Learn more about black bears" class="read-more">Optional Read More Link</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="Brown bear fishing for salmon in a river.">
</div>
<div class="highlight__content">
<div class="highlight__header">
<h2 class="highlight__title">Highlight Card Left with Small Photo</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="Learn more about black bears" class="read-more">Optional Read More Link</a>
</div>
</div>
</section>Copied!
Highlight Card Right with Large Photo
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.
Highlight Card Right with Small Photo
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="Brown bear frolicing on rocks in the river.">
</div>
<div class="highlight__content">
<div class="highlight__header">
<h2 class="highlight__title">Highlight Card Right with Large Photo</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="Learn more about black bears" class="read-more">Optional Read More Link</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="Brown bear fishing for salmon in a river.">
</div>
<div class="highlight__content">
<div class="highlight__header">
<h2 class="highlight__title">Highlight Card Right with Small Photo</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="Learn more about black bears" class="read-more">Optional Read More Link</a>
</div>
</div>
</section>Copied!