Here is all the descriptive teaser text for my card.
- The basic card consists of an image area (using the frame layout), and a content area (using the box layout). If the image is purely decorative, an empty
altattribute should be provided.
- The content area appears first in the source order, so that the card is correctly labelled by its heading. We use flexbox to visually put the image ahead of the content area.
- Make sure that the heading element fits with the heading order of surrounding content. Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
Card with a call to action
Card with extra links
Horizontal cards use a slightly modified structure, with an inner container added to the text area to centre it vertically. They use a similar mechanism to the sidebar layout, to switch from vertical to horizontal alignment without a media query.