Section reference › Content

About (image + text) `"type": "about"`

A two-column block with a photo on one side and a heading, paragraphs, checklist, stats and buttons on the other. Use it to introduce your company, a person or a product.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "about",
  "eyebrow": "About us",
  "title": "A small team with <em>big</em> standards",
  "text": [
    "We started in a spare bedroom in 2009 with one client and a borrowed laptop. Today we are a team of 24 designers and engineers helping companies launch products people actually enjoy using.",
    "Every project is led by a senior partner from the first call to the final handover."
  ],
  "image": "placeholder",
  "image2": "placeholder",
  "badge": {
    "number": "15+",
    "label": "Years in business"
  },
  "list": [
    "Fixed prices agreed up front",
    "One point of contact from start to finish",
    "Support for 12 months after launch"
  ],
  "stats": [
    {
      "number": "340",
      "label": "Projects delivered"
    },
    {
      "number": "98%",
      "label": "Clients who return"
    }
  ],
  "buttons": [
    {
      "label": "Our story",
      "href": "about.html",
      "style": "primary",
      "icon": "arrow-right"
    },
    {
      "label": "Meet the team",
      "href": "team.html",
      "style": "outline"
    }
  ],
  "signature": {
    "name": "Anna Reyes",
    "role": "Founder & CEO"
  }
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string	—	Heading. Also used as the main photo's alt text.
`text`	string \| array	—	One paragraph, or an array of strings for several paragraphs.
`image`	string	—	Main photo (path, URL, or "placeholder").
`image2`	string	—	Optional smaller second photo that overlaps the main one.
`badge`	object	—	Floating badge on the photo: { "number": "25+", "label": "Years of experience" }.
`video`	string	—	YouTube embed URL. Adds a play button over the photo that opens the video in a pop-up.
`list`	array	—	Checklist of short strings, each shown with a tick icon.
`stats`	array	—	Row of numbers under the text: [{ "number": "1,200", "label": "Projects" }].
`buttons`	array	—	Buttons shown under the text. See the button fields below.
`signature`	object	—	Name and role shown at the end: { "name": "Anna Reyes", "role": "Founder" }.
`reverse`	boolean	`false`	Puts the photo on the right instead of the left (on large screens).

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

Fields of each entry in `stats`#

Option	Type	Default	Description
`number`	string	—	The big number, e.g. "98%".
`label`	string	—	Caption under the number.

Fields of each entry in `buttons`#

Option	Type	Default	Description
`label`	string	—	Button text. A button without a label is not shown.
`href`	string	—	Link target, e.g. "contact.html" or "#pricing". Defaults to "#".
`style`	string	`primary`	Button look. Values: `primary \| outline \| light \| dark \| accent \| link`
`icon`	string	—	Bootstrap Icons name shown after the label (e.g. "arrow-right"). "link" buttons get an arrow automatically.
`video`	string	—	YouTube embed URL (https://www.youtube.com/embed/VIDEO_ID). When set, the button opens the video in a pop-up instead of following href.

Tips#

Alternate "reverse": true on consecutive about blocks for a zig-zag layout.
Leave out image2 if you only have one good photo; the layout adapts.
Use either stats or list (or keep both short). Two or three stats fit best on one row.

Editing it in the HTML files#

In the built HTML look for <section class="sec sec-about …">. The photos are the img.about-img-main and img.about-img-second elements; the badge is .about-badge. To swap sides, add or remove flex-lg-row-reverse on the inner .row.

Where it's used#

Open these pages in template/ to see it working:

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

About (image + text) "type": "about"