Omnira Docs v1.0.0

Section reference › Content

Features grid "type": "features"

A grid of short features or benefits, each with an icon (or number), title and text. Four looks: cards, boxed, minimal and list.

Example of the features section
The example below, rendered with placeholder images.

Example#

Paste this into the sections list of a page file:

JSON
{
  "type": "features",
  "style": "cards",
  "eyebrow": "Why teams switch",
  "title": "Everything you need to grow",
  "columns": 3,
  "items": [
    {
      "icon": "lightning-charge",
      "title": "Set up in minutes",
      "text": "Import your contacts and send your first campaign the same afternoon."
    },
    {
      "icon": "shield-check",
      "title": "Secure by default",
      "text": "Two-factor login, encrypted backups and GDPR-ready data handling."
    },
    {
      "icon": "graph-up-arrow",
      "title": "Reports that make sense",
      "text": "See opens, clicks and revenue per campaign on one clear dashboard."
    },
    {
      "icon": "people",
      "title": "Built for teams",
      "text": "Roles, approvals and shared templates for up to 50 people."
    },
    {
      "icon": "plug",
      "title": "120+ integrations",
      "text": "Connect Shopify, Stripe, Slack and the tools you already use."
    },
    {
      "icon": "headset",
      "title": "Human support",
      "text": "Real people answer chat and email seven days a week.",
      "link": {
        "label": "Contact support",
        "href": "contact.html"
      }
    }
  ]
}

Options#

OptionTypeDefaultDescription
eyebrowstring—Small label shown above the title.
titlestring—Section heading. Simple inline HTML such as <em> or <br> is allowed.
textstring—Short intro paragraph under the title.
headAlignstringcenterAlignment of the eyebrow/title/text block. Any value other than "center" (e.g. "start") left-aligns it.
Values: center | start
stylestringcardsLook of each item.
Values: cards | boxed | minimal | list
columnsnumber3Items per row on large screens.
Values: 1 | 2 | 3 | 4 | 6
itemsarray—The features.

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

Fields of each entry in items#

OptionTypeDefaultDescription
iconstring—Bootstrap Icons name, e.g. "shield-check".
numberstring—Shown instead of an icon when there is no icon, e.g. "01" for steps.
titlestring—Feature title.
textstring—Short description.
linkobject—Optional text link under the text: { "label": "Learn more", "href": "…" }.

Variants and styles#

cards#

White cards with a border and hover lift.

JSON
{
  "type": "features",
  "style": "cards",
  "eyebrow": "Why teams switch",
  "title": "Everything you need to grow",
  "columns": 3,
  "items": [
    {
      "icon": "lightning-charge",
      "title": "Set up in minutes",
      "text": "Import your contacts and send your first campaign the same afternoon."
    },
    {
      "icon": "shield-check",
      "title": "Secure by default",
      "text": "Two-factor login, encrypted backups and GDPR-ready data handling."
    },
    {
      "icon": "graph-up-arrow",
      "title": "Reports that make sense",
      "text": "See opens, clicks and revenue per campaign on one clear dashboard."
    },
    {
      "icon": "people",
      "title": "Built for teams",
      "text": "Roles, approvals and shared templates for up to 50 people."
    },
    {
      "icon": "plug",
      "title": "120+ integrations",
      "text": "Connect Shopify, Stripe, Slack and the tools you already use."
    },
    {
      "icon": "headset",
      "title": "Human support",
      "text": "Real people answer chat and email seven days a week.",
      "link": {
        "label": "Contact support",
        "href": "contact.html"
      }
    }
  ]
}

boxed#

Filled boxes with a coloured icon; works well on the "alt" tone.

JSON
{
  "type": "features",
  "style": "boxed",
  "tone": "alt",
  "eyebrow": "Why teams switch",
  "title": "Everything you need to grow",
  "columns": 3,
  "items": [
    {
      "icon": "lightning-charge",
      "title": "Set up in minutes",
      "text": "Import your contacts and send your first campaign the same afternoon."
    },
    {
      "icon": "shield-check",
      "title": "Secure by default",
      "text": "Two-factor login, encrypted backups and GDPR-ready data handling."
    },
    {
      "icon": "graph-up-arrow",
      "title": "Reports that make sense",
      "text": "See opens, clicks and revenue per campaign on one clear dashboard."
    },
    {
      "icon": "people",
      "title": "Built for teams",
      "text": "Roles, approvals and shared templates for up to 50 people."
    },
    {
      "icon": "plug",
      "title": "120+ integrations",
      "text": "Connect Shopify, Stripe, Slack and the tools you already use."
    },
    {
      "icon": "headset",
      "title": "Human support",
      "text": "Real people answer chat and email seven days a week.",
      "link": {
        "label": "Contact support",
        "href": "contact.html"
      }
    }
  ]
}

minimal#

No box: just icon, title and text. Good for 4 columns.

JSON
{
  "type": "features",
  "style": "minimal",
  "columns": 4,
  "items": [
    {
      "icon": "lightning-charge",
      "title": "Set up in minutes",
      "text": "Import your contacts and send your first campaign the same afternoon."
    },
    {
      "icon": "shield-check",
      "title": "Secure by default",
      "text": "Two-factor login, encrypted backups and GDPR-ready data handling."
    },
    {
      "icon": "graph-up-arrow",
      "title": "Reports that make sense",
      "text": "See opens, clicks and revenue per campaign on one clear dashboard."
    },
    {
      "icon": "people",
      "title": "Built for teams",
      "text": "Roles, approvals and shared templates for up to 50 people."
    }
  ]
}

list#

Icon beside the text, like a list. Suits 2 columns or numbered steps.

JSON
{
  "type": "features",
  "style": "list",
  "columns": 2,
  "eyebrow": "Getting started",
  "title": "Live in three steps",
  "items": [
    {
      "number": "01",
      "title": "Create your account",
      "text": "Sign up with your work email. No credit card needed."
    },
    {
      "number": "02",
      "title": "Import your contacts",
      "text": "Upload a CSV or connect your shop in one click."
    },
    {
      "number": "03",
      "title": "Send your first campaign",
      "text": "Pick a template, write your message and hit send."
    },
    {
      "number": "04",
      "title": "Watch the results",
      "text": "Opens and clicks appear on your dashboard within minutes."
    }
  ]
}

Tips#

  • Match the number of items to the columns (3 or 6 items with 3 columns, 4 or 8 with 4) so rows are full.
  • Browse icon names at icons.getbootstrap.com and drop the "bi-" prefix.

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/download.html (source src/demos/mobile-app/pages/download.json)
  • Tech Conference: template/conference/code-of-conduct.html (source src/demos/conference/pages/code-of-conduct.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/home-2.html (source src/demos/gym/pages/home-2.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/careers.html (source src/demos/construction/pages/careers.json)
  • Car Dealer: template/car-dealer/index.html (source src/demos/car-dealer/pages/index.json)
  • Travel Agency: template/travel/careers.html (source src/demos/travel/pages/careers.json)
  • Architecture Studio: template/architecture/careers.html (source src/demos/architecture/pages/careers.json)
  • Interior Design: template/interior-design/shop.html (source src/demos/interior-design/pages/shop.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/checkout.html (source src/demos/fashion-store/pages/checkout.json)
  • Charity: template/charity/about.html (source src/demos/charity/pages/about.json)
  • Logistics: template/logistics/careers.html (source src/demos/logistics/pages/careers.json)