Cover Image
· 7 min read

Article Styleguide

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 . 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 .1

Component Demos

This section demonstrates custom MDX components in context.

Accordion

Expandable Content Section

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.

Technical Implementation Details

The Accordion component uses your site’s existing CSS variables and follows accessibility best practices.

Plain Accordion Example

This accordion has no background or border - useful when you want a more minimal look that blends into the surrounding content.

BookmarkCard

justinjackson.ca We need more calm companies

Calm companies are profitable, value freedom, have a purpose, and improve the team's lives. Frenzied companies are crisis-driven.
dannysmith.notion.site The AI workspace that works for you. | Notion

A tool that connects everyday work into one space. It gives you and your teams AI tools—search, writing, note-taking—inside an all-in-one, flexible workspace.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 📅 Meetings 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. 🧡 Meeting Checkouts Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Notion page icon Loom

Primary Button Link

Secondary Button Link

Callout

Grid Example

Grid Example 1Grid Example 2Grid Example 3Grid Example 4

Images

This section shows different image layouts and treatments.

A normal image

Example image

A normal image with height and width set

Example image

A normal image with a border

Example image

An image at left-bleed

Example image

An image at right-bleed

Example image

An image at full-bleed

Example image

An image with alt shown

Example image
Example image

Framed image with alt and source shown

Example image
Example image (source: https://google.com)

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.

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.

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.

Task List Example

  • Write styleguide intro
  • 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.
— Steve Jobs

The best way to find out if you can trust somebody is to trust them.

— Ernest Hemingway - A Moveable Feast

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.

— Robert Bringhurst - The Elements of Typographic Style

Code Blocks

This section demonstrates code blocks in context.

Code Block Example

def thing
  return "Hello" if @thing === 1 && other >= 5
end
my-test-file.rb
def thing
  return "Hello" if @thing === 1 && other >= 5
end
Terminal window
echo "This terminal frame has no title"

Tables

This section demonstrates markdown tables.

Table Example

SyntaxDescription
HeaderTitle 12345
ParagraphText

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 .

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 for details.

Long-Form Content & Footnotes

This section demonstrates long-form prose and footnotes.

Donec leo libero, sodales a quam non, ullamcorper facilisis est. Nam id est fermentum, eleifend mi quis, ultrices elit. Nullam iaculis tellus neque, eu volutpat ex elementum ac. Nulla non consequat mauris, vel placerat risus. Sed mattis ac velit a eleifend. Nulla tempor hendrerit tristique. Integer luctus, sapien pulvinar euismod pharetra, dolor lorem lacinia nisl, non cursus ex nibh sed magna. Etiam pharetra accumsan nulla id suscipit. Nulla malesuada eleifend aliquet. 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.2

Back to Main Styleguide

Footnotes

  1. This styleguide is maintained to help ensure visual and typographic consistency across all articles. ↩

  2. This is the footnote, here. ↩

copy / view as markdown