Columns, Accordions & Micro Tabs
ROI Studio provides layout components that help organise Inputs and Outputs into clearer, more structured experiences.
Use Columns, Accordions and Micro Tabs when a simple vertical sequence of components isn't the best way to present your model.
Each component solves a different layout problem:
Columns
Positioning related elements side by side
Accordion
Grouping content into collapsible panels
Micro Tabs
Organising Output content into tabbed sections
Columns
Columns let you position elements side by side instead of displaying everything vertically.
Columns are available under both Inputs and Outputs.
They can be useful for:
Comparing related assumptions
Placing related KPIs together
Creating more compact layouts
Establishing visual relationships between elements
Add Columns
To add Columns:
Open Show Components.
Choose Columns from Inputs or Outputs.
Set the Number of columns.
Configure the column widths.
Set alignment and spacing.
Configure responsive or visibility behaviour if required.
Select Save.
Add or move elements into the Columns.
Set column widths
Use Set column widths and Column widths (%) to control the amount of space assigned to each column.
The widths should total approximately 100%.
For example, two equal columns could use:
50% | 50%
while a layout with a larger primary area could use:
65% | 35%
If the widths don't total correctly, use:
Normalize to 100%
before saving.
If a Columns component fails to save, checking and normalising the widths is a useful first troubleshooting step.
Alignment and spacing
Columns provide controls for areas such as:
Component alignment
Grid padding
Column spacing
Field stack gap
Use these settings to create appropriate separation between elements without introducing unnecessary empty space.
Responsive behaviour
Columns also provide a Responsive setting.
Use the available responsive configuration when the layout needs to adapt appropriately to different viewing conditions.
Always Preview a Columns layout after changing its structure or widths.
Nest elements inside Columns
Once the Columns container has been created, add or move other elements into its columns.
This allows Inputs or Outputs to become part of the layout rather than simply appearing above or below it.
You can organise nested elements using the canvas or Navigator.
For more information, see Reordering & Layout with the Navigator.
Avoid excessive nesting
Columns can provide useful structure, but avoid unnecessarily nesting Columns inside other Columns.
Deeply nested layouts can make a model harder to understand and maintain.
Prefer the simplest layout that communicates the relationship between the elements.
Accordions
An Accordion groups content into collapsible panels.
Accordions are available under both Inputs and Outputs.
They can be useful when you want to organise related content while reducing the amount of information visible at one time.
Add an Accordion
To add an Accordion:
Open Show Components.
Choose Accordion from Inputs or Outputs.
Set the Number of panels.
Configure each panel.
Choose whether multiple panels can remain open.
Configure styling and visibility if required.
Select Save.
Add elements into the appropriate panels.
Configure panels
Each panel can have its own:
Panel title
Expanded by default setting
Use clear titles that tell the user what they'll find when they open the panel.
For example:
Current Costs
Operational Assumptions
Implementation Costs
Additional Benefits
Clear panel names are more useful than generic labels such as Section 1 or More Information.
Allow multiple panels to remain open
Use Allow multiple panels open to control Accordion behaviour.
By default, the Accordion uses a single-drawer behaviour with automatic closing.
This means opening another panel closes the currently open panel.
Enable multiple open panels when users benefit from viewing information from several sections simultaneously.
Choose which panels open by default
Use Expanded by default for each panel to control its initial state.
For longer forms, having only the first relevant panel expanded can make the initial experience easier to scan.
Avoid opening every panel automatically when doing so defeats the purpose of using an Accordion.
Style the Accordion
You can configure Text & Icon Color.
If the colour is left empty, ROI Studio can automatically calculate an appropriate colour for contrast.
You can also configure the Expand/Collapse Icon.
The icon rotates automatically when the panel opens or closes.
Nest elements inside panels
Once the Accordion has been created, add the appropriate elements inside each panel.
For example:
Current Environment
Annual Volume
Current Cost
Current Performance
Future State
Expected Improvement
Adoption
New Operating Cost
The Accordion then provides a structured way of moving between those groups.
Micro Tabs
Micro Tabs organise Outputs into tabbed sections.
Unlike Columns and Accordions, Micro Tabs are available under Outputs only.
They can be useful when several related groups of results need to occupy the same area without displaying everything simultaneously.
Add Micro Tabs
To add Micro Tabs:
Open Show Components.
Go to Outputs.
Select Micro Tabs.
Set the Number of tabs.
Enter a label for each tab.
Choose the Default tab.
Configure visibility if required.
Select Save.
Add Output elements into the appropriate tabs.
Label your tabs
Keep tab labels short and easy to understand.
For example:
Financial
Operational
3-Year View
can be easier to navigate than long descriptive sentences.
Each tab should represent a meaningful grouping of Outputs.
Choose the default tab
Use Default tab to determine which tab users see first.
Choose the tab containing the information that is most useful when someone initially reaches that part of the model.
For example, if the main purpose of the section is to communicate financial value, the default tab might be:
Financial Impact
with supporting operational information available in another tab.
Nest Outputs inside tabs
After creating the Micro Tabs component, add the relevant Output elements into each tab.
Micro Tabs can therefore act as a container for groups of related results.
Avoid creating tabs simply to reduce the amount of content on screen. Each tab should represent a useful distinction in the results.
Conditional visibility
Columns, Accordions and Micro Tabs support visibility behaviour.
Use a Visibility Condition when the entire layout component should only appear under particular circumstances.
Remember that hiding a container can affect the visibility of the elements nested within it.
For more information, see Conditional Visibility & Calculate on Hidden.
Deleting layout components
Columns, Accordions and Micro Tabs can contain other elements.
ROI Studio therefore protects nested content when you attempt to delete one of these containers.
Before deleting a container:
Review the elements inside it.
Move or delete those nested elements.
Confirm that the container is empty.
Delete the container.
If nested elements remain, ROI Studio can block the deletion.
For more information, see Editing, Copying & Deleting Elements.
Choosing the right layout
A useful guide is:
Place elements next to one another
Columns
Let users expand and collapse groups
Accordion
Switch between groups of Outputs
Micro Tabs
These components can be combined with the wider model structure, but don't add complexity unless it improves the experience.
Example structure
A Results area might use:
Output Header — Business Case Results
↓
Columns
Net Annual Benefit | ROI | Payback
↓
Micro Tabs
Financial Impact | Operational Impact | 3-Year View
Or an Input area might use:
Input Header — Assumptions
↓
Accordion
Current Environment Future State Assumptions Costs
The appropriate structure depends on the business case you're presenting.
Preview layout changes
Always Preview after introducing or significantly changing layout components.
Check:
Whether elements appear in the intended container
Whether Column widths look appropriate
Whether Accordion panels behave as expected
Whether the correct Micro Tab opens by default
Whether nested components remain understandable
Whether visibility conditions behave correctly
Whether the layout works as part of the wider model
A layout that looks organised on the editing canvas should also make sense when someone actually interacts with the model.
Best practices
When using layout components:
Use Columns when side-by-side presentation adds meaning.
Keep Column widths close to a total of 100%.
Use Normalize to 100% when necessary.
Avoid excessive nested Columns.
Give Accordion panels clear titles.
Don't expand every Accordion panel by default without a reason.
Keep Micro Tab labels concise.
Put the most important results in the default Micro Tab.
Remove or move nested elements before deleting a container.
Preview significant layout changes before publishing.
Last updated