Groups of expandable "winners and losers"-style cards that can be embedded in stories.
Expandable cards sections are defined by starting (#startcards) and ending (#endcards) markers in the article text.
You can control some aspects of cards' appearance by appending settings to the #startcards anchor and further control some appearance attributes on individual cards by using settings markers within each card.
The default card colour is black. Add COLOUR in uppercase followed by a colour name (see list below) or hex code in lowercase to change the default card colour.
Examples:
#startcardsCOLOURred#startcardsCOLOURffd700
Card colours can be defined on a per-label basis. To specify a colour for a specific label add COLOUR in uppercase followed by the name of the label in uppercase, and the colour in lowercase.
Example: #startcardsCOLOURWINNERgreenCOLOURLOSERredCOLOURNEUTRALgrey
Add TINTIMAGESyes to re-colour card images to match the colour of the label.
Example: #startcardsCOLOURWINNERgreenCOLOURLOSERredCOLOURNEUTRALgreyTINTIMAGESyes
Each card is defined by the existence of a Heading 1 (<h2>) which specifies the card title and (optionally) card label.
The first embedded image after the heading will be used as the card image.
You can override the appearance of individual cards by use of an anchor with a specific format anywhere in the card content. The card specific settings available are colour and tint.
Example: #COLOURblueTINTIMAGEno
For convenience, the following colour names can be used: green (#049a5e), red (#b71a3c), blue (#1467cc), grey (#b5bbbc) and black (#000000).
All other colours must be specified using an RGB hex value.
Implementation is based on W3C's WAI-ARIA Accordion Example
The current version of this component has Presentation Layer article pages on the ABC News website as a primary target.
It is backwards compatible in the sense that older articles rendered by legacy Phase 1 and Phase 2 templates should still render as expected. However there are a number of differences in usage and configuration options for older legacy usage that aren't documented here.