# Article Styleguide
> For the complete site index, see [llms.txt](https://danny.is/llms.txt)
This Article Styleguide demonstrates how all key Markdown/MDX features, Astro components, and prose styles render in an Article context. Use it to check typography, component appearance, and real-world content. The first paragraph is intentionally long to show drop cap and first-paragraph styling. This page is a reference for designers, developers, and content authors to see how headings, lists, blockquotes, code, tables, images, embeds, and custom components appear in a real article. For a full component reference, see the [main styleguide](/styleguide/). You'll also find examples of footnotes, abbr, and other advanced markdown features. The goal is to ensure every element looks beautiful, readable, and consistent in the context of long-form writing. Feel free to add new examples as you add new features or components to the site. For more information, see the [main styleguide](/styleguide/).[^intro]
Looking for the full component reference rather than these in-context examples? Head over to the [main styleguide](/styleguide/) for swatches, tokens, and a complete component grid.
---
## Component Demos
This section demonstrates custom MDX components in context.
### Accordion
This is the content inside the accordion. It can contain **markdown formatting**, lists, and other elements:
- Item one with some detail
- Item two with more information
- Item three to round it out
You can also include code blocks, links, and other rich content here. The accordion is useful for organizing optional or supplementary information that doesn't need to be visible by default.
The Accordion component uses your site's existing CSS variables and follows accessibility best practices.
This accordion has no background or border - useful when you want a more minimal look that blends into the surrounding content.
### BookmarkCard
### Notion Links in Context
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Meetings link Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. elementum Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. consequat
### ButtonLink
Primary Button Link
Secondary Button Link
### Callout
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum hic a dolorem ipsa labore cum.
### Grid Example
---
## Images
This section shows different image layouts and treatments.
### A normal image
### A normal image with height and width set
### A normal image with a border
### An image at left-bleed
### An image at right-bleed
### An image at full-bleed
### An image with alt shown
### Framed image with alt and source shown
## Typography & Inline Styles
This section demonstrates headings, inline styles, and other markdown features.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.
# Heading One (H1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.
## Heading Two (H2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.
### Heading Three (H3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.
#### Heading Four (H4)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.
##### Heading Five (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.
**This is bold text**, ==this is highlighted==, ~~this is strikethrough~~, this is underlined, _this is italic_, and here is some `inline code` all in one sentence for demonstration purposes.
---
## Other Markdown Features
This section shows additional markdown features like superscript, subscript, abbreviation, and horizontal rules.
This is a superscript: 2nd and a subscript: H2O.
This is an abbreviation: HTML.
---
## Lists
This section demonstrates unordered, ordered, and task lists in context — including the auto-applied [`.long-list-items`](/styleguide/) spacing rule, which loosens vertical rhythm when each bullet runs to paragraph length.[^2]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent **sit amet felis** sollicitudin, ullamcorper nunc ac, suscipit metus. Maecenas tempor _nisl non nunc pulvinar_, nec faucibus quam consectetur. Cras commodo eros et magna ornare, non efficitur velit sodales. Aenean rhoncus magna quis ex cursus, in tincidunt tortor egestas. Cras vulputate eu enim eget pulvinar.
- This is a thing which is the first point
- And another thing which I need to consider where here.
- And so the cold shrew cried out in alarm, for his twig had forsaken him.
- Shortly, thus.
Short lists like the one above stay tight. The renderer only loosens spacing once items grow past a single line — try it in the long-item example below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.
1. This is a thing which is the first point
2. And another [thing](#) which I need to consider where here.
3. And so the cold shrew cried out in alarm, for his twig had forsaken him.
4. Shortly, thus.
### Lists with paragraph-length items
When each bullet contains enough text to wrap across multiple lines, the styles automatically apply extra breathing room between items so the list reads more like a sequence of paragraphs than a tightly-packed reference list.
- When writing documentation, it's important to consider the reader's context and provide enough background information that they can understand the topic without needing to consult external resources. _Brevity matters_ — but so does completeness.
- **Code examples** should be complete and runnable wherever possible, rather than showing isolated snippets that leave readers guessing about imports, configuration, or the surrounding context they'd need to make sense of the fragment.
- Error messages and edge cases deserve special attention because these are often the situations where readers most need guidance, yet they're frequently overlooked in favour of happy-path documentation. See [MDN's docs on the topic](https://developer.mozilla.org/) for a good treatment.
---
## Task List Example
- [x] Write styleguide intro
- [x] Add component demos
- [ ] Polish prose and add more examples
- [ ] Review for accessibility
---
## Blockquotes
This section demonstrates blockquotes in context, both with and without citations.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod.
> Proin non pellentesque felis, et sollicitudin ante. In ultricies lorem magna, eget pretium lacus vestibulum ut. Fusce in interdum sapien - _Socrates_, 1AD Donec feugiat sagittis velit non molestie. Nullam mattis erat eget elit faucibus, ac tincidunt ligula bibendum. Suspendisse potenti. Nunc et aliquet nunc. Proin ullamcorper justo id scelerisque efficitur. Proin non pellentesque felis, et sollicitudin ante. In ultricies lorem magna, eget pretium lacus vestibulum ut. Fusce in interdum sapien.
### Blockquotes with Citations
Design is not just what it looks like and feels like. Design is how it works.
The best way to find out if you can trust somebody is to trust them.
Typography is the craft of endowing human language with a durable visual form, and typography shares with librarians the task of designing interfaces between readers and text.
Use `` whenever you have a real attribution — author, title, optionally a URL. Bare `>` blockquotes are fine for short asides or when you're quoting yourself, but they leave the reader without context.
For longer quotations that span multiple paragraphs, prefer breaking them into separate `` blocks rather than stuffing everything into one — the citation chrome at the bottom of each keeps the source visible at the points it matters.
---
## Code Blocks
This section demonstrates code blocks in context.
### Code Block Example
```ruby
def thing
return "Hello" if @thing === 1 && other >= 5
end
```
```ruby title="my-test-file.rb"
def thing
return "Hello" if @thing === 1 && other >= 5
end
```
```bash
echo "This terminal frame has no title"
```
---
## Included Markdown
A fenced block with the `md preview` meta string renders as a toggleable preview: a rendered pane (default) and a source pane, with a copy button. Use this when you want to show a chunk of markdown _as it would appear to a reader_ — say, a README excerpt or a content fragment — without losing the option to reveal the raw source. Authors write a normal fenced block; the [`remark-markdown-preview`](https://github.com/) plugin rewrites it into the underlying component.
```md preview
## Getting Started
Welcome to the **example project**. To install dependencies, run `bun install`.
For deeper background, see [the docs](https://docs.astro.build/).
- Clone the repo
- Install dependencies
- Run `bun dev`
```
You can also pass a `title` for the header label — handy when the chunk is meant to represent a specific file:
```md preview title="README.md"
# Loomclone
A tiny self-hosted alternative to Loom. _Work in progress._
See the [intro post](/articles/intro-loomclone/) for context.
```
---
## Tables
This section demonstrates markdown tables in two flavours: a small reference table where every column is text, and a wider table mixing text with right-aligned numeric data.
### Reference table
A compact text-only table — the kind of thing you'd reach for to summarise tokens, props, or terminology partway through an article.
| Token | Use |
| ---------------------- | ------------------------------------------------------------ |
| `--color-text` | Primary text colour on light surfaces |
| `--color-text-secondary` | Muted text for captions, metadata, and inactive UI |
| `--color-accent` | Coral accent used for links, highlights, and active controls |
| `--space-m` | Default vertical rhythm between block-level elements |
### Tabular data
When the table contains numbers, lean on alignment markers in the header row so figures line up on their last digit. The same trick works for currency, percentages, or timings.
| Component | Files | LOC | Bundle (KB) |
| ----------------- | ----: | ---: | ----------: |
| Article layout | 6 | 412 | 18.2 |
| Note layout | 4 | 281 | 12.7 |
| Markdown preview | 1 | 198 | 9.4 |
| Image components | 3 | 327 | 15.1 |
Wide tables get a horizontal scrollbar on small viewports rather than squashing column widths — readability beats fitting everything on screen.
---
## Embed Example
This section demonstrates an embedded Loom video in context.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod. For more info, see [MDN Web Docs](https://developer.mozilla.org/).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod. Visit [Astro documentation](https://docs.astro.build/) for details.
---
## LCVid (self-hosted video)
`` renders a self-hosted video from [v.danny.is](https://v.danny.is) with build-time metadata. Most authors won't use it directly — passing a `v.danny.is` URL to `