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>

.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

Navigation Pattern

<header>
    <nav class="navigation">
        <div class="left">
            <a class="logo" href="https://naturalareasnyc.org">
                <img src="../images/logo-white.svg" alt="Natural Areas Conservancy Logo">
            </a>
            <div class="nav-links">
                <a href="#section-2">Item 1</a>
                <a href="#section-3">Item 2</a>
            </div>
        </div>
        <div class="right">
            <div class="nav-links">
                <a href="#">Item 3</a>
                <a href="#" class="btn primary">Donate</a>
            </div>
        </div>
        <button class="hamburger" aria-label="Toggle menu" aria-expanded="false">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </nav>
</header>

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>

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>
Donate icon

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

CSS Color Variables

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