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.
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.
Add these before the </body> tag in your site/page settings
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/socks-ui@{v}/dist/card.js"></script>
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.
- 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.
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}}
