This article is a complete guide demonstrating all typographic elements supported by the Foundation blog system. Use it as a reference to see how each component renders with the prose styles from Tailwind Typography.

Section Headings

Headings structure content and improve SEO. This is an h2.

Subheading h3

Subheadings allow hierarchy up to six levels deep.

Lists

Unordered lists are ideal for collections without a specific order:

First list item
Second item with bold and italic
Third item with an external link

Ordered lists show sequences or steps:

Set up the project with NestJS
Create entities with TypeORM
Implement controllers and services
Write tests for each layer

Comparison Table

Tables are useful for comparing structured data:

Technology	Advantage	Use Case
NestJS	Modular architecture	Enterprise APIs
Vue 3	Fine-grained reactivity	Interactive SPAs
TypeORM	Typed decorators	ORM with PostgreSQL

Code Block

Code blocks show snippets with preserved syntax:

import { Controller, Get } from '@nestjs/common';

@Controller('users')
export class UsersController {
  @Get()
  findAll() {
    return this.usersService.findAll();
  }
}

Blockquote

Blockquotes highlight important ideas or external references:

Clean architecture separates what changes from what stays stable. Dependencies should point toward abstractions, not details.

Summary

We covered headings, paragraphs, ordered and unordered lists, tables, code blocks, blockquotes, bold, italic, and links. All these elements render correctly with the @tailwindcss/typography plugin and the prose class.

Complete Guide: Article Elements