Installation
Coming soon..
Key points
- Use <article> or <section> to enhance the semantic structure of card.
Examples
<article class="co-card" role="region" aria-labelledby="nested-card-title">
<header class="co-card__header co-card--spacing">
<span class="co-card__title" id="nested-card-title"> Card Title </span>
<div class="co-card__action">
<span class="co-badge co-badge--default">Label</span>
<button class="co-icon-button co-icon-button--primary co-icon-button--large"
aria-label="ellipsis" type="button">
<i class="co-icon-24__ellipsis-horizontal"></i>
</button>
</div>
</header>
<div class="co-card__body">
This card has a header. You can put all sorts of things in it!
</div>
<footer class="co-card__footer">
<div class="co-button-group">
<div class="co-button-group-pair">
<button type="button" class="co-button co-button--padding co-button--primary">
Primary
</button>
<button type="button" class="co-button co-button--secondary co-button--padding">
Secondary
</button>
</div>
<button type="button" class="co-button co-button--tertiary co-button--padding">
Cancel
</button>
</div>
</footer>
</article>
Nested card
Class list
|
Class name |
Description |
|---|---|
|
co-card--elevated |
To raise the card by one level. |
Accessibility
|
Attribute name |
Description |
|---|---|
|
role="region" |
When using the <article>, make sure to apply role=”region” |
|
role="group" |
When using the <section>, make sure to apply role=”group” |
|
aria-label |
It provides additional information about the icon inside the button to assistive technologies, such as screen readers. |
|
aria-labelledby |
This attribute helps the screen reader to announce the title of the card. |