"Content" Block
Styleguide Overview
This page is created automatically when the app starts and no styleguide page exists.
Use it as a visual QA checklist for core page-builder blocks, typography, imagery, buttons, cards, forms, and collection sections.
"Content" Block (H2)
Primarily Used as Editorial Blocks (H3)
Content areas available in Full, Half, 1/3, and 2/3 (H4)
This is a standard paragraph used to demonstrate body copy, line height, font size, spacing, and overall readability. The sample should be long enough to wrap across several lines.
Block quote: Thoughtful design helps people find the information they need while creating a consistent and recognizable experience across every page of a website.
This sentence contains bold text for emphasis within standard body copy. This sentence contains italic text for emphasis within standard body copy1. This sentence contains bold and italic text.
"Content" Block (H4)
1/2 Column 1 (H3)
Unordered List
- First list item
- Second list item
- Third list item
- Nested list item
- Another nested item
- Fourth list item
"Content" Block (H4)
1/2 Column 2 (H3)
Ordered List (Normal Text Bold)
- First step
- Second step
- Third step
- Nested step
- Another nested step
- Fourth step
"Columns" Block
The Columns Block provides a flexible way to organize related content into structured, side-by-side sections. Each column can include a title, description, content, image, and multiple links.
Columns can be configured to display 1, 2, 3, or 4 columns per row. When multiple columns appear together, their heights remain consistent and are determined by the tallest column in the row.
Columns Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
Column images are available in four different aspect ratios to accommodate a variety of content and layouts (This example uses the 1:1 square image format):
- 1:1 — Square
- 3:2 — Photo
- 4:3 — Standard
- 16:9 — Widescreen
Column 1
Column Description
Column blocks include Title, Description, Content, Images, and multiple Links
Column 2
Column Description
Columns can have 1, 2, 3, or 4 columns in each row. The height stays fixed at the longest block. This example is 3 Columns wide.
Column 3
Column Description
Columns photos can have 4 different photo heights, include 16:9 and square. (This block is square).
"Content with Hours" Block
The Content with Hours Block is designed specifically to display the organization’s hours of operation alongside supporting content.
Hours are managed globally under Globals > Hours rather than entered individually within the block. When hours are updated in Globals, the changes are automatically reflected everywhere the shared hours are used, including the Content with Hours Block and website footer.
Use this block whenever hours need to appear within page content to ensure that information remains consistent and easy to maintain across the website.
Call To Action (Right Position)
Call To Action (Left Position)
Card Grids
Card Grids are similar to Column Blocks, and DO have an "Intro Content" editor that allows for content to span across the blocks.
This example is 4 columns wide.
Card Grids 1
A standard card with a custom link.
Card Grids include Title, Description, Content, Images, one Link, and Footer Text
Card Grids 2
A standard card with a custom link.
Card Grids can have 1, 2, 3, or 4 columns in each row. The height stays fixed at the longest block
Card Grids 3
A standard card with a custom link.
Card Grids photos can have 4 different photo heights, including 16:9 and square. (This block is 4:3).
Card Grids 4
A standard card with a custom link.
Card Grids can link:
- Internal documents/pages
- Custom URLs
- Media File / Download
Featured Blocks
Featured Blocks incorporate photos and are designed to serve as more visual, engaging links to additional content.
Featured Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
This example is 3 columns wide.
"Feature" Blocks
There are a few key differences between Features and Featured Blocks.
- Features are text-based and are best suited for highlighting key information, services, or benefits.
- Featured Blocks incorporate photos and are designed to serve as more visual, engaging links to additional content.
"Features" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
This example is 3 columns wide.
Grid Layout Example
Blocks can have List or Grid form (this is a grid) and 2-4 columsn.
Feature Block
Feature cards can explain capabilities without relying on imagery.
Feature Block Emoji
Blocks can feature and Emoji or Text in the top right corner
List Layout Example
Blocks can have List or Grid form (this is a grid) and 2-4 columsn.
Feature Block
Feature cards can explain capabilities without relying on imagery.
Feature Block Emoji
Blocks can feature and Emoji or Text in the top right corner
Left Position Highlight Block
Highlight blocks can be Left or Right Position and include 1 Links.
“Media” Block
The Media Block is a simple container designed for displaying a single image. Images can include both a caption and alt text for additional context and accessibility.
The Media Block does not include an introductory content editor and is not intended for displaying multiple images. When presenting a collection of photos, use a Gallery Block or Carousel Block instead.
"Media" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
"Carousel" Block
Use carousel items for compact, visual storytelling. Each slide can pair an image with a short headline and supporting copy to highlight related content, features, or information.
- The Carousel Block provides an image-led way to highlight multiple pieces of content within a compact area of the page.
- Carousels can be configured with several image heights and can be set to auto-play or allow visitors to navigate manually using arrows.
- There is no limit to the number of slides that can be included in a carousel. For the best user experience, keep slide content concise and easy to read, particularly on smaller screens.
Carousel blocks are available in four different aspect ratios to accommodate a variety of content and layouts (This example uses the 1:1 square image format):
- 1:1 — Square
- 3:2 — Photo
- 4:3 — Standard
- 16:9 — Widescreen
"Carousel" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
Carousel
Carousels can auto-play and have several image heights
Carousel 2
A second slide for navigation QA.
Carousel 23
A third slide checks looping behavior.
"Gallery" Block
- The Gallery Block provides a flexible way to display groups of images throughout the website.
- Galleries can be configured to display 2–4 images per row and are available in four different aspect ratios to accommodate a variety of image styles and layouts.
- A Featured Image can be used to give additional emphasis to a specific gallery item. Featured Images display larger than the other images in the gallery, helping draw attention to important or highlighted content.
"Gallery" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
This example is 3 columns wide.
Interactive Blocks
Interactive Blocks provide flexible ways to organize and present content that visitors can explore or interact with. Available options include Timeline Block, “Accordion” + “FAQ” Blocks “Tabs” Section Block.
These blocks are especially useful for presenting detailed or structured information while keeping pages organized, engaging, and easy to navigate.
Unless noted, these Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
Timeline Block
The Timeline Block provides a structured way to present events, milestones, historical information, or other content in chronological order.
- Each timeline item can include a date, title, description, image, and internal or external links. Images are optional, allowing timeline items to be displayed with or without supporting visuals.
- Timeline Layout: Timeline cards can be positioned on the left, right or auto alternate sides of the timeline, providing flexibility in how content is arranged.
- Timeline Markers: By default, the date is used as the timeline marker. The marker can also be customized to display an emoji or text, making the Timeline Block suitable for content that may not follow a traditional date-based chronology.
Flexible Timeline Layout
Timeline cards can be positioned on the left, right or auto alternate sides of the timeline, providing flexibility in how content is arranged.
Timeline Markers
By default, the date is used as the timeline marker. The marker can also be customized to display an emoji or text.
“Accordion” + “FAQ” Blocks
“Accordion” Block
The Accordion Block provides a compact way to organize larger amounts of content into expandable sections. Each accordion entry includes a title, description, and content field, with a WYSIWYG editor available for the main content.
There is no limit to the number of accordion entries that can be added. Accordions can be configured to allow multiple entries to remain open at the same time or to automatically collapse an open entry when another is selected.
“FAQ” Block
The FAQ Block functions similarly to the Accordion Block but is specifically structured for frequently asked questions. Each entry includes a Question and Answer field rather than the Title, Description, and Content fields used by Accordions.
There is no limit to the number of FAQ entries that can be added. FAQs can be configured to allow multiple answers to remain open at the same time or to automatically collapse an open answer when another question is selected.
FAQ vs. Accordion
The primary difference between the FAQ Block and Accordion Block is the available content fields. FAQs use a simplified Question and Answer format, while Accordions include Title, Description, and Content fields for more flexible or detailed content.
“Tabs” Section Block
The Tabs Section Block provides an interactive way to organize related content that visitors can quickly switch between and compare.
The section includes a prominent Tab Title designed to introduce the content and grab attention, along with a Highlighted Heading displayed in a contrasting font and color. The main Content field includes a WYSIWYG editor for flexible formatting.
There is no limit to the number of tabs that can be added.
Tab Layout & Interaction
Individual tabs are displayed as large, rounded blocks in the right column. Each tab includes a Tab Title and can include an optional Summary—a short piece of supporting text that provides additional context for the active tab.
Selecting a tab updates the content displayed in the left column, allowing visitors to explore related information without leaving the section. The first tab is displayed as the default active tab when the page loads.
When to Use Tabs
Use the Tabs Section Block for closely related content that benefits from switching between topics or comparing information. Tabbed content should remain concise, easy to scan, and clearly related so visitors can quickly understand the differences between each selection.
"Tabs" Section Blocks
Highlighted Heading
Individual tabs are displayed as large, rounded blocks in the right column. Each tab includes a Tab Title and can include an optional Summary—a short piece of supporting text that provides additional context for the active tab.
Selecting a tab updates the content displayed in the left column, allowing visitors to explore related information without leaving the section. The first tab is displayed as the default active tab when the page loads.
“Testimonial” + “Quote” Blocks
“Testimonial” Blocks
The Testimonial Block provides a flexible way to highlight quotes, reviews, or endorsements throughout the website.
Each testimonial can include a quote, author name, role or position, and company. There is no limit to the number of testimonials that can be added.
Display Options
Testimonials can be displayed in two modes:
- Single — Displays an individual testimonial.
- Carousel — Displays multiple testimonials that visitors can cycle through.
The Testimonial Block can be displayed with or without a background, allowing it to work within a variety of page layouts and designs.
"Quote" Block
The Quote Block provides a subtle way to highlight a short editorial quote, statement, or excerpt within a larger section of content. It is designed to draw attention without becoming a distraction, using generous spacing and a more subdued presentation than the Testimonial Block.
While the Quote Block and Testimonial Block contain similar information, their primary difference is visual treatment and intended use. Testimonials are designed to prominently showcase endorsements or reviews, while Quote Blocks work best within editorial or long-form content.
Quote Fields
Each Quote Block can include:
- Quote — WYSIWYG content field for the featured quotation
- Author Name
- Role / Position
- Company
- Author Image
- Style — Choose between Large or Minimal
Display Styles
The Large style gives the quote greater visual emphasis, while the Minimal style provides a more understated treatment that integrates naturally with surrounding content.
“Testimonial” Block
The Testimonial Block provides a flexible way to highlight quotes, reviews, or endorsements throughout the website.
Each testimonial can include a quote, author name, role or position, and company. There is no limit to the number of testimonials that can be added.
Content Editor
Sample Role, Centre County Historical Society
Display Options
Testimonials can be displayed in two modes:
- Single — Displays an individual testimonial.
- Carousel — Displays multiple testimonials that visitors can cycle through.
The Testimonial Block can be displayed with or without a background, allowing it to work within a variety of page layouts and designs.
Developer
Sample Role, 3twenty9
Quote Block - Large
The Quote Block provides a subtle way to highlight a short editorial quote, statement, or excerpt within a larger section of content. It is designed to draw attention without becoming a distraction, using generous spacing and a more subdued presentation than the Testimonial Block.
Quote Block - Minimal
While the Quote Block and Testimonial Block contain similar information, their primary difference is visual treatment and intended use. Testimonials are designed to prominently showcase endorsements or reviews, while Quote Blocks work best within editorial or long-form content.
"Team" Block
The Team Block is designed to highlight individual profiles for team members, staff, authors, board members, leadership, or other individuals who require recognition on the website.
The Team Block contains individual Team Member sub-blocks, with no limit to the number of profiles that can be added.
Team Member Fields can include:
- Name
- Role / Position
- Bio
- Photo
- Email Address
- Social Media Links
Display Options
Team members can be displayed using either a Grid or Row layout, depending on the amount of information being presented and the desired visual treatment.
The Grid layout can be configured to display 2, 3, or 4 team members per row. This example uses a two-column layout.
Use the Team Block for content where individual identity, role, and biographical information are important, while maintaining a consistent presentation across multiple profiles.
"Team" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
"Team" Block
Content Editor
The Team Block contains individual Team Member sub-blocks, with no limit to the number of profiles that can be added.
Display Options
Collections Manager
The Grid layout can be configured to display 2, 3, or 4 team members per row. This example uses a two-column layout.
"Logos" Block
The Logos Block is designed to highlight the logos of donors, sponsors, partners, or affiliated organizations.
The block includes an optional Subtitle (Eyebrow) and Title, along with an unlimited number of logos. Each logo can include a link to the organization’s website.
Display Options
- The number of logos displayed per row can be customized for the largest screen size. This example is configured to display three logos per row.
- Logos can be displayed as either a static grid or a slider. When the slider is enabled, logos advance one at a time rather than appearing together in a static grid.
“Logos” Block
"Funding" Block
The Funding Block is designed to recognize donors, sponsors, partners, or affiliated organizations that support an organization, event, program, or initiative. Unlike the Logos Block, the Funding Block combines partner logos with introductory content, customizable colors, and additional display controls.
Intro Content
The Funding Block includes:
- Eyebrow Text / Subtitle
- Title
- Description with a WYSIWYG editor
Color & Display Options
The appearance of the Funding Block can be customized to complement the surrounding page design. Available settings include:
- Background Color
- Heading Color
- Body Text Color
- Spacing Controls
Logos
There is no limit to the number of logos that can be added. Each logo includes:
- Logo Image
- Alt Text
- Link
- Desktop Maximum Width
- Mobile Maximum Width
Separate desktop and mobile width controls allow individual logos to be appropriately sized across different screen sizes, particularly when sponsor logos have varying proportions or dimensions.
"Funding" Block
"Numbers" Block
The Numbers Block provides a bold, eye-catching way to highlight statistics, milestones, and other key data. It is especially effective for showcasing fundraising impact, membership totals, event participation, organizational growth, or other measurable achievements.
The block can include a Subtitle / Eyebrow Text, Block Title, and Background Image.
Number Items
There is no limit to the number of Number Items that can be added. When the block loads, each value uses a count-up animation, drawing attention to the featured statistics.
Each Number Item includes:
- Value — Required numerical value
- Suffix — Optional text displayed after the value, such as + or %
- Subtitle — Supporting text displayed below the number, such as “Creative Projects Launched”
For the greatest visual impact, use the Numbers Block to feature a small selection of meaningful statistics that can be understood at a glance.
"Numbers" Block
“Pricing Table” Block
The Pricing Table Block provides a clear, easy-to-compare way to display membership levels, subscription plans, dues, or other pricing options. It can accommodate monthly, yearly, one-time, or other pricing structures.
There is no limit to the number of plans that can be added to a Pricing Table.
"Pricing Table" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
Highlighted Plan
An individual plan can be highlighted to give it greater visual emphasis. This is useful for identifying a recommended, featured, or most popular membership or subscription option.
Use the Pricing Table Block when visitors need to quickly compare pricing, features, and benefits across multiple options.
Pricing Plans can include:
- Plan Name
- Price
- Period — Pricing frequency or term, such as /month, /year, or /one-time
- Description
- Features — Individual benefits or features included with the plan, such as Program Invites or Monthly Newsletter
- Button Text
- Link
- Button Style — Choose between Default or Outline
There is no limit to the number of Features that can be added within each plan.
Display Options
Pricing Tables can be configured to display 2, 3, or 4 plans per row. This example uses a two-column layout.
“Pricing Table” Block
Example membership tiers
- ✓The Pricing Table Block provides a clear, easy-to-compare way to display membership levels, subscription plans, dues, or other pricing options
- ✓"Pricing Table" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
- ✓There is no limit to the number of plans that can be added to a Pricing Table.
Highlighted Plan
Highlighted Plan example tier
- ✓An individual plan can be highlighted to give it greater visual emphasis
- ✓Use the Pricing Table Block when visitors need to quickly compare pricing, features, and benefits across multiple options.
- ✓Use the Pricing Table Block when visitors need to quickly compare pricing, features, and benefits across multiple options.
“Stats” Block
The Stats Block provides a simple, bold way to highlight key statistics and supporting information. Unlike the Numbers Block, Stats do not include introductory content and instead focus entirely on individual data points displayed in a structured grid.
Stat Items
Each Stat Item includes:
- Label — Short heading or category for the statistic
- Value — The highlighted value, which must include a number
- Description — Supporting information that provides context for the statistic
- Icon — Optional emoji or icon text displayed with the statistic
Display Options
Stats can be configured to display in 1, 2, 3, or 4 columns per row. When the number of Stat Items exceeds the selected column count, additional items automatically continue onto the next row to create a consistent grid.
Label
Value
Display
Display
Label
Value
“Process” Block
The Process Block provides a clear, visual way to present a sequence of steps from beginning to end. It is ideal for explaining workflows, services, project phases, instructions, or any subject that benefits from a defined progression.
The block combines structured copy with optional imagery or color treatments to create a section that is easy to scan and follow.
Use the Process Block when content has a clear sequence or progression and visitors benefit from understanding how individual steps connect to the overall goal.
Intro Content fields includes:
- Subtitle / Eyebrow — Small introductory text displayed above the title, such as “Our Process”
- Title — Main heading that introduces the overall process
Process Steps
There is no limit to the number of steps that can be added. Each Step Block includes:
- Step Number — Displayed sequentially as 01, 02, 03, etc.
- Title — Name of the step
- Description — Supporting information explaining the step
- Accent Color — Background tint used when no image is selected
- Background Image — Optional image or texture displayed behind the step content
- Link — Optional internal or custom link
A sequence of
steps from beginning to end
"Video" Block
The Video Block provides a simple way to embed video content directly within a page. Videos can be added from YouTube, Vimeo, or a direct video source.
Use the Video Block for interviews, demonstrations, event footage, educational content, promotional videos, or other media that benefits from being viewed directly within the page.
"PDF Viewer" Block
Form Block
The default form block demonstrates the contact form inside page content.
Collection And Form Blocks
These blocks are safe on fresh installs. Collection sections show empty states until content exists.
"Table" Block Content
"Table" Block | Add Content to Tables | This is example content |
|---|---|---|
Rich text is the recommended option. | Create a table with the editor toolbar, or copy an existing HTML table from a web page or document and paste it into the field below. | Paste an existing HTML table here, or use the table control in the rich-text toolbar to create one. |
Add or delete columns | Add or delete rows | Table Block will automatically format content for spacing |
.webp?2026-08-31T14%3A22%3A55.637Z)
"Archive" Block
The archive block auto-populates recent posts from the posts collection.
.webp?2026-10-28T15%3A24%3A12.581Z)
Designed to become a county-wide project, the Aspiring Historian Program encourages young people to explore the history of their communities through original research and projects.
Celebrate Independence Day with Sunrise & the Spirit of ’76, a special July 4 program featuring a Fife and Drum Corps, flag ceremony, patriotic music, and Revolutionary-era traditions.
Recognize outstanding preservation efforts throughout Centre County at the 37th Annual John H. Ziegler Historic Preservation Awards.
“Video” Block
The Video Block provides a simple way to embed video content directly within a page. Videos can be added from YouTube, Vimeo, or a direct video source.
Video Fields includes:
- Title
- Description
- Video Source — YouTube, Vimeo, or direct video
- Aspect Ratio — Controls the dimensions of the embedded video
Use the Video Block for interviews, demonstrations, event footage, educational content, promotional videos, or other media that benefits from being viewed directly within the page.
Encyclopedia "Suggested Articles" Block
Explore the Encyclopedia
View ArticlesA
- Aaronsburg Story
- AAUW Used Book Sale
- AccuWeather
- Advent Church
- Ag Hill
- Ag Progress Days
- Agriculture
- All-American Rathskeller
- Allegheny Front Trail
- Allen Street Gates
- Alpha Fire Company
- Harold Altman
- American Philatelic Society
- Dorothy "Dot" Anderson
- Arboretum at Penn State
- John R. Ardell
- Armory
- Jesse Arnelle
- Horace Ashenfelter
- George W. Atherton
B
- Bald Eagle and Spring Creek Navigation Co.
- Bald Eagle State Park
- Barbershop Boycott
- Bear Meadows
- James A. Beaver
- Beaver Stadium
- Bellefonte
- Bellefonte Academy
- Bellefonte Airmail Fields
- Bellefonte Art Museum
- Bellefonte Central Railroad
- Bellefonte Historical Railroad
- Bellefonte Victorian Christmas
- Philip Benner
- John T. Biggers
- Big Spring
- Black Moshannon State Park
- Black Soldiers
- Blue Band
- Boal Mansion
- Boalsburg
- Boalsburg Heritage Museum
- Boogersburg School
- Julia Brill
- Brockerhoff House
- Brockerhoff Mill
- Mildred Settle Bunton
- Bush House
C
- Calorimeter
- Camelot
- Central Pennsylvania Festival of the Arts
- Centre County Courthouse
- Centre County Library
- Centre Daily Times
- Centre Furnace
- Centre Furnace Mansion
- Centre Video
- Civilian Conservation Corps
- Civil War
- Class Gifts
- ClearWater Conservancy
- Coal Industry
- Cold Stream Dam
- Robert Cole
- College Heights
- College Heights Service Station
- Colyer Lake
- Mimi Barash Coppersmith
- Creamery
- Andrew G. Curtin
- Roland Curtin
D
E
F
G
H
I
J
K
L
M
N
O
P
- William Packer
- Palmer Museum of Art
- Pasto Agricultural Museum
- Joe Paterno
- Fred Lewis Pattee
- Pattee and Paterno Libraries
- John Patton
- Penn's Cave
- Penn's Creek
- Penn State All-Sports Museum
- Penn State Football
- Penn State Golf Courses
- Pennsylvania Furnace
- Pennsylvania Match Company
- Pennsylvania Military Museum
- Rene Portland
- James Potter
- Potter-Allison Farm
- Thelma Price
- Evan Pugh
R
S
- Foster Sayers
- Edith Schad
- Schlow Library
- Schwab Auditorium
- Scotia
- Scotia Barrens
- Sexual Abuse Scandal
- Slavery
- Soldiers and Sailors Memorial
- Soldiers' Orphan School
- Edwin E. Sparks
- Spring Creek Canyon
- State College Choral Society
- State College Spikes
- State College Woman's Club
- State Correctional Institution-Rockview
- State Game Lands
- St. John Catholic Church
- St. John's Episcopal Church
- St. John's United Church of Christ
T
U
W
1const styleguide = 'created on app init'2console.log(styleguide)
The startup seeder is idempotent: it only creates this page when the slug is missing.