[@preview]: ./example.components.md

# Example cards

The [Examples](./index.md) collection uses one card for each working Source: a
recognizable preview, a short invitation, and a way into both the experience and
its Markdown.

---

<!-- componentName: example-card -->

## A card for one example

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](#a-link-to-the-file). `preview`
selects the artwork's surface: `orbit`, `shelf`, `chess`, `color`, `reading`, or
`prints`.

```html
<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:

```md
<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.

```css
.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; }
```

---

<!-- componentName: example-source -->

## A link to the file

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.

```html
<a href="{{ file }}" type="text/markdown">View source</a>
```

For example:

```md
<example-source file="/examples/color-context.demo.md" />
```

<example-source file="/examples/color-context.demo.md" />