Omnira Docs v1.0.0

Section reference › Content

Feature tabs "type": "feature-tabs"

Clickable tabs that each reveal an image with a title, text, checklist and button. Use it to walk through several product features or services without a long page.

Example of the feature-tabs section
The example below, rendered with placeholder images.

Example#

Paste this into the sections list of a page file:

JSON
{
  "type": "feature-tabs",
  "eyebrow": "How it works",
  "title": "One tool from plan to delivery",
  "items": [
    {
      "label": "Plan",
      "icon": "kanban",
      "title": "Plan every sprint in minutes",
      "text": "Drag tasks onto the board, set owners and due dates, and see capacity at a glance.",
      "list": [
        "Board, list and timeline views",
        "Reusable templates",
        "Workload per person"
      ],
      "image": "placeholder",
      "button": {
        "label": "Explore planning",
        "href": "features.html#plan",
        "style": "link"
      }
    },
    {
      "label": "Track",
      "icon": "graph-up",
      "title": "Know where things stand",
      "text": "Live dashboards show progress, blockers and budgets without a single status meeting.",
      "list": [
        "Real-time dashboards",
        "Automatic weekly reports"
      ],
      "image": "placeholder"
    },
    {
      "label": "Share",
      "icon": "people",
      "title": "Keep clients in the loop",
      "text": "Invite clients to a read-only portal with the updates they care about.",
      "list": [
        "Client portal",
        "Comment threads",
        "Approval requests"
      ],
      "image": "placeholder",
      "button": {
        "label": "See the portal",
        "href": "features.html#share",
        "style": "link"
      }
    }
  ]
}

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
layoutstringtopWhere the tab buttons sit.
Values: top | side
itemsarray—The tabs.

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

Fields of each entry in items#

OptionTypeDefaultDescription
labelstring—Tab button text.
iconstring—Bootstrap Icons name on the tab button.
titlestring—Heading inside the tab.
textstring—Paragraph.
listarray—Checklist (strings).
imagestring—Image on the left of the tab.
buttonobject—One button: { "label", "href", "style", "icon" }.

Variants and styles#

top#

Tab buttons in a row above the content.

JSON
{
  "type": "feature-tabs",
  "eyebrow": "How it works",
  "title": "One tool from plan to delivery",
  "items": [
    {
      "label": "Plan",
      "icon": "kanban",
      "title": "Plan every sprint in minutes",
      "text": "Drag tasks onto the board, set owners and due dates, and see capacity at a glance.",
      "list": [
        "Board, list and timeline views",
        "Reusable templates",
        "Workload per person"
      ],
      "image": "placeholder",
      "button": {
        "label": "Explore planning",
        "href": "features.html#plan",
        "style": "link"
      }
    },
    {
      "label": "Track",
      "icon": "graph-up",
      "title": "Know where things stand",
      "text": "Live dashboards show progress, blockers and budgets without a single status meeting.",
      "list": [
        "Real-time dashboards",
        "Automatic weekly reports"
      ],
      "image": "placeholder"
    },
    {
      "label": "Share",
      "icon": "people",
      "title": "Keep clients in the loop",
      "text": "Invite clients to a read-only portal with the updates they care about.",
      "list": [
        "Client portal",
        "Comment threads",
        "Approval requests"
      ],
      "image": "placeholder",
      "button": {
        "label": "See the portal",
        "href": "features.html#share",
        "style": "link"
      }
    }
  ]
}

side#

Tab buttons stacked in a column on the left (on large screens).

JSON
{
  "type": "feature-tabs",
  "layout": "side",
  "tone": "alt",
  "eyebrow": "How it works",
  "title": "One tool from plan to delivery",
  "items": [
    {
      "label": "Plan",
      "icon": "kanban",
      "title": "Plan every sprint in minutes",
      "text": "Drag tasks onto the board, set owners and due dates, and see capacity at a glance.",
      "list": [
        "Board, list and timeline views",
        "Reusable templates",
        "Workload per person"
      ],
      "image": "placeholder",
      "button": {
        "label": "Explore planning",
        "href": "features.html#plan",
        "style": "link"
      }
    },
    {
      "label": "Track",
      "icon": "graph-up",
      "title": "Know where things stand",
      "text": "Live dashboards show progress, blockers and budgets without a single status meeting.",
      "list": [
        "Real-time dashboards",
        "Automatic weekly reports"
      ],
      "image": "placeholder"
    },
    {
      "label": "Share",
      "icon": "people",
      "title": "Keep clients in the loop",
      "text": "Invite clients to a read-only portal with the updates they care about.",
      "list": [
        "Client portal",
        "Comment threads",
        "Approval requests"
      ],
      "image": "placeholder",
      "button": {
        "label": "See the portal",
        "href": "features.html#share",
        "style": "link"
      }
    }
  ]
}

Tips#

  • Three to five tabs work best; keep labels to one or two words.
  • Use images of the same size in every tab so the height does not jump.

Where it's used#

Open these pages in template/ to see it working:

  • Creative Agency: template/creative-agency/home-2.html (source src/demos/creative-agency/pages/home-2.json)
  • Corporate: template/corporate/index.html (source src/demos/corporate/pages/index.json)
  • Finance: template/finance/index.html (source src/demos/finance/pages/index.json)
  • Law Firm: template/law-firm/home-2.html (source src/demos/law-firm/pages/home-2.json)
  • SaaS Product: template/saas/features.html (source src/demos/saas/pages/features.json)
  • Mobile App: template/mobile-app/features.html (source src/demos/mobile-app/pages/features.json)
  • Online Academy: template/education/home-2.html (source src/demos/education/pages/home-2.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/index.html (source src/demos/hotel/pages/index.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/index.html (source src/demos/yoga/pages/index.json)
  • Day Spa & Salon: template/spa/home-2.html (source src/demos/spa/pages/home-2.json)
  • Medical Clinic: template/medical/patient-info.html (source src/demos/medical/pages/patient-info.json)
  • Dental Clinic: template/dental/home-2.html (source src/demos/dental/pages/home-2.json)
  • Pet Care: template/pet-care/home-2.html (source src/demos/pet-care/pages/home-2.json)
  • Construction: template/construction/home-2.html (source src/demos/construction/pages/home-2.json)
  • Car Dealer: template/car-dealer/index.html (source src/demos/car-dealer/pages/index.json)
  • Travel Agency: template/travel/home-2.html (source src/demos/travel/pages/home-2.json)
  • Photographer: template/photography/home-2.html (source src/demos/photography/pages/home-2.json)
  • Architecture Studio: template/architecture/home-2.html (source src/demos/architecture/pages/home-2.json)
  • Interior Design: template/interior-design/home-2.html (source src/demos/interior-design/pages/home-2.json)
  • Music Festival: template/music-festival/home-2.html (source src/demos/music-festival/pages/home-2.json)
  • Fashion Store: template/fashion-store/home-2.html (source src/demos/fashion-store/pages/home-2.json)
  • Logistics: template/logistics/index.html (source src/demos/logistics/pages/index.json)