A title, a line of body copy and a footer, the shape most interface cards reduce to. Preview it on its own and it is unstyled, which is the point: this is the markup half of a trio.
.html
<article class="card">
<h1 class="card-title">Card anatomy</h1>
<p class="card-body">
Three blocks that appear in nearly every interface card:
a title, a body, and a footer with the metadata.
</p>
<footer class="card-footer">
<span>Updated today</span>
</footer>
</article>
Run this in a sandbox
This is somebody else’s code. The frame it runs in has no access to this site, your session, or this page, and nothing happens until you press the button. It can still loop, so Stop replaces it.
Preview
allow-scripts only
Console
Nothing logged yet. console.log, console.warn and uncaught errors from the frame arrive here. alert() is blocked and says so.