ELLIS CLINIC · BUILDING BLOCK REFERENCE

Ellis Clinic Page Section Library

This page is a visual reference for the common building blocks used throughout the new Ellis Clinic website. Each section shows the finished component and includes a button that reveals/copies the HTML needed to reuse it. Replace the sample words and links with the page-specific content.

Best practice: build a new page by choosing only the sections you need. Most pages work well with: Top Bar + Navigation → Hero → QuickNav → 2–4 content sections → Final CTA → Footer.

Color Palette

The core colors used throughout the current Ellis Clinic pages.

Primary Navy
#06172B

Secondary Navy
#0A3157

Ellis Gold
#D7A63B

Light Gold
#F0C967

Warm Paper
#F4F2ED

Body Ink
#13283E

Muted Text
#627080

QuickNav
#F0ECE3

Notice Cream
#FFF7E5

Border
#D8D2C6

Top Bar + Main Navigation

Use once at the top of a normal Ellis Clinic page.

<div class="topbar">
  <div class="inner">
    <strong>ELLIS CLINIC</strong>
    <span>OCCUPATIONAL &amp; LEGAL MEDICINE</span>
    <span class="spacer"></span>
    <span>405-917-5336</span>
  </div>
</div>

<nav class="nav">
  <a href="/"><img src="/images/eclogo.png" alt="Ellis Clinic"></a>
  <div class="navlinks">
    <a href="/explore/">EXPLORE ELLIS</a>
    <a href="/AboutEllisClinic.html">ABOUT</a>
    <a href="/ContactEllisClinic.html">CONTACT</a>
    <a class="start" href="/Appointment.html">APPOINTMENTS</a>
  </div>
</nav>

Hero + Hero Card

The primary opening section. The right-hand hero-card is optional.

ELLIS CLINIC · PAGE TOPIC

Your Main Page Headline

Use one or two short paragraphs to explain what the visitor will learn or do on this page. Keep the hero focused and easy to scan.

START HERE LEARN MORE

<header class="hero">
  <div class="hero-inner">
    <div>
      <div class="eyebrow">ELLIS CLINIC · PAGE TOPIC</div>
      <h1>Your Main Page <span>Headline</span></h1>
      <p>Short explanation of this page.</p>
      <div class="actions">
        <a class="btn gold" href="#start">START HERE</a>
        <a class="btn outline" href="#learn">LEARN MORE</a>
      </div>
    </div>
    <aside class="hero-card">
      <small>BEFORE YOU BEGIN</small>
      <h2>Three Things to Know</h2>
      <div>First important point.</div>
      <div>Second important point.</div>
      <div>Third important point.</div>
    </aside>
  </div>
</header>

QuickNav

Use directly under the hero to jump to major sections on the same page or related resources.

First Topic Second Topic Third Topic Evidence Resources Appointments

<div class="quicknav">
  <div class="quick-inner">
    <a href="#one">First Topic</a>
    <a href="#two">Second Topic</a>
    <a href="#three">Third Topic</a>
    <a href="/Appointment.html">Appointments</a>
  </div>
</div>

Standard Content Section

The most common body section: kicker → heading → lead → content.

SECTION KICKER

Clear Section Heading

This opening paragraph introduces the subject in plain language. Use it to explain why the section matters before moving into details.

Additional body copy can follow here. This is where longer explanations, lists, links, examples, or supporting information can be placed.

<section class="section" id="section-name">
  <div class="kicker">SECTION KICKER</div>
  <h2>Clear Section Heading</h2>
  <p class="lead">Short introductory paragraph.</p>
  <p>Additional supporting content.</p>
</section>

Three-Card Grid

Use for choices, resources, issues, or related topics.

CHOOSE A PATH

Three Related Resources

First Card

Brief explanation of the first option. Keep all three cards similar in length.

OPEN RESOURCE →

Second Card

Brief explanation of the second option. Cards work best when each has one clear purpose.

LEARN MORE →

Third Card

Brief explanation of the third option. Use a short action link at the bottom.

VIEW GUIDE →

<div class="grid3">
  <div class="card">
    <h3>First Card</h3>
    <p>Brief explanation.</p>
    <a href="#">OPEN RESOURCE →</a>
  </div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

Band — Light + Dark

Use a band to visually separate a major topic from surrounding white sections.

LIGHT BAND

Important Supporting Topic

The light band uses the warm paper background and creates a quiet visual break.

DARK BAND

High-Emphasis Topic

The dark version is useful when you need a stronger break or want to highlight a major process.

<section class="band">
  <div class="band-inner">
    <div class="kicker">LIGHT BAND</div>
    <h2>Important Supporting Topic</h2>
    <p class="lead">Introductory copy.</p>
  </div>
</section>

<section class="band dark">
  <div class="band-inner">
    <div class="kicker">DARK BAND</div>
    <h2>High-Emphasis Topic</h2>
    <p class="lead">Introductory copy.</p>
  </div>
</section>

Four-Step Process

Use for a sequence, lifecycle, evidence framework, or checklist.

HOW IT WORKS

A Four-Step Process

01STARTDescribe the first stage in one or two sentences.

02GATHERDescribe the second stage in one or two sentences.

03REVIEWDescribe the third stage in one or two sentences.

04ACTDescribe the fourth stage in one or two sentences.

<div class="steps">
  <div class="step"><small>01</small><strong>START</strong><span>First stage.</span></div>
  <div class="step"><small>02</small><strong>GATHER</strong><span>Second stage.</span></div>
  <div class="step"><small>03</small><strong>REVIEW</strong><span>Third stage.</span></div>
  <div class="step"><small>04</small><strong>ACT</strong><span>Fourth stage.</span></div>
</div>

Callout

Use for one important idea that deserves stronger emphasis.

The Important Point

A callout should contain one memorable message. It is stronger than ordinary body text but less prominent than the hero or final call-to-action.

<div class="callout">
  <h3>The Important Point</h3>
  <p>One concise explanatory message.</p>
</div>

Notice / Educational Disclaimer

Use for cautions, privacy notes, filing reminders, or educational disclaimers.

Educational Resource: This information is provided to help visitors understand the subject. Individual facts, current rules, and official decisions control individual cases.

<div class="notice">
  <strong>Educational Resource:</strong>
  Your notice, warning, privacy note, or disclaimer goes here.
</div>

Two Feature / Fee Boxes

Originally used for fees and status comparisons; also useful for two important choices.

OPTION ONEPrimaryUse this space for the first choice, category, fee, or status.

OPTION TWOAlternateUse this space for the second choice, category, fee, or status.

<div class="feegrid">
  <div class="fee">
    <small>OPTION ONE</small>
    <strong>Primary</strong>
    <span>Explanation.</span>
  </div>
  <div class="fee">
    <small>OPTION TWO</small>
    <strong>Alternate</strong>
    <span>Explanation.</span>
  </div>
</div>

Final Call-to-Action

Use near the bottom of a page when there is one logical next step.

Ready for the Next Step?

Tell the visitor exactly what will happen when they click the button.

CONTINUE →

<section class="final">
  <div class="final-inner">
    <div>
      <h2>Ready for the Next Step?</h2>
      <p>Explain what happens next.</p>
    </div>
    <a href="/Appointment.html">CONTINUE →</a>
  </div>
</section>

Footer

Standard dark Ellis Clinic footer.

<footer class="footer">
  <div class="foot">
    <div>
      <b>ELLIS CLINIC</b>
      <p>Occupational &amp; Legal Medicine<br>Oklahoma City, Oklahoma<br>405-917-5336</p>
    </div>
    <div>
      <strong>EXPLORE</strong>
      <a href="/">Home</a>
      <a href="/explore/">Explore Ellis</a>
    </div>
    <div>
      <strong>NEXT STEPS</strong>
      <a href="/Appointment.html">Appointments</a>
      <a href="/ContactEllisClinic.html">Contact Ellis Clinic</a>
    </div>
  </div>
</footer>

Tip: The examples above assume the CSS at the top of this file is present. For a new page, you can copy this file, delete the style-guide-only sections, and keep the production component CSS plus the sections you want.