How to use this set
Each layout below is a starter page. Match an old page to the layout it should become using the table below.
Before you pick a layout
- Start with the call to action. What is the ONE thing this page wants a visitor to do.
- Add a secondary action only if it helps. Most pages need just one or two, not five.
- Let the page scroll. Don’t stack many kinds of content into one row to fit everything above the fold.
- Full width sections with a background don’t add spacing to their neighbors on their own. Add it by hand when a page needs it.
Layouts
| Layout | Template | Use it when |
|---|---|---|
| Homepage | page-canvas.html | The one front page. |
| Landing page, feature tabs | page.html, tabbed nav | A section with 5 or fewer children, each worth its own pitch. |
| Landing page, grid | page.html, grid nav | A section with more children than tabs can hold. |
| Interior page, with sidebar rail | page.html, section-rail-shell | A page inside a section. Full width content can go below the rail. |
| Interior page, minimal content | page.html, section-rail-shell (rail column only) | Short content just uses the rail column. Nothing else needed. |
| Program/degree page (Example) Program/degree page – Lorem ipsum example | degree | For programs |
Interior page, minimal content is a child of Interior page, with sidebar rail. Open it from there. Another short page sits beside it under Landing page, feature tabs, purely so the rail has a sibling to list.
A program major/minor page is a different content type, not a layout in this set. See Horticulture (Example) for a filled-in program page with suggested lengths on every field, including the ones that live off-page in Program Details.
Length cheat sheet
| Slot | What it is | Target |
|---|---|---|
| Page title (H1) | The main heading at the top of the page and in the browser tab. | 10–35 characters |
| Page lede | The intro line under the page title that sums up what the page covers. | 100–140 characters |
| Hero headline | The big statement at the top of a hero banner. | 25–40 characters |
| Hero lede | The supporting sentence below the hero headline. | 120–140 characters |
| Section heading (H2) | The heading that introduces a section of content. | 3–30 characters |
| Kicker | A short label above a heading that names its category — sometimes called an “eyebrow.” | 3–18 characters |
| Display line | A large standalone statement used for visual emphasis — not a true heading. Always sits under a kicker. | 25–45 characters |
| Tab title | The clickable label on one tab in a tabbed panel. | 6–24 characters |
| Tab body | The content that appears inside a tab. | 145–280 characters |
| Card title | The heading on a card. | 15–35 characters |
| Card body | The supporting text on a card. | 120–200 characters |
| FAQ question | The clickable question in an accordion-style FAQ. | 25–48 characters |
| FAQ answer | The text revealed when an FAQ question is expanded. | 200–280 characters |
| Prose paragraph | A standard paragraph of running body copy. | 300–420 characters |
| Button label | The text on a button. | 5–29 characters |
| Arrow link | A text link styled with a trailing arrow, used for “see more”–type links. | 15–45 characters |
| List item | One line in a bulleted list. | 45–100 characters |
| Pull quote | A quotation pulled out and styled for emphasis. | 60–140 characters |
| Footnote | Small print below the main content — a caveat, citation, or source note. | 40–90 characters |
| Outcome label | The headline stat/result in a program’s “Career outcomes” bar-chart callout. | 20–45 characters |
| Outcome source | The small citation under that stat — where the number came from. | 10–40 characters |
| Contact label | The name and role/title shown on a contact card. | 10–30 characters |
| Excerpt | The short summary shown on search results and listing cards — not on the page itself. | 100–155 characters |
| Alt text | A description of an image for screen readers — not visible on the page. | 8–125 characters |
Examples
Each boxed example below is a reference swatch, not real page content — the small caps label names the slot; the border, tint, and label don’t appear on an actual page.
Example — Page title (H1)
Row Crop Irrigation Guide
Example — Page lede
A county-by-county look at irrigation scheduling for Georgia’s row crops, from planting through harvest.
Example — Hero headline + Hero lede
Example — Section heading (H2)
Soil Testing Basics
Example — Kicker + Display line (always paired). Note that the kicker (in red) is the heading level, and the display line is a paragraph.
Hands-on learning
Learn by doing, in the field and lab
Example — Tab title + Tab body
Explore Row Crops
UGA Extension resources for Georgia’s major row crop producers.
-
Corn planted between mid-March and late April captures the most heat units before summer stress sets in, which tends to improve both yield and ear fill across most Georgia soils.
See planting guides
Example — Card title + Card body
Master Gardener Program
Volunteers complete Extension training in horticulture, then return hundreds of hours a year helping neighbors troubleshoot lawns, gardens, and orchards.
Example — FAQ question + FAQ answer
Drop a labeled sample at your county Extension office, or mail it directly to the UGA lab. Results and fertilizer recommendations usually arrive by email within one to two weeks of submission.
Example — Prose paragraph
Georgia’s row crop producers work with a narrowing window between planting and the first heat stress of summer. Extension’s variety trials track how different corn and soybean varieties respond to that window across the state’s soil types, giving county agents a data-backed answer when a farmer asks what to plant this season.
Example — Arrow link
Example — List item
- Scout fields weekly during the first six weeks after planting
- Pull a soil sample before applying any starter fertilizer
Example — Pull quote
Extension gave me the confidence to try cover crops on half my acreage this year.
Jane Athens, County Agent
Example — Footnote
Yield figures reflect UGA variety trial averages, 2023–2025.
Example — Outcome label + Outcome source (a program’s “Career outcomes” chart)
- 82%1,240 growers reached in 2025UGA Extension Row Crops Team
Example — Contact label
Debbie Hargrave
Academic Advisor
Office of the Associate Dean for Academic and Faculty Affairs
Athens, GA 30602
Example — Excerpt (CAN SHOW on a PAGE listing card after the title)
Row Crop Irrigation Guide
A county-by-county guide to irrigation scheduling for Georgia’s row crops, built on UGA variety trial data.