<!-- start card -->
<a href="page-1.html" class="card" id="card--verbose">
<h2 class="card__title">
<span class="card__link">
<span class="card__link-inner card__title-icon-wrapper">
<span class="card__title-icon far fa-frown-open" aria-hidden="true"></span>
Verbose card link
</span>
</span>
</h2>
<img class="card__img" src="http://via.placeholder.com/400x300/333333/ffffff" alt="Placeholder image which reads 400x300.">
<p class="card__date">
<abbr title="Saturday">Sat</abbr> 05.09.2020</p>
<p class="card__description">An HTML5 block link wraps the card's contents. This creates verbose link output in screen readers.</p>
<h3 class="visually-hidden">Tagged as</h3>
<ul class="card__tags">
<li class="card__tag">Tag 1</li>
<li class="card__tag">Tag 2</li>
<li class="card__tag">Tag 3</li>
</ul>
</a>
<!-- end card -->
/* colours */
:root {
--color-darkgrey: rgba(0, 0, 0, 0.7);
--color-midgrey: rgba(0, 0, 0, 0.6);
--color-grey: rgba(0, 0, 0, 0.25);
--color-yellow: rgba(255, 255, 0, 0.5);
--color-pink: rgba(255, 0, 255, 0.25);
--color-blue: rgba(0, 255, 255, 0.25);
--color-linkblue: rgba(0, 100, 150, 1);
}
/* card list */
.card-list {
&__title {
font-size: 3em;
font-weight: normal;
margin: 0.25em 0;
}
&__items,
&__item {
list-style: none;
padding: 0;
margin: 0;
}
&__items {
display: flex;
flex-direction: row;
}
&__item {
margin-right: 1em;
}
}
/* card */
.card {
position: relative; /* for a.card__link positioning */
font-family: serif;
text-decoration: none;
background-color: var(--color-white);
color: #000;
display: flex; // to give us control over visual ordering
flex-direction: column; // stack child elements vertically
padding: 1em;
border: 1px dotted var(--color-darkgrey);
box-shadow: 3px 3px rgba(0, 0, 0, 0.05);
width: 17em;
&:focus, // old Edge
&:focus-within {
outline: 0.25em solid var(--color-linkblue);
outline-offset: 0.1em;
.card__link--block {
outline: none; // only show one outline - on the parent card
}
}
> * {
order: 2; /* display everything else after the elements with order 0 or 1 */
}
// date
&__date {
order: 1; /* second, above heading */
font-family: sans-serif;
font-size: 0.8em;
text-transform: uppercase;
color: var(--color-midgrey);
margin: 0 0 0.25em;
}
// description
&__description {
font-size: 1.1em;
color: var(--color-dark-grey);
}
// image
&__img {
order: 0; /* first, above date */
display: block;
width: calc(100% + 1em);
height: auto;
margin: -0.5em -0.5em 1em;
}
// link
&__link {
color: var(--color-linkblue);
&--block {
&::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
}
&__link-inner {
text-decoration: underline;
a.card:hover &,
a.card__link:hover & {
text-decoration: none;
}
}
// tags, non-clickable
&__tags,
&__tag {
display: inline-block;
padding: 0;
margin: 0;
font-size: 1em;
}
&__tag {
font-family: sans-serif;
font-size: 0.75em;
text-transform: uppercase;
border: 1px solid var(--color-grey);
padding: 0.25em 0.4em 0.15em;
margin-right: 0.5em;
&:nth-child(1) {
background-color: var(--color-yellow);
}
&:nth-child(2) {
background-color: var(--color-pink);
}
&:nth-child(3) {
background-color: var(--color-blue);
}
}
// title, contains link in non-verbose variant
&__title {
font-size: 2em;
font-weight: normal;
margin: 0;
}
&__title-icon-wrapper {
position: relative; // note this element is inside the non-verbose link, to prevent the relative context being changed
display: inline-block;
padding-left: 1.1em;
}
&__title-icon {
position: absolute;
left: 0;
font-size: 0.9em;
top: 0.2em;
}
}
.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
abbr {
text-decoration: none;
cursor: help;
}
View Compiled
This Pen doesn't use any external CSS resources.