Marketing essentials: heroes, CTA, logo slider, pricing, testimonials, FAQ, banner.
High Impact Hero
high-impact-hero
FreeWabbit
Full-featured hero with headline, description, supporting images, reviews, marquee, and background options. Variants default / centered / dark / split set `data-variant` on the root for site or theme CSS (layout comes from the inline orientation and background options); illustrationHero renders its own character-illustration layout.
Now shipping
Gear that outlasts the trail
The Tamarack 45L pack, the Talus softshell, and everything else we build to survive actual use.
Illustration HeroFelt-world hero with a bold character illustration alongside headline and subheadline. Use for /start-here and other brand-immersive entry points.
Feature Hero
feature-hero
FreeWabbit
Feature showcase in six layouts (cards, three steps, large media, icon grid, media feature, masonry) picked by the inline `variant` select. Variants default / minimal / dark / playful set `data-variant` on the root for site or theme CSS.
Sendlark
Email marketing without the bloat
Flat pricing, real deliverability, and none of the enterprise-suite features you never open.
DarkDark background feature showcase with accent-colored feature items.
What's inside
The full send toolkit
shield-check
Deliverability that just works
workflow
Plain-language automations
users
No per-subscriber tax
PlayfulOffset cards with color fills and rounded corners — energetic consumer-brand feel.
Call to Action
cta
FreeTome
Headline + supporting text + action buttons with optional media. Variants default / minimal / with-form / footer set `data-variant` on the root for site or theme CSS (with-form also adds Inline Form label fields, which this renderer does not draw); door-strip and doors render the two-door layouts.
Doors (Full Close)Full two-door close: kicker, serif heading, body, underlined go-link per door. Seed with columnSpan '1 / -1' for full bleed.
Logo Slider
logo-slider
FreeWabbit
Logo strip for client or partner branding. Variants default and dark scroll as a marquee (dark also sets `data-variant` for site or theme CSS); marquee-editorial scrolls slower, wider and muted; static-grid shows a still grid.
120+ brands and counting
Identity systems built for these brands
DarkDark strip logo marquee with inverted monochrome logo treatment.
Recent Northlight clients
Static GridStill, wrapping grid of logos — no scrolling; Logo Spacing sets the gap and logos with a URL link out. Suits print-style and editorial pages.
Launched by Northlight
Marquee EditorialSlow marquee — half the Scroll Speed, 1.5× the Logo Spacing, logos muted to 60% opacity — for an editorial press-logo strip.
Pricing
pricing-plans
FreeWabbit
Pricing plans section with subscription and project cards
EditorialMinimal typographic pricing layout — no card surfaces, hairline separators.
Testimonial
testimonial
FreeWabbit
Display a testimonial from a testimonials collection
What clients say about working with Harbor & Pine
Sarah and Owen asked about the way morning light crossed our kitchen before they'd sketched a single wall. Eighteen months later, the light lands exactly where they said it would.
Northlight stripped our old mark down to the one shape that actually meant something and rebuilt everything around it. Three years later it still looks like us, not like 2023.
EditorialLarge pull-quote typographic treatment — no card, hairline accent.
We interviewed four firms. Harbor & Pine was the only one that walked the lot twice before pricing anything.
DarkDark surface testimonial with accent star rating strip.
1-3
Sarah and Owen asked about the way morning light crossed our kitchen before they'd sketched a single wall. Eighteen months later, the light lands exactly where they said it would.
CarouselHorizontally scrolling testimonial carousel with pagination dots.
FAQ
faq
FreeTome
Frequently asked questions with accordion answers. Variants default / minimal / two-column / dark set `data-variant` on the root for site or theme CSS; the layout itself is the same accordion in each.
Travel FAQ
How far in advance should I book a custom trip?Can Fernway plan a multi-country itinerary?Do you handle group trips and honeymoons differently?What happens if our plans change mid-trip?Do you work with travelers outside the US?
Travel FAQ
How far in advance should I book a custom trip?Can Fernway plan a multi-country itinerary?Do you handle group trips and honeymoons differently?
MinimalBorderless FAQ with hairline separators — editorial style.
Travel FAQ
How far in advance should I book a custom trip?Can Fernway plan a multi-country itinerary?Do you handle group trips and honeymoons differently?What happens if our plans change mid-trip?Do you work with travelers outside the US?
Two ColumnFAQ items split into two columns for dense question sets.
Travel FAQ
How far in advance should I book a custom trip?Can Fernway plan a multi-country itinerary?Do you handle group trips and honeymoons differently?What happens if our plans change mid-trip?Do you work with travelers outside the US?
DarkDark surface accordion FAQ with accent-colored open/close toggles.
Banner
banner
FreeTome
Alert or announcement banner. Variants default / editorial / dark / sticky set `data-variant` on the root for site or theme CSS; the alert colour (info, warning, error, success, editorial aside or highlight) comes from the inline `style` select.
Now roasting weekly batches
Six origin farms, direct-trade, roasted every Thursday in Asheville.
DarkFull-width dark announcement bar with accent accent.
Roastery closed for equipment maintenance
Wholesale orders paused Monday–Tuesday this week. Both cafes stay open as usual.
StickyPosition-fixed top bar for persistent announcements and cookie/GDPR notices.
Exhibit Wall
exhibit
FreeTome
Asymmetric museum gallery wall of hairline-framed real nested block renders. Its one variant, gallery-wall, is the only layout and sets `data-variant` on the root for site or theme CSS.
Gallery WallAsymmetric plates — four cycling offset positions (exA/exB/exC/exD) across a 12-col wall.