mozilla-central/toolkit/content/widgets/moz-card
Name Description Size
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. 3993
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 {string} icon - (optional) A flag to indicate the header should include an icon @property {string} type - (optional) The type of card. No type specified will be the default card. The other available type is "accordion" @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. @slot content - The content to show inside of the card. 4074
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. 3627