Docs components

Link readers to the next useful guide. Authoring uses generated rows; Start and Extend use curated rows with summaries written for the task.

Link to a guide

Each row supplies a destination, title, and description. Keeping them inside one link makes the whole row a target for opening the guide. A query fence uses component: doc-item and supplies those values from its result.

For curated rows, import this Source and pass a public route with the title and summary. For example, paths/docs/start/index.md contains:

[@docs-items]: ../docs.components.md

<doc-item href="/docs/start/first-site.guide" title="Quickstart" description="Create a project, run it, edit the home page, and add another page." />

The result is one linked row. Use the rendered route in href; the component's string attribute does not resolve a relative Markdown filename. See the working Start and Extend indexes.

<a class="pmx-doc-item" href="{{ href }}">
  <strong>{{ title }}</strong>
  <span>{{ description }}</span>
</a>

On wider screens, titles and descriptions form two columns. On small screens, the description sits below its title. Theme tokens supply the border, muted text, and link highlight colors.

[data-pmx-query-component="doc-item"] {
  display: grid;
  gap: 0.35rem;
  margin-block: 1.25rem 2rem;
}

.pmx-doc-item {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--pmx-color-border);
  color: inherit;
  text-decoration: none;
}

.pmx-doc-item:last-child {
  border-bottom: 1px solid var(--pmx-color-border);
}


.pmx-doc-item strong {
  font-family: var(--pmx-font-heading);
  font-weight: 650;
}

.pmx-doc-item > span {
  color: var(--pmx-color-muted);
  font-size: 0.92rem;
}

.pmx-doc-item:hover strong,
.pmx-doc-item:focus-visible strong {
  color: var(--pmx-color-accent);
}

@media (max-width: 40rem) {
  .pmx-doc-item {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}