Grouping Layout Samples
This page shows practical combinations of G and Gi for short statements, procedures, definitions, comparisons, and nested explanatory blocks.
Simple Statement Group
Use this pattern when nearby statements should read as a single conceptual unit without becoming a dotted list.
A collider is a common effect of two or more causes.
Conditioning on a collider can open a path that was previously blocked.
The visual rail groups the statements without adding bullet noise.
Numbered Procedure
Use numbered when the order matters. This is the closest replacement for an ordered list.
State the target effect before adjusting the graph.
Review each non-causal path from treatment to outcome.
Select variables that block backdoor paths without conditioning on colliders.
Keep the graph assumption and estimation result next to each other.
Segmented Rail
Use segmented when each item needs its own rail segment. This keeps the visual grouping but avoids implying that the full group is one uninterrupted block.
The connection runs through a mediator, so the item can be read as one bounded section.
The shared cause creates association between the two children.
The shared effect behaves differently when conditioned upon.
Step Sequence
Use steps when the number should sit to the left of a vertical line that runs along each item. This recreates the earlier sequence style while staying inside the generic grouping primitive.
Decide whether the analysis needs a total effect, direct effect, or another estimand.
Identify each path between treatment and outcome before choosing controls.
Block non-causal paths without conditioning on colliders or descendants that create bias.
Term List with Dividers
Use item titles as terms and item bodies as definitions. The dividers prop creates explicit separation without introducing a separate definition component.
A directional connection that encodes an assumed direct causal relationship.
A non-causal path between treatment and outcome that begins with an arrow into the treatment.
A set of variables used to block non-causal paths while preserving the causal path of interest.
Compact Comparison
Use columns for peer items that can be compared quickly. Columns collapse to a single column on mobile.
Blocks a backdoor path and is not a descendant of the treatment.
Opens a collider path or blocks part of the causal effect.
Is correlated with treatment and outcome, but its role in the graph is unclear.
Does not sit on an open path between treatment and outcome.
Emphasized Warning Block
Use rail="bracket" and weight="strong" sparingly when a group needs stronger visual emphasis.
Adjust for variables that improve prediction or balance.
Adjust only for variables whose graphical role supports identification.
A variable can improve an associational model while biasing a causal estimate.
Mixed Content
Item bodies can contain paragraphs, formulas, callouts, and other MDX components.
Without evidence on the common child, the causes are independent:
Conditioning on the common child opens the path:
This is why a variable that looks useful for prediction can be dangerous for causal adjustment.
Link Components
SmartLink and SmartLinkGroup work inside item bodies. Use spacing="none" when the link component should align with the item body instead of adding standalone vertical margins.
Nested Groups
Nested groups support top-down or bottom-up editing. Wrap the smallest block first, then wrap the larger section, or do the reverse.
Confirm that the intervention variable is correctly represented.
Confirm that the response variable is downstream of the treatment.
Preserve all causal paths from treatment to outcome.
Block the mediated paths intentionally.
Combination Stress Test
These examples intentionally mix props that are likely to appear together in real pages.
Information available before observing the current evidence.
Information after evidence has been entered and propagated.
Enter evidence and inspect the posterior.
Fix a variable state and estimate the causal response.
Review the difference between observational and interventional results.
Decide whether the path transmits association.
Verify which conditioning statement blocks it.
Confirm that the estimator matches the estimand.
Keep the graph assumption near the numeric result.
Some content is still semantically a list and should stay as Markdown:
- Tab
- Semicolon
- Comma
- Space
When the local sequence is subordinate to an item, a native ordered list can remain inside the item body:
- Select the node.
- Open the contextual menu.
- Choose the relevant command.
Minimal Source Patterns
<G title="Statements">
<Gi>Text.</Gi>
<Gi>Text.</Gi>
</G><G title="Workflow" numbered>
<Gi title="First">Text.</Gi>
<Gi title="Second">Text.</Gi>
</G><G title="Sections" segmented>
<Gi title="First section">Text.</Gi>
<Gi title="Second section">Text.</Gi>
</G><G title="Workflow" steps>
<Gi title="First">Text.</Gi>
<Gi title="Second">Text.</Gi>
</G><G title="Terms" rail="bracket" dividers>
<Gi title="Term">Definition.</Gi>
<Gi title="Term">Definition.</Gi>
</G><G title="Options" columns={2} compact>
<Gi title="Option A" marker="A">Text.</Gi>
<Gi title="Option B" marker="B">Text.</Gi>
</G>