Block Guide — Trina Swanson Theme
This page demonstrates every custom block available in the theme. Use it as a reference when building new pages. Each section shows the block in action, followed by tips on how to customize it.
Hero Section
Block name: Hero Section • Best for: Page headers with a full-width background image, headline, and call-to-action buttons. • Tips: Upload a background image and cutout photo in the sidebar. Edit the headline, subtitle, and button text inline. You can have two CTAs (primary + secondary).
Wave Divider
Block name: Wave Divider • Best for: Decorative transition between sections. • Tips: Just insert it — no settings needed. It creates the signature wave shape between sections.
Donate Section
Block name: Donate Section • Best for: Fundraising calls to action with amount buttons. • Tips: Edit heading and subheading inline. Change the ActBlue URL and donation amounts in the sidebar. The amount buttons are interactive on the frontend.
Priorities Section
Block name: Priorities Section • Best for: Issue/platform cards in a grid. • Tips: Each card is its own “Priority Card” block — edit title, description, icon, and color in each card. Use the + button to add more cards, or select and delete to remove. Change the section background in the sidebar (Evergreen, Navy, Cream, or White). New: Set variant to “Values” in the sidebar for the bio page style — white cards with colored top borders and no section label or intro.
Bio Section
Block name: Bio Section • Best for: Candidate biography with photo. • Tips: Edit the heading and upload a photo in the sidebar. The left column accepts paragraphs — write the bio text there. Add or remove paragraphs as needed.
This is where the biography text goes. You can write multiple paragraphs here. The first paragraph often works well in italic as a pull-quote style introduction.
Add more paragraphs for the full bio. The image appears on the right side on desktop and stacks on mobile.
Bio Hero
Block name: Bio Hero • Best for: The Meet Trina page hero with a two-column layout — text on left, photo on right. • Tips: Edit the label, heading, subtitle, and sub-heading text inline. Upload a photo in the sidebar. The background uses the campaign’s dark blue/green gradient with the desaturated landscape image.
Bio Content Section
Block name: Bio Content Section • Best for: Text sections on the bio page with heading + accent line + paragraphs. • Tips: Choose “Intro” variant for the opening section (cream background, no topographic pattern) or “Origin” variant for story sections (cream background with subtle topographic pattern). Add as many paragraphs as needed inside.
This is an intro variant. It has a cream background, heading, accent line, and paragraph content. Use it for the opening section of a bio page.
This is an origin variant. It has a subtle topographic background pattern and slightly different padding. Use it for story sections like “Iron Range Roots.”
Timeline
Block name: Timeline • Best for: Career timelines and chronological histories. • Tips: Edit the section heading inline. Each entry is a “Timeline Item” block with an era label, title, and description. Items are connected by a colored vertical line. Add more items with the + button. Colors alternate automatically (blue → green → red for the last item).
Endorsement Group
Block name: Endorsement Group • Best for: Lists of endorsers organized by category on the Endorsements page. • Tips: Edit the category heading inline. Add endorser names in the sidebar — one name per line. Names display in a two-column grid with subtle dividers. Use multiple Endorsement Group blocks for different categories (Elected Officials, Labor Leaders, Community Leaders, etc.).
Cards Row (Get Involved)
Block name: Cards Row • Best for: Call-to-action cards (volunteer, donate, connect). • Tips: Each card is an “Action Card” block. Edit title and description inline. In the sidebar, pick an icon (Volunteer/Donate/Connect), toggle between a button or inline email form, and set button URL. Change section background in sidebar. Add/remove cards with the + button.
News Grid
Block name: News Grid • Best for: News articles, press coverage, blog posts. • Tips: Each card is a “News Card” block. Upload an image in the sidebar, set the date, and edit headline/excerpt inline. Set the article URL in the sidebar. Add more cards with +, remove with delete. Change section background in sidebar.
Email Signup
Block name: Email Signup • Best for: Newsletter signup sections. • Tips: Edit the heading inline. The form fields are pre-built. This block looks great at the bottom of any page.
Testimonial
Block name: Testimonial • Best for: Endorsement quotes, supporter testimonials. • Tips: Edit the quote, name, and title inline. Upload a photo in the sidebar. Change the background to match the page design. Great for endorsement pages — add multiple testimonials in a row, alternating backgrounds.
Stats Row
Block name: Stats Row • Best for: “By the numbers” sections — highlight key stats and achievements. • Tips: Each number is a “Stat Item” block. Edit the number and label inline. Add more with + or remove with delete. Numbers appear large and bold. Great for impact metrics, district facts, or campaign milestones. Change section background in sidebar. New: Set variant to “Bio” in the sidebar for the compact bio page style — evergreen background with topo/grain texture, no heading, white numbers.
CTA Banner
Block name: CTA Banner • Best for: Full-width call-to-action strips between sections. • Tips: Edit heading, subheading, and button text inline. Set the button URL in the sidebar. Change background color in sidebar. Great for breaking up long pages: “Ready to help? → Volunteer Now” New: Now supports an optional second button — add a label for it to show a secondary outline-style button next to the primary one.
Priorities — Values Variant
Block name: Priorities Section (variant: values) • Best for: Value cards on the bio page — white cards with colored top borders, no section label or intro. • Tips: Set variant to “Values” in the sidebar. Cards render as bio-value-card style with icon circles matching the border color. Uses the priority-card block inside with variant set to “values.”
Generic Section
Block name: Section • Best for: Blank canvas sections for custom layouts. • Tips: Choose a color scheme (Cream, Navy, Evergreen, Red) and number of columns (1, 2, or 3) in the sidebar. Then add any blocks inside — paragraphs, images, buttons, etc. Use this when none of the specialized blocks fit.
Background Options
Most section blocks have a Background selector in the sidebar with four options:
- Evergreen (textured) — Dark green with photo texture, topo pattern, and grain. White text. Best for key sections.
- Navy (photo overlay) — Deep blue with background photo overlay. White text. Great for calls to action.
- Cream (solid) — Warm cream background. Dark text. Default for most content sections.
- White (solid) — Clean white background. Dark text. Use when you need a neutral break.
Tip: Alternate backgrounds between sections for visual rhythm. A good pattern: Cream → Evergreen → Cream → Navy → Cream.