Data box
Used to add databox(es) containing a data point, text and optional icon to a page. Adjacent Databoxes are grouped together and styled the same, colors can vary. Each Data box is a separate piece of content, and boxes can be displayed 1, 2, 3, or 4 per row.
Content Type Details
- ID: 468
- Name: Dallas - Data box
- Minimum user level: Contributor
- Use with page layouts: Full Width, Page with Sidebar - in Main Body, Microsite, PPC Campaign - in Main Body, PPC Campaign - in Full Width
Content Type Elements Details
| Name | Description | Size | Type | Required | Conditionally Shown |
|---|---|---|---|---|---|
| Name | The Name Element | 80 Characters | Plain Text | Yes | No |
| Content Group Heading | Enter optional text above the group of cards. Set on the first card in a data boxes. Adding a heading will start a new group. | 255 Characters | Plain Text | No | No |
| Content Group Heading Level | Set the level of optional heading above the group of data boxes Choose from options: Heading 2, Heading 3, Heading 4, Heading 5, Heading 6 | N/A | Select Box (List: Dallas - Headings) | Yes | Yes |
| Content Group Description | Enter optional text above the group of data boxes. Set on the first data box in a group. See TinyMCE content options. | 9999 Characters | HTML | No | Yes |
| Boxes in a Row | Select how many boxes are in the row/group, set this for the first data box in a group to apply the shape to all data boxes in the group. Select auto to automatically size the boxes based on the number of elements. Choose from options: 1 box wide, 2 boxes wide, 3 boxes wide, 4 boxes wide, Auto | N/A | Select Box (List: Dallas - Data Box Sizes) | No | No |
| Box Color | Choose a box color Choose from options: White, Light Grey, Blue, Red, Dark Grey | N/A | Select Box (List: Dallas - Data Box - Box Colors) | No | No |
| Icon | Choose an icon to display on this data box, if adding an icon add an icon for each data box content item in the group Choose from options such as: Address Book, Align Center, Apple, Apple Alt, Archway | N/A | Select Box (List: Dallas - Icons) | No | No |
| Icon Background Shape | Select the shape behind the icon, set this for the first data box in a group to apply the shape to all data boxes in the group Choose from options: None, Circle, Square | N/A | Select Box (List: Dallas - Data Box - Icon Shapes) | No | Yes |
| Icon Background Color | Select the color to display behind the icon Choose from options: None, Blue, Red, Dark grey | N/A | Select Box (List: Dallas - Data Box - Icon Background Colors) | No | Yes |
| Icon Color | Select the color for the icon Choose from options: Default, Blue, Red, Dark grey, White | N/A | Select Box (List: Dallas - Data Box - Icon Color) | No | Yes |
| Image | Select the custom image in place of an icon. | N/A | Media | No | Yes |
| Data Point | Enter the number or data point to display | 20 Characters | Plain Text | No | No |
| Description | Enter the description of the data point | 118 Characters | Plain Text | Yes | No |
| Content Group Footer | Enter optional text below the group of data boxes. Set on the last data box in a group. See TinyMCE content options. | 9999 Characters | HTML | No | No |
Examples
Data Box: No Background
Here's some sample text that describes what you're seeing in the data below.
Now that you liked that data, you can visit our other web page to learn more.
Data Boxes: Multiple With No Background
Here's some sample text that describes what you're seeing in the data below.
Now that you liked that data, you can visit our other web page to learn more.
Data Boxes: Solid Background
Here's some sample text that describes what you're seeing in the data below.
Now that you liked that data, you can visit our other web page to learn more.
Data Boxes: Icon in a Circle
Here's some sample text that describes what you're seeing in the data below.
Now that you liked that data, you can visit our other web page to learn more.
Data Boxes: Icon in a Square
Here's some sample text that describes what you're seeing in the data below.
Now that you liked that data, you can visit our other web page to learn more.