Styleguide – Cards

Accessibility Recipes

ACSS - Accessibility Recipes

@clickable-parent

This recipe mirrors the .clickable-parent utility class. It expands the clickable area of a heading to the entire card/parent.

/* Begin Clickable Parent
Ensure this is placed on the clickable parent element. */
%root%:has(a) {
position: relative;
}
 
/* Configure your selector if you have more than one link */
%root% a::after {
content: “”;
position: absolute;
inset: 0;
z-index: 10;
}
 
/* Remove effect in builder.
Set target.
Bricks = .bricks-area */
.target %root% a::after {
content: “”;
position: relative;
}
 
/* End Clickable Parent */

@focus-parent

This recipe mirrors the .focus-parent utility class. It removes focus styling from the internal links and applies the focus indication to the parent element.

/* Begin Focus Parent */
%root%:focus-within:not(:has(:focus-visible)) {
outline: none;
outline-offset: 0;
box-shadow: none;
}
 
%root%:focus-within {
outline: var(–focus-width) solid var(–focus-color);
outline-offset: var(–focus-offset);
}
 
%root% :focus {
outline: none !important;
box-shadow: none !important;
}
 
/* End Focus Parent */

I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.
Here goes your text ... Select any part of your text to access the formatting toolbar.
Tafel met diagrammen op papier en laptop

Example List With Utility Classes

Steps:

  • Set position:relative on the parent (card)
  • Add .clickable-parent on the heading
  • Add .focus-parent on the card
Video: Stop Making This BIG Mistake With Clickable Cards

  • I am a heading

    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Text link

  • I am a heading

    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Text link

  • I am a heading

    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Text link

Example List With Custom Classes 

When using custom classes, there are several solutions. They depend upon where you want to add the CSS:

  1. In the BricksBuilder CSS panel
  2. In the ACSS SCSS panel 

Code for BricksBuilder CSS panel

/* Clickable Parent */ 
%root% {
position: relative;
}

%root%__heading a:after {
content: '';
position: absolute;
inset: 0;
display: flex;
z-index: 1;
}

%root%:focus-within :focus {
outline: none!important;
box-shadow: none!imporant;
}

%root%:focus-within {
box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
}

Steps:

  • Set position:relative on the parent (card)
  • Add the following custom code on the card class:
%root% {
  position: relative;
}

%root% h3 a:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

%root%:focus-within {
  box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
}
%root%:focus-within :focus {
  box-shadow: none!important;
  outline: none!important;
}

  • I am a heading

    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Text link

  • I am a heading

    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Text link

  • I am a heading

    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Here goes your text ... Select any part of your text to access the formatting toolbar.
    Text link

Here goes your text ... Select any part of your text to access the formatting toolbar.

Heading with link

I am a button

Heading with link

Here goes your text ... Select any part of your text to access the formatting toolbar.

I am a button