- Skip to main content
- Accordion
- AEM Grid
- Alert banner
- Anchor link
- Article cards
- Badge
- Banner
- Breadcrumbs
- Button
- Skip to main content
- Color
- Column grid
- Combo box
- Comparison table
- Container
- Content with background
- Countdown banner
- Dropdown menu
- Filters
- Footnotes and disclaimers
- Form elements
- Full-width banner
- Full-width image
- Full-width split banner
- Header: Microsite
- Horizontal rule
- Icon
- Icon block
- Icon list
- Image
- Left navigation
- Link
- Logo
- Page layouts
- Pagination
- Quick link cards
- Quote
- Share
- Sign in
- Sign up
- Simple list
- Sticky banner
- Table
- Tabs
- Text
- Transcript
- Tooltips
- Typography
- Value prop
- Video
- Video gallery
- Zip plan finder

AEM Grid

uhc.com is a responsive website built using the AEM 12 column grid system. In the most basic terms, a grid is a structure comprising a series of lines that divide a page into columns or modules. This structure helps arrange content on the page. While the lines of the grid are not visible, the structure helps manage proportions between elements on the page.

Large desktop: 1440px +

Max-width: 1272px
Offset: 84px (for figma use only)
Gutters: 24px

Small desktop: 1439px - 769px

Margin: 24px
Gutters: 24px

Tablet: 768px - 501px

Margin: 24px
Gutters: 24px

Mobile: 500px & below

Margin: 16px
Gutters: 16px
All components break to mobile behavior

Breakpoint outliers

Break to mobile menu at 1000px
Break to tablet behavior for navigation list and full-width banners at 978px

PROD