Many Webal Blocks modules show buttons (Button, Call to action, Cards, Slideshow, Pricing, the Modal and Offcanvas triggers) or cards (Cards, Features, Team, Testimonials, Articles, Events). They all use the same three groups of settings, so once you know them you know them everywhere: Buttons (how every button of the module looks), Button (one button) and Card (how every card of the module looks). This page explains them for the person building the page.
One button
Each button is one row of the module's list. A button has:
| Setting | What it does |
|---|---|
| Button words | The words on the button, such as Book now. Say what happens when it is pressed. A button with no words is not shown. |
| Link | Where the button goes: a menu item, an article or a web address, with the usual choices (open in a new tab, a note for search engines, an accessible name). A button with no link, or one that cannot be used, is not shown. |
| Style | Use the module setting follows the style chosen for all the buttons. Choose another only when this button must stand out or step back, such as an outline button beside a filled one. |
| Icon | An optional small picture beside the words, such as an arrow. It is decoration: screen readers read only the words. |
Web addresses are checked twice, when you save and every time the page is built. Anything that is not a normal web address, an email address, a phone number or a path on your own site (for example javascript:...) gives no button at all.
Open in a new tab. The button says so to screen readers in words (opens in a new tab) and carries the safety markers browsers need. If you also type an accessible name, it is used only when it contains the words that are on the button (people who speak to their computer say the visible words, so the name must include them). A name that does not is ignored, and one line is written to the Webal Blocks log.
All the buttons of a module (the Buttons group)
| Setting | Choices |
|---|---|
| Style | Primary (filled, the strongest), Secondary (filled, grey), Outline (primary colour or grey: a border and no fill), Link (looks like an underlined link, as easy to press as a button). |
| Size | Small, Normal, Large. Every size is at least 44 pixels high, so a button is always easy to press. |
| Icon position | Before or after the words. In a right to left language the sides swap by themselves. |
| Full width | Stretches every button across its space, one under the other. |
| Space between buttons | None to Very large. |
| Alignment | Start, Centre or End of the space (not used for Full width). |
The colours are your theme's own button colours: they follow the colour mode (light or dark) of the site. They are checked: the words reach 4.5:1 on every style, at rest, under the pointer, with the keyboard focus and pressed, in light and in dark, and an outline's edge and the keyboard focus ring reach 3:1. The focus ring is a 3 pixel outline that never moves anything.
All the cards of a module (the Card group)
| Setting | Choices |
|---|---|
| Card style | Plain (no edge), Border (a faint line), Shadow (a soft shadow), Filled (a slightly different background). The line and the fill are made from the text colour, so they follow light, dark and a colour scheme. |
| Space inside | None, Small, Medium, Large. The picture always reaches the edge of the card. |
| Picture position | Above the words, Before or After the words (beside them on screens 768 pixels wide and more; above them on narrower ones), or Behind the words. |
| Whole card is the link | Makes a card with a link clickable all over. |
| Hover effect | Lift raises the card a little under the pointer. It is not shown to visitors who ask for reduced motion, or on devices that cannot hover. |
Same height, links at the bottom, lined-up cards
These come from the module's Grid group, which the cards read:
- Equal height items: the cards of a row are as tall as the tallest one.
- Keep links at the bottom: the read more link and buttons of every card sit on one line at the bottom, however long the text above is.
- Line up card parts across the row: the picture, title, text and links of every card in a row share the same lines (CSS subgrid). The picture is then always above the words. A browser without subgrid keeps the normal equal height cards.
The link: one link, never two
A card with a link is one of two things.
- Normal. The card has a visible Read more link at the bottom (you can change the words). Screen readers hear Read more about and the card's title. The card's buttons stay beside it.
- Whole card is the link (the switch, and always for Behind the words). The title is the one link and it covers the whole card: a click or tap anywhere follows it, the keyboard stops once per card, and the focus ring surrounds the whole card. Because a link cannot sit inside another link, the buttons of such a card are not shown, and links in its text are shown as plain words. If a card has no title, its Read more link carries the card.
Picture behind the words
A flat overlay lies over the picture and the words go on top of it: light words on a dark overlay, dark words on a light one. Automatic is the weakest overlay at which the words reach 4.5:1 over any picture, even a pure white or a pure black one (it is 65 percent for the dark overlay and 55 for the light one). Strong adds 20 percent and Solid hides the picture. The overlay is never weaker than Automatic, so the words are always readable. A card with no picture sits on the overlay colour alone. The shape (square, 4 by 3 or 16 by 9) is the least height; a card whose words need more room grows taller. Mark the picture decorative: it is a backdrop, not content. In Windows high contrast mode the picture is hidden and the system colours decide.