Typography Components

Pre-styled content containers for articles, blogs, and reading-optimized layouts.

Article Container

Default reading-optimized container with 700px max-width for optimal readability.

Article Heading

This is a paragraph in an article container. The width is optimized for reading (700px max), with comfortable font size (18px) and line height (1.75) for extended reading sessions.

Section Heading

Section headings have a subtle bottom border to separate content sections visually.

This is a blockquote - perfect for highlighting important quotes or key takeaways from your content.

Inline code looks like this: const example = "code";

// Code blocks for longer snippets
function example() {
    return "formatted code";
}
<div class="antsand-article">
    <h1>Article Heading</h1>
    <p>Your article content with optimal reading width...</p>

    <h2>Section Heading</h2>
    <p>More content...</p>

    <blockquote>
        Important quote or takeaway
    </blockquote>
</div>

Article Variants

Different width variants for different content types.

<!-- Default: 700px max-width (optimal reading) -->
<div class="antsand-article">
    Standard article content
</div>

<!-- Wide: 1000px max-width (for visual content) -->
<div class="antsand-article-wide">
    Articles with images, galleries, or wider layouts
</div>

<!-- Research: 900px max-width (for data/tables) -->
<div class="antsand-research">
    Research papers, data tables, technical documentation
</div>

Article Header

Pre-styled header section for blog posts and articles with title, meta info, and optional image.

Complete Guide to ANTSAND Typography

By John Doe October 4, 2025 5 min read 
<div class="antsand-article-header">
    <h1 class="antsand-article-title">Your Article Title</h1>
    <div class="antsand-article-meta">
        <span class="antsand-article-author">By Author Name</span>
        <span class="antsand-article-date">Date</span>
        <span class="antsand-article-read-time">Read time</span>
    </div>
</div>

Full Page Example

Complete blog post layout combining header and article components.

<!-- Full-width header section -->
<section class="antsand-section" style="background: #f8f9fa;">
    <div class="antsand-container">
        <div class="antsand-article-header">
            <h1 class="antsand-article-title">My Blog Post</h1>
            <div class="antsand-article-meta">
                <span class="antsand-article-author">By Jane</span>
                <span class="antsand-article-date">Oct 4, 2025</span>
            </div>
        </div>
    </div>
</section>

<!-- Article content -->
<section class="antsand-section">
    <div class="antsand-article">
        <p>Your content here...</p>
        <h2>Section</h2>
        <p>More content...</p>
    </div>
</section>

Available Classes

Article Containers

Article Header

Automatic Typography Styles

Elements within article containers are automatically styled: