Cards, Gallery and Carousel read the same content list. A card, a gallery image and a slide carry the same fields: changing the block type loses nothing, and you can try all three on the same content.
Cards
Each card carries its own stack of elements, from top to bottom: an image, a title, a text, a status, a button... Add, remove, move and duplicate cards just like elements.
| Setting | What it does |
|---|---|
| Minimum card width | You declare a width, never a number of columns: the browser fits as many cards as the space allows. Three on a large screen, two when the column narrows, one on a phone. Adding a card requires no change to any setting. |
| Flow | Side by side, or One under the other for a side column. |
| Card shape | Framed, Shadow only or None. Without a frame, only the content remains: that is what an image mosaic needs. |
| Hover effect | The template lights the card up when the mouse passes over it. Without this effect, the card no longer moves; the keyboard focus ring stays in every case. |
| Alignment | The card's content on the left, in the centre or on the right. The card keeps the height of its neighbours. |
| Highlight | Neutral, Primary or Secondary. In a row, only one card should be highlighted, otherwise none stands out. Say it in the card's text too: colour alone is not perceived by everyone. |
Gallery
| Setting | What it does |
|---|---|
| Thumbnail ratio | Square, 4/3, 16/9, 21/9, 3/4, or Free. The same ratio for all, otherwise the grid ripples. |
| Minimum thumbnail width | In rem. The gallery counts its own columns: the smaller the value, the more images per line. |
| Gap between thumbnails | Tight for a mosaic, Normal, or Wide to set off each image. |
| Captions | Under the image, always readable; On hover, laid over the image when the mouse passes or on tabbing; or None. On a touch screen, hover captions stay underneath. |
| Enlarge on click | Opens the image large in a viewer, with arrows, the keyboard, and Escape to close. The image's caption is repeated there. An image that already carries a link keeps its own. |
Carousel
| Setting | What it does |
|---|---|
| Slide ratio | All slides take this ratio, up to the extra wide 32/9 banner, so the page does not jump from one image to the next. |
| Veil under the text | None, Soft or Strong: a dark gradient that keeps the text readable over a light photo. |
| Arrows | On the sides, Under the image, Bottom right, as buttons, or None. Without arrows, the dots, the keyboard and swiping remain. |
| Dots | One per slide: they show how many there are. |
| Loop | Go back to the first slide after the last. |
| Automatic scrolling | In seconds. Zero is the recommended setting: a carousel that moves on its own makes readers lose their place. Scrolling stops on hover and on keyboard use. |
Three slides are enough: beyond that, nobody gets to the end.
Up to date for Opus 1.5.