Live Example
Resize your browser below 768px to see the right column collapse into a drawer.
Item Title
A short summary of the selected item goes here.
Section A
First piece of supporting content.
Second piece of supporting content.
Section B
Additional context or metadata.
Criteria A4 / 5
Criteria B5 / 5
Criteria C3 / 5
TwoColumnLayout Props
| Prop | Type | Description |
|---|---|---|
| drawerTitle | string | Title shown in the mobile drawer header. Defaults to “Details”. |
| className | string | Additional classes on the root container. |
Sub-components: TwoColumnLayout.Left, TwoColumnLayout.Right — each accept className and children.
Usage
<TwoColumnLayout drawerTitle="Right Panel">
<TwoColumnLayout.Left>
<Tabs defaultValue="overview">
<Tabs.List>
<Tabs.Trigger value="overview">Overview</Tabs.Trigger>
<Tabs.Trigger value="details">Details</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="overview">...</Tabs.Content>
<Tabs.Content value="details">...</Tabs.Content>
</Tabs>
</TwoColumnLayout.Left>
<TwoColumnLayout.Right>
<Tabs defaultValue="ratings">
<Tabs.List>
<Tabs.Trigger value="ratings">Ratings</Tabs.Trigger>
<Tabs.Trigger value="activity">Activity</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="ratings">...</Tabs.Content>
<Tabs.Content value="activity">...</Tabs.Content>
</Tabs>
</TwoColumnLayout.Right>
</TwoColumnLayout>