Semantic Clickable Cards using HTML, CSS, and JavaScript

Shared by
Published

Cards are a common design component & often allow users the ability to click anywhere on them. While this is a good UX, it's often implemented incorrectly. Learn how to create semantic clickable cards with this great article by Christian Heilmann.

In this tutorial we’ll create a clickable card interface in 50 lines of CSS and 11 lines of JavaScript.

Card component requirements

Though it’s a simple design component, its important when building cards that they are semantic and in turn, accessible. Here’s a typical card requirements list looks like:

  • They should have headings and text and link to another document
  • You should be able to click anywhere on the card to go to the other document
  • Except, there could also be inline links in text that should go to another document
  • And they should have a button to close them

Semantic HTML

<ul class="fullclick">
  <li>
    <h2>Dogs</h2>
    <p>
      Dogs are excellent, and good people. If want to browse dogs
      by breed, check <a href="https://codepo8.github.io/dog-browser/">
      The dog browser</a>. Almost all dogs are good boys and girls. 
    </p>
    <a href="dogs.html" class="main">More dog news</a>
    <button title="click to close" aria-label="click to close">x</button>
  </li>
  <li>
    <h2>Wombats</h2>
    <p>
      Wombats are cute as buttons and digging machines. They look always
      chill and jolly, but aren't a good idea to keep in the house.
    </p>
    <a href="wombat.html" class="main">More wombat info</a>
    <button title="click to close" aria-label="click to close">x</button>
  </li>
</ul>

The example card HTML above produces an unordered list that allows you to easily style it and will also tell screenreaders that the items are linked. It will even announce “1 of 2”, “2 of 2” and so on. Then using a button with an aria-label to close the card makes it keyboard accessible and screenreaders won’t read “button x” which doesn’t give much information.

Making the card clickable

.fullclick li {
  list-style: none;
  margin: 1em 0;
  padding: 20px 10px;
  background: #2b2b2b;
  position: relative;
}

.fullclick a.main {
  color: #85baff;
  text-align: right;
  display: block;
  z-index: 1;
}

.fullclick li a.main::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: ' ';
}

The CSS above positions each list item relative to make sure all positioned elements are contained in it. We then create an overlay over the whole list item that links to the document works with CSS generated content. Setting a z-index of 1 makes sure this covers all elements without positioning.

Join the conversation.

Your email address will not be published. Required fields are marked *

All comments posted on 'Semantic Clickable Cards using HTML, CSS, and JavaScript' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.