Section Library

Reusable sections for building pages. Copy any section into a new page template.

Hero Simple Hero Split Hero Dark Stats Bar Intro Centered Feature Row Card Grid Steps Differentiators CTA Centered CTA Split CTA Banner Form Section FAQ Checklist

Hero: Simple

Page Title Here

A short description of what this page is about.

Primary Action (609) 296-9400

Hero: Split with Form

Headline Goes Here

Supporting subheadline text

A longer description paragraph with more details about what this section is promoting or explaining.

Call (609) 296-9400

Form Title

Short description of the form purpose.

[Gravity Form goes here]

Hero: Dark with Background Image

Big Bold Headline

Supporting text that provides context for the hero section.

Primary CTA Secondary CTA

Stats Bar

250+

Deep Water Slips

50+

Years of Service

CSI

Award-Winning

24/7

Security

Intro: Centered with Badge

Badge Label

Section Heading Goes Here

A longer introductory paragraph that sets the context for the section below. This is great for “Why Choose Us” or “About” intros.

Feature Row (Image + Text)

Feature image

Feature Title

Description of the feature. This layout alternates image left/right by swapping to md:flex-row-reverse.

Primary CTA Secondary CTA
Feature image

Reversed Feature

Same layout but with md:flex-row-reverse to alternate the image side.

Learn More

Card Grid (Icon Cards)

Section Label

Card Grid Heading

Supporting subtitle text for the section.

Card Title

Card description text goes here. Keep it concise.

Card Title

Card description text goes here. Keep it concise.

Card Title

Card description text goes here. Keep it concise.

Steps (Process)

How It Works

Simple Process

Step by step, we make it easy.

1

Step One

Description of this step.

2

Step Two

Description of this step.

3

Step Three

Description of this step.

4

Step Four

Description of this step.

Differentiators Bar

Differentiator One

Short description of what makes this stand out.

Differentiator Two

Short description of what makes this stand out.

Differentiator Three

Short description of what makes this stand out.

CTA: Centered

Ready to Get Started?

Supporting text with a call to action. Or call us at (609) 296-9400.

Primary Action Secondary Action

CTA: Split with Contact Info + Form

Get Started

CTA Heading Here

Supporting paragraph with context about why to take action.

Sheltered Cove Marina

910 S. Green Street, Tuckerton, NJ 08087

(609) 296-9400

Call or text us anytime

Form Title

Short description of what happens after submitting.

[Gravity Form goes here]

CTA: Full-Width Banner

Banner Headline Here

Supporting text for the banner CTA.

Primary Button (609) 296-9400
Label

Dark CTA With Gold Accent

Supporting description text.

Gold Button

Form Section (Standalone)

Oops! We could not locate your form.

FAQ Accordion

Questions?

Frequently Asked Questions

Checklist (Dark BG)

What’s Included

Checklist Heading

Supporting text for the checklist.

Checklist item one
Checklist item two
Checklist item three
Checklist item four
Checklist item five
Checklist item six

End of Section Library. Copy any section above into a new page template.

View Style Guide