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) {})