Your address will show here +12 34 56 78

Much like bricks and mortar are used to build a physical structure, this Style Guide serves as the ‘building blocks’ to deliver content, actions, and styling within a User Interface (UI).

In-Card Selector

Anatomy

The In-Card Selector allows users to select items to reveal more information within the card. in-card-selector

Content

Content can be any combination of image, text or iconography.

Alerts

Feedback alerts span the width of the grid between the header and the page content.

Caution Alert

Caution alerts are used when the user needs to be informed of important information that may affect their experience but can continue through their flow. These may be persistent. caution-alert

Error Alert

Error alerts are used when the user needs to be informed of important information and may need to address it before continuing through their flow. These are persistent until the issue has been resolved by the user or Cox. error-alert  

Information Alert

Information alerts are used when the user needs to be informed of announcements and general information. They will not affect the user’s flow and they may be persistent.   notification-alert

Success Confirmation

Success confirmations are used when a task or action has been completed successfully. These can disappear after 5 seconds or remain on the page until the user navigates away. success-alert  

Table

Anatomy

Tabs are used to house multiple pages of information within one screen. The width of the tab is dynamic based on the amount of tabs and width of the window. table

Tooltip

Anatomy

Tooltips are used to reveal more content about an element such as alerts, forms, CTAs and more. tooltip

Tabs

Anatomy

Tabs are used to house multiple pages of information within one screen. The width of the tab is dynamic based on the amount of tabs and width of the window. tabs

Page Numbers

page-numbers