This environment is not optimized for viewing on small or mobile devices. Please view on a larger browser for the best experience.

If you have any questions, please contact us.

About
Overview
Our Formula
Aon experience
how it works
AccessibilityWhat is Accessibility?Digital Design SystemAccessibility and AonAssistive TechnologyAccessibility & color
Feature Request
Give Feedback
UpdatesVersion 2.4Version 2.3Version 2.2Version 2.1Version 2.0Version 1.3Version 1.2Version 1.1Version 1.0
Foundations
Color
icon libraryActionscontrolsnavigationfeedbackcommunicationsview settingsfilesmiscellaneous
Layout12 column gridBreakpoints
spacinglocal spacingglobal spacing
TypographyHeadlinesparagraphsLink Styling
Components
Core Components
alertsBanner AlertsContextual Alerts
buttonsspecificationsimplementation
filter chipsspecificationsimplementation
on/off controlsspecificationsimplementation
form elements
introductionBest PracticesImplementation
checkboxes
radio buttons
selects
text area
text inputsspecificationsimplementation
Modules
navigation
in-page navigation
HeaderHeader BarNavigation Menus
footerBasic footerRobust Footer
progress bars
TabsHorizontal TabsButton Tabsvertical Tabs
Rail Navigation
overlays
modalsSpecificationsStyles
PopoversStandard PopoverAction Menus
tooltipsInfo TextLabel HoverData VisualizationTooltip Implementation
content containers
cardsSmall CardsLarge cards
expansion panelsspecificationsStyle variationsfunctionality
other
TablesSpecificationsImplementation
Templates
dashboard
forms
processes
standard
Data Visualization
foundations
best practices
colorCategoricalValueperformancebackgroundspecifications
data snapshotsspecificationsPage Layouts
global elementsGrid ElementsLegend ChipsTooltips
typography
chart types
Use Cases
Area chartsingle Area ChartStacked Area Chart100% stacked ChartSpecifications
bar chartsingle Bar ChartsGrouped Bar ChartsStacked Bar Charts100% stacked ChartsSpecifications
circular chartPieDonutSemi-circleSpecifications
line chartSingle Line ChartMultiple Line ChartSpecifications
scatter plotTypesImplementation Specifications

Cards

Cards facilitate scanning and quick comprehension. They are flexible containers for content, actions, and imagery about a single subject. In principle, cards should be easy to scan and have a clear visual hierarchy. The size or type of card is a function of the content, however, card placement should follow the established 12 column grid.

Specifications

Small Cards

Default
Inverse
Anatomy
1) Card Title
style: H3, H4 or H5
2) Card Container
background-color: White
border: 1px solid Gray 04
border-radius: 8px
3) Action Icon (optional)
font-face: Font Awesome 6 Pro Light
color: Teal Dark
font-size: 20px
line-height: 44px
SIZE & SPACING
Variations

Here are a few examples of how cards can be customized using elements from our design system to suit your needs.

Anatomy
1) Card Title
style: H3, H4 or H5 Inverse
2) Card Container
background-color: Navy
border: none
border-radius: 8px
3) Action Icon (optional)
font-face: Font Awesome 6 Pro Light
color: Gray 06
font-size: 20px
line-height: 44px
SIZE & SPACING
Variations

Here are a few samples of how cards can be customized using elements from our design system to suit your needs. When using inverse cards, select one background color to use throughout the application.
‍

Large Cards

Default
Inverse
Anatomy
1) Card Title
style: H3
2) Action Icon (Optional)
font-face: Font Awesome 6 Pro Light
color: Teal Dark
font-size: 20px
line-height: 44px
3) Caption
style: Large Paragraph
4) Content
‍
5) Primary CTA
button: Default
6) Secondary CTA
button: Subtle
SIZE & SPACING
Variations

Here are a few examples of how cards can be customized using elements from our design system to suit your needs.

Anatomy
1) Card Title
style: H3
2) Action Icon (Optional)
font-face: Font Awesome 6 Pro Light
color: Teal Dark
font-size: 20px
line-height: 44px
3) Caption
font-face: Helvetica Now Text
font-weight: 300
font-size: 18px
line-height: 24px
bottom-margin: 16px
4) Content
5) Primary CTA
button: Default Inverse
5) Secondary CTA
button: Subtle Inverse
SIZE & SPACING
Variations

Here are a few examples of how cards can be customized using elements from our design system to suit your needs.
‍

Aon Consumer Experience & Design Group
‍
200 E. Randolph St.
5th Floor
Chicago, IL 60601

global.design@aon.com‍

AboutFoundationsComponentsModulesData Visualization

For best results, please view on Desktop in Chrome or Firefox.