firefox-main/toolkit/content/widgets/moz-card
Name Description Size Coverage
moz-card.css There is a border shown above this element in prefers-contrast. When there isn't a border, there's no need for the extra space. 5190 -
moz-card.figma.ts 2820 -
moz-card.mjs Cards contain content and actions about a single subject. There are two card types: The default type where no type attribute is required and the card will have no extra functionality. The "accordion" type will initially not show any content. The card will contain an arrow to expand the card so that all of the content is visible. You can use the "expanded" attribute to force the accordion card to show its content on initial render. @property {string} heading - The heading text that will be used for the card. @property {number} headingLevel - Can be used to specify whether the heading is h1-h6 if not a regular span. @property {string} iconSrc - Path to the icon that should be displayed in the card. @property {string} type - (optional) The type of card. No type specified will be the default card. The other available type is "accordion" @property {string} spacing - (optional) The level of spacing applied to the card. If unspecified, will use default spacing. The other available option is "compact", which has reduced spacing. @property {boolean} expanded - A flag to indicate whether the card is expanded or not. Can be used to expand the content section of the accordion card on initial render. @property {string} role - (optional) Role of the article element in the card. @property {number} summaryTabIndex - (optional) tabindex for the accordion summary. @property {boolean} treeItem - (optional) Whether the accordion summary is an item of a tree. When set, the summary gets the treeitem role, the card's article is presentational and no longer labelled by the heading, and the heading is always rendered as a span, ignoring headingLevel, so heading navigation doesn't land inside the tree. The expanded state comes from the details element, so there is no aria-expanded to keep in sync. Ignored unless the type is "accordion". @property {string} ariaLevel - (optional) aria-level of the accordion summary. @property {string} ariaPosInSet - (optional) aria-posinset of the accordion summary. @property {string} ariaSetSize - (optional) aria-setsize of the accordion summary. With ariaLevel and ariaPosInSet, this lets a tree item say where it is when its siblings are in other cards. All three are set on the card and moved to the summary, and are ignored unless treeItem is set. @slot content - The content to show inside of the card. 7158 100 %
moz-card.stories.mjs The accordion card can be expanded either by the chevron icon button or by activating the details element. Mouse users can click on the chevron button or the details element, while keyboard users can tab to the details element and have a focus ring around the details element in the card. Additionally, the details element is announced as a button so I don't believe we are providing a degraded experience to non-mouse users. Bug 1854008: We should probably make the accordion button a clickable div or something that isn't announced to screen readers. 6018 -
moz-card.tagmap.d.ts 338 -
README.stories.md 4970 -