Banners
A banner displays an important message which requires an action to be dismissed.
Page Summary
Specifications references
Accessibility
Please follow accessibility criteria for development
Variants
No button
ODSBanner(text: "Two line text string with two actions. One to two lines is preferable on mobile and tablet.",
image: Image("ods_empty", bundle: Bundle.ods))
One button
- Placed next to the text
ODSBanner(text: "Two line text string with two actions. One to two lines is preferable on mobile and tablet.",
image: Image("ods_empty", bundle: Bundle.ods),
button: ODSButton(text: "Button", emphasis: .low) {},
position: .trailing)
- Placed under the text
ODSBanner(text: "Two line text string with two actions. One to two lines is preferable on mobile and tablet.",
image: Image("ods_empty", bundle: Bundle.ods),
button: ODSButton(text: "Button", emphasis: .low) {},
position: .bottom)
Two buttons
ODSBanner(text: "Two line text string with two actions. One to two lines is preferable on mobile and tablet.",
image: Image("ods_empty", bundle: Bundle.ods),
leadingButton: ODSButton(text: "Button 1", emphasis: .low) {},
trailingButton: ODSButton(text: "Button 2", emphasis: .low) {})