Four ways to organise a lot of information into a small space: Accordion, Tabs, List and Definition List. There's a fifth, Image Accordion, covered in its own article.
You'll find them all together in the Advanced Content section of the Add Elements panel, or type 'content' into the search box to bring them all up at once.
Which one should I use?
| Element | What it does | Great for |
|---|---|---|
| Accordion | Collapsible bars that open when clicked | FAQs, long explanations, terms and policies |
| Tabs | Content panes switched by a row of tabs | Overview, Features, Pricing: related topics of similar weight |
| List | Titled items side by side | Plan comparisons, service line-ups, feature rundowns |
| Definition List | Clean two-part term-and-explanation layout | Glossaries, jargon busters, spec sheets |
Choose carefully: you can't convert one into another later. Each is a separate element with its own settings. If you change your mind, add the element you want and copy your text across, then delete the old one.
Adding and editing content
- 1Add your chosen element from Add Elements › Advanced Content.
- 2It arrives with four example items already filled in, using real sample wording rather than obvious placeholder text, so remember to replace all four.
- 3Hover the element and click the pencil icon to open the panel on the Items tab.
- 4Click any item to open it, then edit its Title (the question, tab name or item heading), Description (the body text) and Icon (an optional small image, not available on Definition List).
- 5Click + Add new at the bottom to add another item.
- 6Drag the grip handle to reorder, or click the bin icon to delete.
Formatting your text
The panel's Description box is plain text, so a blank line starts a new paragraph. For bold, links or bullet points, click the text directly on the page instead and use the editing toolbar that appears. You can also use the AI rewrite option there.
Deleting is instant: there's no 'are you sure?' prompt. If you delete the wrong item, use the Undo button at the top of the panel (or Ctrl+Z).
Settings
Open the Settings tab. Which options you see depends on the element.
General
- Title alignment: Left, Centre or Right (not on Tabs)
- Heading type: H1 to H6, H3 by default. This affects how search engines read your headings, not just their size.
- Tab position (Tabs only): Top or Left
Icons (Accordion, Tabs and List)
- Icon size (px): 10 to 200, 40 by default
- Icon position: Left, Right, Top or Bottom (List doesn't offer Bottom)
Icon size and position apply to every item in the element, not to individual items.
SEO (Accordion only)
FAQ schema markup: covered in Get your FAQs into Google below.
Get your FAQs into Google
Accordions include FAQ schema markup, switched on by default. This quietly tells search engines that your accordion is a list of questions and answers. For the wider picture, see Schema.org markup.
On the Business plan, your questions and answers are also published in a format Google can read directly, so your FAQs can appear as an expandable dropdown right in the search results.
One rule: if you have more than one accordion on the same page, switch this off on the second and any after it. Multiple sets of FAQ data on one page causes duplicate-content warnings in Google's tools.
Styles
Open the Styles tab, and use the Desktop / Mobile buttons at the top to switch between devices.
Colours are set once and apply to all devices, so they're only editable on Desktop:
| Element | Colours available |
|---|---|
| Accordion | Background, Border, Title background, Title, Body text |
| Tabs | Background, Border, Title background, Active title background, Title, Active title colour, Body text |
| List | Background, Border, Separator, Title background, Title, Body text |
| Definition List | None; it follows your site theme |
Typography. Set Title font size (px) and Body text size (px). Desktop and mobile are separate values, so set them on each device pill if you want them to differ.
The size sliders show a number before you touch them (18 and 16 on desktop). That's just the current size, not a value being forced on you. Once you move a slider, that text is locked to a fixed size at every screen width, so only change it if you need to.
Good to know
- Accordions start fully closed, and visitors can have several open at once. Neither is adjustable.
- Tabs always open on the first tab, and 'first' means whichever item is at the top of your Items list, so reordering changes which one shows.
- Tabs become an accordion on phones. The tab strip is replaced by collapsible bars, all closed until tapped. 'Tab position: Left' has no effect at that size.
- Lists scroll sideways on phones. Two to four items works well; five or six becomes a swipe.
- Icons shrink on smaller screens whatever size you set, and there's no separate mobile icon size.
- Empty items still show up as a blank bar, an unlabelled tab or an empty column. Delete items you're not using rather than leaving them blank.
Was this helpful?
Last updated:
Related Articles
Image Accordion
Pair photos with expandable text: click a heading and the matching picture cross-fades in. Set it up, style it, and get the best results from it.
4 min read
Content Blocks
Add, edit, move, and style text content blocks, the core building block of every page.
4 min readVideo
Elements & Plugins
Every drag-and-drop element in Limecube, grouped as you'll find them in the Add Elements panel: Basic, Advanced Content, Box Layouts, Gallery and Blog.
5 min read
Still need help?
Submit a Support Ticket