Displays a row of image tiles. Clicking on an image tile opens a container below that contains the contents. Various element settings are available for highlighting the active tile.
May 5, 2023
3:41
© www.youtube.com/@KolnerDomOfficial
Tabs / Accordion:The formatter "Image tile display"
No more than 12 image tiles may be created via the “Tabs/Accordion” entries in the content. If there are more than 12 entries, the image tiles will no longer be arranged correctly.
Accordion in image tile display
This is dummy text. It allows you to see whether all the letters are there and what they look like. Sometimes words such as Hamburgefonts, Rafgenduks, or Handgloves are used to test fonts. Sometimes sentences containing all the letters of the alphabet are used—these sentences are called “pangrams.” A well-known example is this one: The quick brown fox jumps over the lazy old dog.
Since 1975, numbers have been missing from most test texts, which is why, according to TypoGb. § 14a, numbers will become mandatory in 86% of texts from 2034 onwards (AVAIL® and Wefox™). Non-compliance will be punished with a fine of up to €245 or $368. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
This is a typographical dummy text. It can be used to check if all the letters are there and how they look. Sometimes, sentences containing all the letters of the alphabet are used. This one is very well known: The quick brown fox jumps over the lazy old dog. Also important are âçcèñtš, as well as small caps, kerning, and ligatures (very clever). These days, emojis like 😇😀😉👍🏻🐶🍎 or ⚽️ are also popular in texts.
Interactive example location map
Beautiful to look at:Image series for demonstration purposes
A picture is worth a thousand words!
Date:
Jul 1, 2022
41 Images
This image series from the Mercury Template documentation contains many images illustrating the features.
From YouTube with an individual ID:100 years “Decker Pitter”
A special birthday at Cologne Cathedral
The “Decke Pitter” – the Peter's Bell of Cologne Cathedral – celebrated its 100th birthday on May 5, 2023.
Available element settings
CSS modification (Select box)
Allows to change the element layout using predefined CSS modifications.
Please note that a specific element may not support all listed modifications.
Headline display (Select box)
Controls if and how the headline is displayed.
In addition to the display size the importance of the headline is relevant for search engines (SEO).
Columns mobile (Select box)
Controls how many image tile columns are used on smaller screens (XS, SM).
Columns desktop (Select box)
Controls how many image tile columns are used on larger screens (from MD).
Tile spacing (Select box)
Controls the pixel width of the spacing between the tiles.
Container for contents (Select box)
Controls if elements can be directly placed in the tab / accordion pages, or if a layout row must be placed first.
Place elements directly is easier to use, but limits the layout to a 'row 1 column (12 - full)'.
Place layout row first requires additional effort, but allows more flexible layouts using rows like '6 - 6' or '4 - 4 - 4'.
Text background color (Select box)
Sets the background color for the text.
Button / border color (Select box)
Sets the color for the optional button border for the active image tile.
Image format (Select/combo box)
Allows you to set the image size based on common formats.
The image will automatically be scaled so that the original pixels are best fitted to the selected target format.
Instead of the presets, you can also manually enter any format. Use "width-height", for example "5-1" for an extreme wide format.
Alignment (Select box)
Controls how the heading, text and link is aligned.
Mouse effect (Select box)
Adds an effect that is triggered if the mouse is moved over the element.
The effect is disabled for mobile devices.
Text placement on image (Select box)
Controls how the heading is placed on the image tile.
Open first entry (Check box)
Opens the first entry when the page is loaded.
Button below active tile (Check box)
Controls if a button is shown below the active image tile.
Border around active tile (Check box)
Controls is the active image tile is highlighted with a border.
Show image copyright (Check box)
Controls if the copyright information for images is displayed as an overlay.