Omnira Section reference
Every page is built from these 58 section types. Each one below has all its options, a copy-and-paste example and links to demo pages that use it.
How to use a section: copy its example into the
"sections": [ … ] list of any page file, save, and the page rebuilds. See Pages and sections.Heroes & page tops#
Hero
heroThe big opening section at the top of a home page: headline, intro, buttons and a visual. Ten layouts, from a simple split to a photo slider, video, lead form or property search.Page headerpage-headerThe title banner at the top of an inner page (About, Contact, Services...), with a breadcrumb trail and an optional background photo. Use it as the first section of every page that is not a home page.Content#
About (image + text)
aboutA 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.ArticlearticleA full blog post: cover image, meta line, rich-text body, tags, author box and comment form, with a sidebar of categories, recent posts and tags. Put a page-header above it for the post title.Blog cardsblogA grid of blog or news cards with image, category, date, author, title and excerpt. Use it for a "Latest news" block or a full blog index page.CountdowncountdownA centred band with a live days/hours/minutes/seconds countdown to a date, plus heading and buttons. Use it for events, launches and sales.Call to actionctaA short, bold block with a heading, one line of text and buttons that asks visitors to take the next step. Four styles: coloured band, boxed card, photo background or split with image.Detail pagedetailA complete detail page for one record (a service, course, room, tour, car, event, project…): breadcrumb, title, key facts, photo gallery, overview, highlights, included list, accordion, spec table, video and a sticky sidebar with price, buttons or a form. It belongs on a generated page (one page per record).FAQfaqFrequently asked questions as an accordion: click a question to open its answer. Centred layout, or split with the heading and buttons on the left.Feature tabsfeature-tabsClickable 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.Features gridfeaturesA grid of short features or benefits, each with an icon (or number), title and text. Four looks: cards, boxed, minimal and list.Job openingsjobsA list of open positions, each with department, title, description, location, contract type, salary and an "Apply now" button. Use it on a careers page.MarqueemarqueeA band of large words that scrolls sideways in a loop. Use it between sections to repeat your services, values or event name.Process stepsprocessA row of numbered steps (01, 02, 03...) or icons, each with a short title and text. Use it to explain how you work, how to get started or what happens after someone books.Schedule / agendascheduleA timetable with one tab per day, listing each session's time, title, speaker and room. Use it for conference agendas, festival line-ups, class timetables or wedding-day plans.ServicesservicesA grid or list of your services in one of four styles: photo cards, icon cards, text over photos, or numbered rows. Use it to show what you offer, each with an optional price and link.Skills / progress barsskillsText on one side and animated percentage bars on the other, with an optional photo above the bars. Use it for skills, expertise levels, project progress or survey results.Split listsplit-listA heading and buttons on the left that stay in place while a numbered list scrolls by on the right. Use it for reasons to choose you, values, FAQs-style points or a step-by-step guide with more text.Stats / countersstatsA row of big numbers that count up when they scroll into view, each with a label and optional icon. Use it to show key figures such as years in business, clients served or results achieved.Text / rich contenttextA free-form block of your own HTML (paragraphs, headings, lists, links) under an optional section heading. Use it for privacy policies, terms, a story, or anything the other sections do not cover.TimelinetimelineA vertical timeline of milestones, each with a year, title and short text. Use it for your company history, a career path or a project roadmap.Zigzag rowszigzagRows 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.Showcase & media#
Before / after slider
before-afterTwo photos stacked on top of each other with a draggable handle to compare them. Ideal for renovations, dental work, retouching or cleaning results.Bento gridbentoA mosaic of mixed tiles (photos, big numbers, text, quotes and checklists) in different sizes. Use it for a lively overview of a company, product or venue.GallerygalleryA masonry photo grid; clicking a photo opens it full size in a lightbox with captions and next/previous. Use it for portfolios, venues, events and projects.Listing cardslistingsGeneral-purpose cards with a photo, badge, price, rating, title, subtitle and small facts. Use it for rooms, courses, tours, cars, classes, menus or any catalogue.Portfolio gridportfolioA grid of project images with captions and category filter buttons. Use it to show case studies, past work or a gallery of projects.Card slidersliderA horizontal row of cards that visitors swipe or scroll with arrow buttons. Three styles: content cards, image tiles or quote cards. Use it for blog posts, destinations, rooms, products or reviews when a grid would be too long.Image tilestilesClickable photo tiles with a title and subtitle on the image. Use them for categories, destinations, collections or departments that each lead to their own page.Video bannervideoA full-width photo with a large play button that opens a YouTube or Vimeo video in a pop-up, plus an optional title, text and buttons. Use it for a brand film, a tour or a product demo.People & social proof#
Awards
awardsA clean list of awards or recognitions, one row each with year, title, organisation and category. Good for agencies, restaurants, architects and law firms.Logo striplogosA row of client or partner logos with an optional caption such as "Trusted by". Logos can be image files or plain names shown as styled wordmarks.Person profilepersonA full profile page for one person: photo card with contact details on the left, biography, quote, stats, specialties, education and a contact form on the right. Use it on generated pages for doctors, lawyers, trainers, speakers, chefs and other team members.Big quotequoteOne large, centred statement or testimonial with an optional name, role and portrait. Use it for a founder's message, a mission statement or a standout client quote.TeamteamPortrait cards for your team with name, role, a short bio and social icons that appear on the photo. Use it for staff, doctors, teachers, speakers or partners.TestimonialstestimonialsCustomer quotes with name, role, photo and star rating, as a grid of cards or a large rotating carousel. Use it to build trust near your pricing or contact sections.Pricing & commerce#
Shopping cart
cartA cart page with a product table (quantity steppers, remove buttons, coupon field) and an order summary with subtotal, shipping, tax and total. It is a front-end mock-up that recalculates in the browser.CheckoutcheckoutA checkout page: contact and shipping form on the left, order summary with totals on the right. Front-end only; the form posts to formAction in site.json.Menu / price listmenuA price list grouped into tabs, with dotted leaders between each name and its price. Use it for restaurant menus, spa treatments, barber services or any list of named items with prices.Plan comparison tableplan-compareA feature-by-feature table comparing your plans, with check marks, dashes or short text in each cell. Use it under a pricing section so visitors can see exactly what each plan includes.Pricing planspricingSide-by-side plan cards with price, feature list and a button, plus an optional monthly/yearly switch. Use it for subscriptions, memberships, packages or room rates.Product pageproduct-detailThe top of a shop product page: photo gallery, name, rating, price, colour and size pickers, quantity and add-to-cart button, perks, and Details / Specifications / Reviews tabs. Use it on pages generated from your product list.Product gridproductsShop product cards with photo, category, name, rating and price, and a second photo on hover. Use it for featured products, new arrivals, related items or a full shop page.Forms & contact#
Contact
contactContact details and opening hours on the left, a contact form on the right, and an optional Google map underneath.Form with info panelform-splitA booking or enquiry form on the right with an info panel (photo, heading, checklist, contact details) on the left. Use it for bookings, quotes, trial sign-ups and admissions.Map bandmapA full-width Google map with a floating card of address, hours and phone, plus buttons. Use it near the bottom of a contact or location page.Newsletter signupnewsletterA boxed email signup with a heading on the left and an email field plus button on the right. Use it near the bottom of a page to grow your mailing list.Real estate#
Agent profile
agent-profileThe top of a real-estate agent's personal page: photo card with contact details, bio, stats, specialties, languages and a message form. It is filled from one agent record, so it belongs on a generated page (one page per agent).AgentsagentsA grid of real-estate agent cards with photo, role, listing count and call/email buttons. Each card links to that agent's profile page.Property comparisoncompareA side-by-side table comparing homes on price, size, rooms and more. Visitors pick homes with the compare button on property cards; until they do, the default homes are shown.Mortgage calculatormortgageAn interactive mortgage calculator that shows the estimated monthly payment, loan amount and total interest. Use it on real estate or finance sites, with a heading and selling points beside it.Property listingspropertiesReal estate listing cards with price, address, beds, baths and area, plus save and compare buttons. Can add a filter sidebar, sort bar, grid/list switch and pagination. Use it for featured homes, search results, rentals or a saved-homes page.Property pageproperty-detailThe complete body of a single listing page: photo gallery, price, key facts, description, details table, features, floor plans, video tour, map, nearby places, mortgage calculator, agent contact card and tour booking form. Use it on the page generated for each property.Property searchsearchA property search bar with keyword, city, type, max price and bedrooms, and optional Buy/Rent tabs. It sends visitors to your listings page with those filters applied. Use it on real estate home pages.Utility pages#
Sign in / register
authA login card with "Sign in" and "Create account" tabs next to a photo with a quote. Use it for a login or member page; the forms are front-end only.Coming sooncoming-soonA full-screen dark "launching soon" or maintenance screen with a background photo, countdown and an email sign-up field. Use it as the only section on its page.Error / 404errorA centred "page not found" screen with a big error code, message and buttons back to safety. Use it as the only section on 404.html.