Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Accessible Card Focus Shadow

Solution: Accessible Card Focus Shadow

Let’s add a prominent custom focus shadow to a clickable card for better accessibility.

We'll cover the following...

Problem description

Given an HTML page with a card element <a class="accessible-card" href="#"> (which acts as a clickable card), write CSS to meet the following requirements:

  • The card should have a soft box-shadow and ...