Section reference › Content

Zigzag rows `"type": "zigzag"`

Rows of image and text that swap sides each time (image left, then right, then left). Use it to explain features, services or steps in more depth, each with its own photo.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "zigzag",
  "eyebrow": "Why Fernway",
  "title": "Everything your team needs in one place",
  "items": [
    {
      "image": "placeholder",
      "eyebrow": "Plan",
      "title": "See every project at a glance",
      "text": "Timelines, owners and deadlines on one board, so nobody has to ask for a status update.",
      "list": [
        "Drag-and-drop timelines",
        "Workload view for every team"
      ],
      "button": {
        "label": "Explore planning",
        "href": "#"
      }
    },
    {
      "image": "placeholder",
      "eyebrow": "Track",
      "title": "Know where time really goes",
      "text": "Automatic time tracking and weekly reports show what is on track and what needs help.",
      "list": [
        "One-click timers",
        "Reports your clients will read"
      ],
      "button": {
        "label": "See reporting",
        "href": "#"
      }
    },
    {
      "image": "placeholder",
      "eyebrow": "Deliver",
      "title": "Share work without the email chains",
      "text": "Invite clients to review, comment and approve in the same place you work.",
      "button": {
        "label": "How sharing works",
        "href": "#"
      }
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string (HTML allowed)	—	Section heading. You can use <em> or <br> inside it.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. "start" puts it on the left. Values: `center \| start`
`items`	array	—	The rows. See the "items" fields.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `items`#

Option	Type	Default	Description
`image`	string	—	Photo for this row.
`eyebrow`	string	—	Small label above the title.
`title`	string	—	Row heading.
`text`	string	—	Paragraph.
`list`	array of strings	—	Check-mark bullet points.
`button`	object	—	One button (label, href, style, icon). Defaults to the "link" style: text with an arrow.

Tips#

Use photos with the same shape in every row so the rows line up.
2 to 4 rows work best; for more, consider the services or split-list section.

Editing it in the HTML files#

Each row is a .zigzag-row; every second row has the class flex-lg-row-reverse, which puts its image on the right. The text is in .zigzag-content.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/culture.html (source src/demos/creative-agency/pages/culture.json)
Real Estate: template/real-estate/home-2.html (source src/demos/real-estate/pages/home-2.json)
Corporate: template/corporate/home-2.html (source src/demos/corporate/pages/home-2.json)
SaaS Product: template/saas/index.html (source src/demos/saas/pages/index.json)
Mobile App: template/mobile-app/feature-habit-streaks.html (source src/demos/mobile-app/pages/feature.json)
Tech Conference: template/conference/about.html (source src/demos/conference/pages/about.json)
Online Academy: template/education/testimonials.html (source src/demos/education/pages/testimonials.json)
Restaurant: template/restaurant/home-2.html (source src/demos/restaurant/pages/home-2.json)
Coffee Shop: template/cafe/home-2.html (source src/demos/cafe/pages/home-2.json)
Hotel & Resort: template/hotel/amenities.html (source src/demos/hotel/pages/amenities.json)
Wedding: template/wedding/home-2.html (source src/demos/wedding/pages/home-2.json)
Gym & Fitness: template/gym/home-2.html (source src/demos/gym/pages/home-2.json)
Yoga Studio: template/yoga/beginners.html (source src/demos/yoga/pages/beginners.json)
Day Spa & Salon: template/spa/index.html (source src/demos/spa/pages/index.json)
Medical Clinic: template/medical/home-2.html (source src/demos/medical/pages/home-2.json)
Dental Clinic: template/dental/home-2.html (source src/demos/dental/pages/home-2.json)
Pet Care: template/pet-care/grooming.html (source src/demos/pet-care/pages/grooming.json)
Construction: template/construction/services.html (source src/demos/construction/pages/services.json)
Car Dealer: template/car-dealer/home-2.html (source src/demos/car-dealer/pages/home-2.json)
Travel Agency: template/travel/home-2.html (source src/demos/travel/pages/home-2.json)
Photographer: template/photography/awards.html (source src/demos/photography/pages/awards.json)
Architecture Studio: template/architecture/index.html (source src/demos/architecture/pages/index.json)
Interior Design: template/interior-design/home-2.html (source src/demos/interior-design/pages/home-2.json)
Portfolio: template/portfolio/about.html (source src/demos/portfolio/pages/about.json)
Music Festival: template/music-festival/stages.html (source src/demos/music-festival/pages/stages.json)
Fashion Store: template/fashion-store/lookbook.html (source src/demos/fashion-store/pages/lookbook.json)
Charity: template/charity/partners.html (source src/demos/charity/pages/partners.json)
Logistics: template/logistics/home-2.html (source src/demos/logistics/pages/home-2.json)

Zigzag rows "type": "zigzag"