Text
Two text steps that no other component draws: an item's title, and a small secondary line.
When to Use
Use when:
A card or list item needs its title, or a page needs a small secondary line such as a result count or a note under a heading.
title is the card-title step; caption is the small line, in a colour that passes contrast on the page and on a card.
Don't use when:
The heading belongs to a page or a section: use
ws_section_header. Running body copy is a plain paragraph, and a field's label is the field's own label option.
Variants
Title, in a card
Fraunces at --text-h4, semibold: the step the saved-workshop cards use. An h3 unless tag says otherwise.
Quarterly planning offsite
Two days, 14 people. Last edited on Monday.
Team retrospective
90 minutes, remote.
<?php ws_card_start(['variant' => 'content']) ?>
<?php ws_stack_start(['gap' => '2']) ?>
<?= ws_text($workshop['title'], ['variant' => 'title']) ?>
<?= ws_text('Two days, 14 people. Last edited on Monday.', ['variant' => 'caption']) ?>
<?php ws_stack_end() ?>
<?php ws_card_end() ?>Caption, as a result count
--text-small in --text-default. live makes it a status, read out when a script changes it.
Showing 6 of 8 workshops
<?= ws_text('Showing 6 of 8 workshops', ['variant' => 'caption', 'live' => true]) ?>Options
| Option | Type | Default | Purpose |
|---|---|---|---|
$text | string | — | Positional. Escaped, so pass plain text |
variant | string | 'caption' | title or caption; anything else is a caption |
tag | string | h3 / p | h2 to h5, p, span or div; anything else falls back to the default |
live | bool | false | role="status" |
id, class, attrs | — | — | On the element |
Accessibility
| Concern | Behavior |
|---|---|
| Headings | A title is a real heading element, h3 by default. Set tag so the page's outline stays in order. |
| Live counts | live sets role="status", so a count a script changes is read out. Text already on the page when it loads is not announced, so a search that reloads the page gains nothing from it. |
| Contrast | The caption uses --text-default (7.66:1 on white), not --text-muted, which falls below AA for small text on --card-bg. |
Files
| File | Purpose |
|---|---|
includes/components/helpers.php | ws_text() |
includes/components/components.css | Styles, the TEXT (ws_text) block |