Widget Box
Widget boxes are used to group form sections together for users to scan, read, and get things done. It displays content in a familiar and recognizable style.
Section titled “ Design”Variants
Section titled “Variants”Best practices
Section titled “ Best practices”Using a footer
Section titled “Using a footer”- Same as Card guidelines
- When the widget box has a footer, place all action items in the footer for users to find quickly.
- When there is no footer and has a help article link, use the space in the upper right corner of the card for persistent, optional actions (such as Read the help article)
Accessibility
Section titled “ Accessibility”Screen reader support
Section titled “Screen reader support”Use semantic HTML to provide more context to screen readers and bots. For example, use <header> HTML tag for card headers, <footer> HTML tag for card footers, and wrap the card in an <article> or <section> HTML tag.