Omnira Section reference › Showcase & media
Card slider "type": "slider"
A 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.
Example#
Paste this into the sections list of a page file:
JSON
{
"type": "slider",
"eyebrow": "Journal",
"title": "Latest from the blog",
"items": [
{
"image": "placeholder",
"label": "Guides",
"title": "How to plan a kitchen renovation without losing your mind",
"text": "A realistic timeline, budget and checklist from our project managers.",
"meta": "Mar 4, 2026 · 6 min read",
"link": "#"
},
{
"image": "placeholder",
"label": "Materials",
"title": "Oak, walnut or ash? Choosing the right wood floor",
"text": "How each one wears, what it costs and where it works best.",
"meta": "Feb 18, 2026 · 4 min read",
"link": "#"
},
{
"image": "placeholder",
"label": "Projects",
"title": "Inside a 1920s townhouse, restored room by room",
"text": "Original details kept, modern comfort added.",
"meta": "Feb 2, 2026 · 8 min read",
"link": "#"
},
{
"image": "placeholder",
"label": "Tips",
"title": "Five small changes that make a rental feel like home",
"text": "No drilling, no deposit worries.",
"meta": "Jan 21, 2026 · 3 min read",
"link": "#"
}
]
}Options#
| Option | Type | Default | Description |
|---|---|---|---|
eyebrow | string | — | Small label shown above the title. The heading is always left-aligned in this section. |
title | string (HTML allowed) | — | Section heading. You can use <em> or <br> inside it. The heading is always left-aligned in this section. |
text | string | — | Short intro paragraph under the title. The heading is always left-aligned in this section. |
items | array | — | The slides. Which fields are used depends on the style; see the "items" fields. |
style | string | cards | Slide design. See the variants below. Values: cards | images | quotes |
label | string | the title, or "Carousel" | Name of the slider read out by screen readers. |
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 (styles "cards" and "images"). |
title | string | — | Slide title (styles "cards" and "images"). |
label | string | — | Small tag: a badge on "cards", a line above the title on "images". |
text | string | — | Paragraph on "cards"; the review text on "quotes". |
meta | string | array | — | "cards" only: small line at the bottom, e.g. "Mar 4, 2026 · 6 min read". An array is joined with " · ". |
link | string | — | Where the slide links to ("cards" and "images"). "href" also works. |
quote | string | — | "quotes" only: used when "text" is empty. |
name | string | — | "quotes" only: reviewer name. |
role | string | — | "quotes" only: reviewer role or company. |
avatar | string | — | "quotes" only: small round portrait. |
rating | number | — | "quotes" only: stars out of 5. Without it a quote icon is shown. |
Variants and styles#
cards#
Default. Photo, badge, title, text and a meta line: good for blog posts, rooms or tours.
JSON
{
"type": "slider",
"eyebrow": "Journal",
"title": "Latest from the blog",
"items": [
{
"image": "placeholder",
"label": "Guides",
"title": "How to plan a kitchen renovation without losing your mind",
"text": "A realistic timeline, budget and checklist from our project managers.",
"meta": "Mar 4, 2026 · 6 min read",
"link": "#"
},
{
"image": "placeholder",
"label": "Materials",
"title": "Oak, walnut or ash? Choosing the right wood floor",
"text": "How each one wears, what it costs and where it works best.",
"meta": "Feb 18, 2026 · 4 min read",
"link": "#"
},
{
"image": "placeholder",
"label": "Projects",
"title": "Inside a 1920s townhouse, restored room by room",
"text": "Original details kept, modern comfort added.",
"meta": "Feb 2, 2026 · 8 min read",
"link": "#"
},
{
"image": "placeholder",
"label": "Tips",
"title": "Five small changes that make a rental feel like home",
"text": "No drilling, no deposit worries.",
"meta": "Jan 21, 2026 · 3 min read",
"link": "#"
}
]
}images#
Tall photo tiles with the title on the image, four per view on large screens: good for destinations or collections.
JSON
{
"type": "slider",
"style": "images",
"tone": "alt",
"eyebrow": "Destinations",
"title": "Where will you go next?",
"items": [
{
"image": "placeholder",
"label": "12 tours",
"title": "Iceland",
"link": "#"
},
{
"image": "placeholder",
"label": "9 tours",
"title": "Japan",
"link": "#"
},
{
"image": "placeholder",
"label": "15 tours",
"title": "Italy",
"link": "#"
},
{
"image": "placeholder",
"label": "7 tours",
"title": "Morocco",
"link": "#"
},
{
"image": "placeholder",
"label": "11 tours",
"title": "Peru",
"link": "#"
}
]
}quotes#
Review cards with stars, text and the reviewer: a swipeable alternative to the testimonials grid.
JSON
{
"type": "slider",
"style": "quotes",
"eyebrow": "Reviews",
"title": "What our guests say",
"items": [
{
"rating": 5,
"text": "The room was spotless, the staff remembered our names and breakfast on the terrace was the highlight of our trip.",
"name": "Laura & James",
"role": "Stayed in June",
"avatar": "placeholder"
},
{
"rating": 5,
"text": "Quiet, stylish and five minutes from the old town. We have already booked again for next spring.",
"name": "Tomás R.",
"role": "Stayed in May",
"avatar": "placeholder"
},
{
"rating": 4,
"text": "Lovely spa and a very comfortable bed. Parking is tight, so arrive early.",
"name": "Aisha K.",
"role": "Stayed in April",
"avatar": "placeholder"
},
{
"rating": 5,
"text": "Perfect for a weekend away. The concierge found us a table at the best restaurant in town.",
"name": "Mark D.",
"role": "Stayed in March",
"avatar": "placeholder"
}
]
}Tips#
- Use at least 4 slides so there is something to scroll to on large screens.
- The heading is always left-aligned with the arrows on the right.
Editing it in the HTML files#
Each slide is a .slider-item inside .slider-track. The track scrolls natively (swipe, trackpad or the arrow buttons in .slider-arrows), so you can add or remove slides freely.
Where it's used#
Open these pages in template/ to see it working:
- Creative Agency:
template/creative-agency/culture.html(sourcesrc/demos/creative-agency/pages/culture.json) - Corporate:
template/corporate/index.html(sourcesrc/demos/corporate/pages/index.json) - Finance:
template/finance/index.html(sourcesrc/demos/finance/pages/index.json) - Law Firm:
template/law-firm/testimonials.html(sourcesrc/demos/law-firm/pages/testimonials.json) - SaaS Product:
template/saas/home-2.html(sourcesrc/demos/saas/pages/home-2.json) - Mobile App:
template/mobile-app/feature-habit-streaks.html(sourcesrc/demos/mobile-app/pages/feature.json) - Tech Conference:
template/conference/index.html(sourcesrc/demos/conference/pages/index.json) - Restaurant:
template/restaurant/home-2.html(sourcesrc/demos/restaurant/pages/home-2.json) - Coffee Shop:
template/cafe/index.html(sourcesrc/demos/cafe/pages/index.json) - Hotel & Resort:
template/hotel/home-2.html(sourcesrc/demos/hotel/pages/home-2.json) - Wedding:
template/wedding/index.html(sourcesrc/demos/wedding/pages/index.json) - Gym & Fitness:
template/gym/index.html(sourcesrc/demos/gym/pages/index.json) - Yoga Studio:
template/yoga/home-2.html(sourcesrc/demos/yoga/pages/home-2.json) - Dental Clinic:
template/dental/index.html(sourcesrc/demos/dental/pages/index.json) - Pet Care:
template/pet-care/home-2.html(sourcesrc/demos/pet-care/pages/home-2.json) - Construction:
template/construction/index.html(sourcesrc/demos/construction/pages/index.json) - Car Dealer:
template/car-dealer/home-2.html(sourcesrc/demos/car-dealer/pages/home-2.json) - Travel Agency:
template/travel/home-2.html(sourcesrc/demos/travel/pages/home-2.json) - Photographer:
template/photography/album-sofia-daniel-lakeside.html(sourcesrc/demos/photography/pages/album.json) - Portfolio:
template/portfolio/index.html(sourcesrc/demos/portfolio/pages/index.json) - Music Festival:
template/music-festival/gallery.html(sourcesrc/demos/music-festival/pages/gallery.json) - Fashion Store:
template/fashion-store/index.html(sourcesrc/demos/fashion-store/pages/index.json)