# HTML Style Guide - Visual Demo

This page demonstrates how each utility class looks when rendered. Use this as a visual reference while building your exercises.

## Typography Classes

### `.heading-1`

### Large Section Headings

    <h2 class="heading-1">What we do</h2>
    <!-- Or use semantic h1 -->
    <h1 class="heading-1">Page Title</h1>

## What we do

### `.heading-4`

### Card/Article Headings

    <h3 class="heading-4">Card Title</h3>
    <h4 class="heading-4">Article Heading</h4>

### Card Title or Article Heading

### `.heading-5`

### Smaller Card Headings (with colored span)

    <h3 class="heading-5"><span>Train</span> the next generation</h3>
    <!-- Use span inside for colored words -->
    <h3 class="heading-5"><span>Conduct</span> applied research</h3>

### Train the next generation

### `.heading-6`

### Subheadings

    <p class="heading-6">The backdoor to NYC's backyard</p>

The backdoor to NYC's backyard

### `.eyebrow`

### Small Label Above Heading

    <h2 class="eyebrow">Who are we?</h2>

## Who are we?

### `.mega`

### Extra Large Hero Text

    <h1 class="mega">Healthy, resilient natural areas for all</h1>

# Healthy, resilient natural areas for all

### `.xlarge`

### Large Paragraph Text

    <p class="xlarge">We champion and protect New York City's 20,000 acres of forests and wetlands to create a sustainable future here and across the nation.</p>

We champion and protect New York City's 20,000 acres of forests and wetlands to create a sustainable future here and across the nation.

### `.large`

### Medium-Large Text

    <p class="large">Experience a bird's-eye-view of our natural areas and learn what's in your neighborhood.</p>

Experience a bird's-eye-view of our natural areas and learn what's in your neighborhood.

### `.small`

### Small Body Text

    <p class="small">Our CUNY and high school internship programs provide STEM students with the training to succeed in the environmental workforce.</p>

Our CUNY and high school internship programs provide STEM students with the training to succeed in the environmental workforce.

### `.caption`

### Small Caption Text

    <span class="caption">October 27, 2025</span>

October 27, 2025

## Button Classes

### `.btn.primary`

### Primary Action Buttons

    <a href="#" class="btn primary">Donate</a>
    <a href="#" class="btn primary">Explore Now</a>
    <a href="#" class="btn primary">Get Started</a>

Donate Explore Now Get Started View All

### `.btn.tertiary`

### Text Link Buttons (hover to see underline animation)

    <span class="btn tertiary">Donate now</span>
    <span class="btn tertiary">See opportunities</span>
    <span class="btn tertiary">Learn more</span>

Donate now
See opportunities
Learn more
Browse events

### `.btn.icon`

### Standard Icon Button

    <span class="btn icon arrow">
        <span class="accessibility">Icon button</span>
    </span>

Icon button

### `.btn.icon.large`

### Large Icon Button

    <span class="btn icon large play">
        <span class="accessibility">Large icon button</span>
    </span>

Large icon button

### `.btn.icon.arrow`

### Arrow Icon Button

    <span class="btn icon arrow">
        <span class="accessibility">Arrow button</span>
    </span>

Arrow button

Hover over the arrow button to see it move

## Layout Classes

### `.container`

### Content Wrapper

    <div class="container">
        <!-- Content here -->
    </div>

This content is inside a .container - it has max-width and centered margin.

### `.grid-two-column`

### Grid Layout (2 columns example)

    <div class="grid">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
    </div>

Item 1
Item 2
Item 3
Item 4

### `.card`

### Card Component (with hover effect)

    <a class="btn-container card" href="#">
        <div class="media">
            <img src="image.jpg" alt="">
        </div>
        <article>
            <h3 class="heading-5">Card Title</h3>
            <p class="small">Card description text.</p>
        </article>
    </a>

### Card Title

Card description text goes here. Hover to see shadow effect.

### `.column`

### Column Layout (Centered Content)

    <div class="grid" style="grid-template-columns: repeat(2, 1fr);">
        <div class="column">
            <div class="media">
                <img src="image.jpg" alt="">
            </div>
            <article>
                <h2>Title</h2>
                <p class="large">Description</p>
                <a href="#" class="btn primary">Button</a>
            </article>
        </div>
        <div class="column">
            <div class="media">
                <img src="image.jpg" alt="">
            </div>
            <article>
                <h2>Title</h2>
                <p class="large">Description</p>
                <a href="#" class="btn primary">Button</a>
            </article>
        </div>
    </div>

Image

## Title

This is a longer description that demonstrates how the column content spans the full width of its container.

Button
Image

## Title

This is a longer description that demonstrates how the column content spans the full width of its container.

Button

### `.media`

### Image Container (with aspect ratio)

    <div class="media">
        <img src="image.jpg" alt="Description">
    </div>

## Utility Classes

### `.panel`

### Section Background

    <section id="section-1" class="panel">
        <!-- Section content -->
    </section>

This demonstrates the .panel class - adds background color (#f4f2ef) and padding (50px).

### `.pill`

### Badge/Tag Elements

    <span class="pill">Default Pill</span>
    <span class="pill green">Green Pill</span>
    <span class="pill small">Small Pill</span>
    <span class="pill small green">Small Green Pill</span>

Default Pill Green Pill Small Pill Small Green Pill

### `.pill` with `.caption`

### Common Pattern

    <span class="pill small green">Announcements</span>
    <span class="caption">October 27, 2025</span>

Announcements October 27, 2025
Nature Tips October 17, 2025
Education September 29, 2025

### `.accessibility`

### Screen Reader Text (Hidden Visually)

    <span class="btn icon arrow">
        <span class="accessibility">This text is hidden but readable by screen readers</span>
    </span>

This text is hidden but readable by screen readers

↑ The icon above has hidden accessibility text - inspect the element to see it.

## Hero Section and Cards

### Hero Section Pattern

    <section id="hero" class="hero">
        <div class="container grid">
            <article>
                <h1 class="mega">Main Heading</h1>
                <p class="xlarge">Large description text</p>
                <a class="jump-arrow" href="#section-1">
                    <span class="accessibility">Jump to first section</span>
                </a>
            </article>
        </div>
    </section>

# Healthy, resilient natural areas

Description text goes here.

Jump to section

### Card

    <div class="grid">
        <a class="btn-container card" href="#">
            <div class="media fancy-boxes">
                <img src="image.jpg" alt="">
            </div>
            <article>
                <h3 class="heading-5"><span>Action</span> description</h3>
                <p class="small">Card description text.</p>
                <span class="btn icon arrow">
                    <span class="accessibility">Card title</span>
                </span>
            </article>
        </a>
        <!-- More cards -->
    </div>

### Train the next generation

Card description text.

Card link

### Conduct applied research

We study urban natural areas to inform management and policy decisions.

Card link

### Icon Card Pattern (Section 3 Style)

    <a class="btn-container icon-card" href="#">
        <div class="media">
            <img src="../images/icon-donate.svg" alt="Donate icon" />
        </div>
        <article>
            <h3 class="heading-4">Heading</h3>
            <p class="small">Here is a subheading to further describe the heading.</p>
            <span class="btn tertiary">Take Action</span>
        </article>
    </a>

### Heading

Here is a subheading to further describe the heading.

Take Action

### Text-Only Card Pattern (Section 5 Style)

    <a class="btn-container card" href="#">
        <article>
            <h3 class="heading-4">Title</h3>
            <p class="large">This is a description that explains the content or purpose of the card. The text should be informative and provide context for the card's action or topic.</p>
            <span class="btn icon arrow">
                <span class="accessibility">Card title</span>
            </span>
        </article>
    </a>

### Title

This is a description that explains the content or purpose of the card. The text should be informative and provide context for the card's action or topic.

Card title

### Carousel Card Pattern (Section 6 Style)

    <a class="card vertical-card carousel-card" href="#">
        <div class="media fancy-boxes">
            <img src="../images/carousel-1.jpg" alt="">
        </div>
        <article>
            <span class="pill small green">Announcements</span>
            <span class="caption">October 27, 2025</span>
            <h3 class="heading-5">Article Title</h3>
            <span class="btn icon arrow">
                <span class="accessibility">Read article</span>
            </span>
        </article>
    </a>

Announcements October 27, 2025

### Gratitude Giveaway 2025

Read article

## CSS Color Variables

`--white`
`--ivory`
`--black`
`--persian-coral`
`--matcha-green`
`--green`
`--moss-green`
`--soil-green`