Components

The article element is styled in a particularly opinionated way among all Sugar elements.

The card's look and feel are designed to align with the typical representation of an article (independent reusable content: post, product, widget, etc.).

article: Represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include a forum post, a magazine or newspaper article, a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

<article aria-label="Example card">
	<header>
		Header content
	</header>
	Main content
	<footer>
		Footer content
	</footer>
</article>

Header content

Main content

header and footer elements are optional.