Legal Accordion - Usage
Basic Guidelines
Legal Accordions should only use the bordered variant of the Accordion component. This is to allow consistency across all of Sky UI for legal content.
Content Guidance
Customised content — Set-up in Figma
The Legal Accordion comes with three placeholder sections which can be edited as required.
If necessary, the element ‘Replaceable Legal Accordion Content Area’ can be swapped for a locally created component without the need to detach the Legal Accordion. There is no need to include padding or a background fill in your own locally created component.
To learn more about how composable components are used in Figma, please have a look at the Designer Quickstart.
Alignment
Sections are always placed at full width of the viewport.
Mobile
Desktop
The Legal Accordion inside the section will only expand up to a width of 996px to span 10 columns on a large viewport.
The example below is downscaled proportionally for illustration purposes.
