The Examples collection uses one card for each working Source: a recognizable preview, a short invitation, and a way into both the experience and its Markdown.
The preview is a link into the experience. The caption keeps the title and
invitation as ordinary Markdown. href is the public route; file is the
Source path for the accompanying source link. preview
selects the artwork's surface: orbit, shelf, chess, color, reading, or
prints.
<article class="example-card" data-pmx-prose="off">
<a class="example-preview example-{{ preview }}" href="{{ href }}" aria-label="{{ action }}">
<slot name="preview" />
</a>
<div class="example-caption">
<p class="example-label">{{ label }}</p>
<slot />
<p class="example-details">{{ details }}</p>
<div class="example-links">
<a href="{{ href }}">{{ action }} ↗</a>
<example-source file="{{ file }}" />
</div>
</div>
</article>
The collection page writes a card like this:
<example-card
href="/examples/bookcase"
file="/examples/bookcase/index.demo.md"
preview="shelf"
label="01 / A collection"
details="Book notes · Queries · Components"
action="Explore the shelf"
>
<slot name="preview">
<span class="example-books" aria-hidden="true">
<book-preview />
</span>
</slot>
## [A personal reading shelf](./bookcase/index.demo.md)
Browse a shelf of books and open the notes inside.
</example-card>
The preview and caption sit side by side when there is room, then stack. Preview surfaces keep their own color and texture so each example is recognizable before the title is read.
.example-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
align-items: center;
gap: clamp(1.5rem, 4vw, 3rem);
padding-block: 1rem;
}
.example-preview {
box-sizing: border-box;
min-width: 0;
display: grid;
place-items: center;
aspect-ratio: 1;
overflow: hidden;
border-radius: 0.35rem;
text-decoration: none;
}
.example-caption h2 {
font-size: clamp(1.4rem, 2.3vw, 1.8rem);
line-height: 1.15;
text-wrap: balance;
margin: 0.7rem 0 1rem;
}
.example-caption h2 a { color: inherit; text-decoration: none; }
.example-caption p { line-height: 1.6; text-wrap: pretty; }
.example-label, .example-details { color: var(--pmx-color-muted); }
.example-label { font: 0.7rem var(--pmx-font-mono, monospace); letter-spacing: 0.06em; text-transform: uppercase; }
.example-details { font-size: 0.75rem; margin-top: 1.25rem; }
.example-links { display: flex; flex-wrap: wrap; column-gap: 1.25rem; font-size: 0.85rem; }
.example-links a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 0.2em; }
.example-links a:last-child { color: var(--pmx-color-muted); }
.example-card a:focus-visible { outline: 2px solid var(--pmx-color-accent); outline-offset: 5px; }
.example-caption a:hover { color: var(--pmx-color-accent); text-decoration: underline; }
@media (max-width: 42rem) {
.example-card { grid-template-columns: 1fr; gap: 1.25rem; }
.example-preview { width: min(100%, 23rem); justify-self: center; }
}
.example-shelf {
background: #604632 url('/examples/bookcase/assets/oak-grain.webp') center / cover;
padding: 1.5rem;
box-shadow: inset 0 0 4rem #24190b66;
}
.example-books {
display: flex;
align-items: end;
gap: 0.6rem;
width: 100%;
padding: 0 0.4rem 0.7rem;
border-bottom: 0.6rem solid #a37b50;
box-shadow: 0 0.55rem 0.55rem -0.2rem #24190b99;
}
.example-books img { width: calc((100% - 1.2rem) / 3); height: auto; box-shadow: 0.2rem 0.2rem 0.4rem #0006; outline: 1px solid oklch(0 0 0 / 0.1); }
.example-chess { background: #334438 url('/examples/chess/assets/felt.webp') center / cover; padding: 1.4rem; }
.example-chess img { width: 100%; height: auto; border: 0.45rem solid #62472e; box-shadow: 0 0.4rem 0.9rem #0005; }
.example-reading { background: #b3b9a6; padding: 1.5rem; color: #34382d; }
.example-paper { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; min-height: 100%; padding: 1.5rem; background: #f4f0e5; box-shadow: 0 0.2rem 0.6rem #28302426; }
.example-paper-label { font: 0.55rem monospace; text-transform: uppercase; letter-spacing: 0.05em; }
.example-paper-title { font: clamp(1.5rem, 3vw, 2.4rem)/1.05 Georgia, serif; margin-top: 1.5rem; }
.example-paper-rule { width: 2rem; border-top: 1px solid; margin-block: 1.2rem; }
.example-paper-excerpt { font: italic 0.85rem/1.5 Georgia, serif; }
.example-paper-footer { font: 0.5rem monospace; margin-top: auto; padding-top: 1.5rem; }
@media (max-width: 42rem) {
.example-paper-title { font-size: 2.4rem; }
}
.example-orbit { background: #080e1b; }
.example-orbit img { width: 100%; height: 100%; object-fit: contain; }
.example-prints { background: #e9dfc4; padding: 1rem; }
.example-prints img { width: 100%; height: auto; border-radius: 0; }
.example-color { padding: 0; background: #183c43; }
.example-color img { width: 100%; height: 100%; object-fit: cover; }
Pass the source's absolute file path, including .md. The component preserves
that file URL so readers can inspect the Markdown behind the rendered page.
<a href="{{ file }}" type="text/markdown">View source</a>
For example:
<example-source file="/examples/color-context.demo.md" />