Layout Components - Grid System
Products
Future Vertical Lift
Support
Company
Experience
News
Bell Newsroom
Events
Media Kits
Bell in the news
Media Contacts
Social Media
Leader Bios
Latest News
Recent News
Meet us at future events and conferences
The latest media assets
In the news
Type
Categories
Mission
Theme
Products
One row, one column grid. Grids can contain any of the text components and several other components.
NEED:
- Ability to extend the container to 14 columns instead of the 12 column spread with one offset default. Especially for the 3 and 4 column grids where they get super tight when the container is only 12.
- 33% + 66% Grid Layout
- 66% + 33% Gird Layout
25% + 75% Grid Layout
25% + 75% Grid Layout
50% + 50% Grid Layout
50% + 50% Grid Layout
75% + 25% Grid Layout
75% + 25% Grid Layout
33% + 33% + 33% Grid Layout
33% + 33% + 33% Grid Layout
33% + 33% + 33% Grid Layout
25% + 25% + 25% + 25% Grid Layout
25% + 25% + 25% + 25% Grid Layout
25% + 25% + 25% + 25% Grid Layout
25% + 25% + 25% + 25% Grid Layout
Grid Container Themes
Grid containers can have one of a few themes to change the background color of the element. Not shown on this page are several other shades of gray as well as some custom defined colors. Grid containers also allow the content editor to select a preset padding (top and bottom) around the container to adjust as needed.
NEED:
- Dark themes should change the text, buttons and other elements to a light color.
- Ability to define custom colors in the CMS as well as check a box to say if the theme is dark or light to affect the text.
Grid containers can have one of a few themes to change the background color of the element. Not shown on this page are several other shades of gray as well as some custom defined colors. Grid containers also allow the content editor to select a preset padding (top and bottom) around the container to adjust as needed.
NEED:
- Dark themes should change the text, buttons and other elements to a light color.
- Ability to define custom colors in the CMS as well as check a box to say if the theme is dark or light to affect the text.
Grid containers can have one of a few themes to change the background color of the element. Not shown on this page are several other shades of gray as well as some custom defined colors. Grid containers also allow the content editor to select a preset padding (top and bottom) around the container to adjust as needed.
NEED:
- Dark themes should change the text, buttons and other elements to a light color.
- Ability to define custom colors in the CMS as well as check a box to say if the theme is dark or light to affect the text.
Text Components
Single Line Text - H1
Single Line Text - H3
Single Line Text - H3 - No Mustache
Single Line Text - H4 - No Mustache
Rich Text Component
Can contain any type of HTML content (static or interactive) but restrained in the container it's placed in. NEED: The ability to place this component outside of a container anywhere on the page.More Grid Components
Text CTA Button Component
Text CTA Button Component
Heading Text / long text block
Mix and match grid layouts, text components and grid components to build a multitude of layouts. This component pairs a heading and text in a 50 50 split. Body copy is kept narrow for readability on wide devices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CMP: Image Spotlight
CMP: Leadership Card
CMP: Icon Spotlight
Corporate Giving
Whether it’s meeting local needs, maintaining a vibrant community or developing the future workforce, we believe in building a better world.
Icon Spotlight Item -title
A short description or blurb that can entice the reader of provide minimally necessary information.
Quote Component
Quote from a vendor, customer or team member.
Attribution Name
Title, Company
Accordion Component (Custom HTML)
Accordion Title
Accordion Content, can be any form of HTML content.
Accordion Title
Accordion Content, can be any form of HTML content.
Accordion Title
Accordion Content, can be any form of HTML content.
Standalone Components
These components cannot be placed in a grid container above and include a fixed layout.
CMP: Stacked Highlights
Stacked Highlight Item
A short blurb can go here.
Each item can be an image or video accompanied by this caption, which should be fairly succinct, yet much longer than the blurb und this item's title.
Stacked Highlight Item
A short blurb can go here.
Each item can be an image or video accompanied by this caption, which should be fairly succinct, yet much longer than the blurb und this item's title.
Stacked Highlight Item
A short blurb can go here.
Each item can be an image or video accompanied by this caption, which should be fairly succinct, yet much longer than the blurb und this item's title.
CMP: Stacked Highlights
-
Stacked Highlight Item
A short blurb can go here. -
Stacked Highlight Item
A short blurb can go here. -
Stacked Highlight Item
A short blurb can go here.
Each item can be an image or video accompanied by this caption, which should be fairly succinct, yet much longer than the blurb und this item's title.
Each item can be an image or video accompanied by this caption, which should be fairly succinct, yet much longer than the blurb und this item's title.
Each item can be an image or video accompanied by this caption, which should be fairly succinct, yet much longer than the blurb und this item's title.
CMP - Large Image Gallery
CMP: Light Image Gallery
Below, the Single Article component pulls a chosen story from Bell's News database.
Bell Reveals the City of the Future at CES 2020
See More
CMP: Animated Icon Spotlight
CMP: Contact
A short text description or message in addition to the title.
CMP: Related News & Events
December 15, 2020
Quote Component
Quote from a vendor, customer or team member.
Attribution Name
Title, Company
Attribution Name
Title, Company