Card

Card links are tricky for accessibility. When the entire card is a link, screen readers read all the content of the card as if it's the link's title.

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Scripts

No script needed!

Add these before the </body> tag in your site/page settings

GSAP
 <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
Card component
<script src="https://cdn.jsdelivr.net/npm/socks-ui@{v}/dist/card.js"></script>

Features

A card that when focused on by screen readers, will only read the title as the link title. The user can then choose to read the rest of the content separately.

Anatomy

  • Card
    • Link
      • Title
    • Paragraph

Usage

  • Copy the element from above or recreate the structure (make sure the card is site to position: relative).
  • Add this CSS into a global embed or the <head> of your project
/**
* Cards
*/
/* Makes cards accessible (Link should only wrap the title. Card must be set to "relative") */
.card_link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* Removes focus state from actual link */
.card_link:focus {
  outline: none
}
/* Creates focus state on the card instead */
.card:has(.card_link:focus-visible) {
  outline: 2px solid var(--palette--blue)
}
/* Removes it in designer mode for easier editing (Delete this if you add the script to the head of your page) */
.wf-design-mode .card_link::before { content: none; }

Make sure to replace the class names in the code if you have different class names. Here we use card and card_link

On the published site, the whole card is clickable and it leads to the link.

In the designer, this is disabled so that you can still click all the individual elements inside of the card.

Advanced

Events

No custom events are exported for this component.

Methods

No custom methods are exported for this component.

Use Cases

No special use cases added yet
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"44fa0002-6282-2602-2c6b-f2519e7bb46e","type":"Block","tag":"div","classes":["2c9c6853-e7e0-60ca-8528-531f770d07c8"],"children":["493d5f4f-6daf-d654-181d-e1919c98d41b","aad4b8ba-a933-454d-fa56-da305fbd921a"],"data":{"text":false,"tag":"div"}},{"_id":"493d5f4f-6daf-d654-181d-e1919c98d41b","type":"Block","tag":"div","classes":["ab7eadac-9e9c-334f-c9c1-55cf1b5545f1"],"children":["b18870b0-8a1b-0a62-d0f7-be736a42f03f"],"data":{"text":false,"tag":"div"}},{"_id":"b18870b0-8a1b-0a62-d0f7-be736a42f03f","type":"Link","tag":"a","classes":["d33a787e-a671-3f52-e430-bd194c91fcc0"],"children":["26e5de6b-fbcc-685d-7a2c-254abd6c37d0"],"data":{"button":false,"block":"inline","link":{"mode":"external","url":"#"}}},{"_id":"26e5de6b-fbcc-685d-7a2c-254abd6c37d0","type":"Heading","tag":"h3","classes":[],"children":["9c8eb621-dd93-3bf0-64df-c4594b8eded8"],"data":{"tag":"h3"}},{"_id":"9c8eb621-dd93-3bf0-64df-c4594b8eded8","text":true,"v":"Blog title"},{"_id":"aad4b8ba-a933-454d-fa56-da305fbd921a","type":"Paragraph","tag":"p","classes":[],"children":["9add8608-93c5-2509-b224-23ad260ca9a8"]},{"_id":"9add8608-93c5-2509-b224-23ad260ca9a8","text":true,"v":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere."}],"styles":[{"_id":"2c9c6853-e7e0-60ca-8528-531f770d07c8","fake":false,"type":"class","name":"card","namespace":"","comb":"","styleLess":"position: relative; padding-top: 2rem; padding-right: 2rem; padding-bottom: 2rem; padding-left: 2rem; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(169, 3.57%, 30.25%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(169, 3.57%, 30.25%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(169, 3.57%, 30.25%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(169, 3.57%, 30.25%, 1.00); border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; transition-property: border-color; transition-duration: 200ms; transition-timing-function: ease;","variants":{"main_hover":{"styleLess":"border-top-color: #00ff84; border-right-color: #00ff84; border-bottom-color: #00ff84; border-left-color: #00ff84;"}},"children":[],"createdBy":"5de3f22e747d41cf4377aef1","origin":null,"selector":null},{"_id":"ab7eadac-9e9c-334f-c9c1-55cf1b5545f1","fake":false,"type":"class","name":"title-wrapper","namespace":"","comb":"","styleLess":"margin-bottom: 1rem;","variants":{},"children":["a281b6f4-25b4-4cab-f547-191a57c3a56c","e6ea647b-2d13-1d07-407b-083582c4ef9f","5885d344-1792-81f5-58d3-2e57fcaca424","631a694f-19e0-b86f-f047-c753a7211cce"],"createdBy":"64f4c4cdbe566b5a0114b6d3","origin":null,"selector":null},{"_id":"d33a787e-a671-3f52-e430-bd194c91fcc0","fake":false,"type":"class","name":"card_link","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5de3f22e747d41cf4377aef1","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}