See the callouts documentation for a more in-depth discussion.
Floating cards that inform users of changes or offers relating to their flight.
Use callouts in context and in proximity to the content it relates to. The goal is to create a visual hierarchy and relationship between the different elements on the screen.
This will be available in a future version of the AmericanUICore module maintained by Platform Services.
Technical documentation for implementing a callout will be available in the future.
<div style="display: flex;">
<div style="padding: 25px;">
<h3 style="text-align: center">Error</h3>
<img src="../../app-component-images/ios/callout-error.png" style="width: 530px;" alt="Callout for Error Messages" />
</div>
<div style="padding: 25px;">
<h3 style="text-align: center">Alert</h3>
<img src="../../app-component-images/ios/callout-alert.png" style="width: 530px;" alt="Callout for Alert Messages" />
</div>
<div style="padding: 25px;">
<h3 style="text-align: center">Success</h3>
<img src="../../app-component-images/ios/callout-success.png" style="width: 530px;" alt="Callout for Success Messages" />
</div>
<div style="padding: 25px;">
<h3 style="text-align: center">General</h3>
<img src="../../app-component-images/ios/callout-general.png" style="width: 530px;" alt="Callout for General Messages" />
</div>
</div>