ContentSplitPanel

Use ContentSplitPanel for a meaningful two-way comparison. Supply an accessible label, meaningful firstLabel and secondLabel, and exactly two complete child panes. position may range from 20 to 80; preserve the comparison in ordinary reading order.

Parameters

Parameter	Required	Default	Description
`label`	Yes	None	Accessible panel label.
`position`	No	`50`	Divider position from 20 to 80.
`firstLabel`	No	`First panel`	Accessible label for the first pane.
`secondLabel`	No	`Second panel`	Accessible label for the second pane.

Example

<ContentSplitPanel
  label="Compare evidence before and after review"
  position={50}
  firstLabel="Before review"
  secondLabel="After review"
>
  <div>
    <h3>Before review</h3>
    <p>The policy has no named source or review date.</p>
  </div>
  <div>
    <h3>After review</h3>
    <p>The policy has an approved source, owner, and review date.</p>
  </div>
</ContentSplitPanel>

Before review

The policy has no named source or review date.

After review

The policy has an approved source, owner, and review date.