Flexbox Card
Content type used to add a flexible box or group of boxes that includes an image, clickable title, paragraph and optional CTA button. Each Flexbox Card is a separate piece of content. When using in group mode adding a heading will start a new group.
Content Type Details
- ID: 470
- Name: Dallas - Flexbox Card
- 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 an optional heading above the group of cards. Set on the first card in a group. 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 cards Choose from options: Heading 2, Heading 3, Heading 4, Heading 5, Heading 6 | N/A | Select Box (List: Dallas - Headings) | Yes | Yes |
| Single Card Mode | By default cards display in a group, check to enable single card mode Choose from options: Yes | N/A | Check Box (List: Dallas - Yes - unchecked) | No | No |
| Card Layout | Select the layout for cards on medium and larger screens Choose from options: Auto, Two Wide, Three Wide, Four Wide | N/A | Select Box (List: Dallas - Flexbox Card Sizing) | No | No |
| Image | Select a suitable image from the Media Library | N/A | Media | Yes | No |
| Card Title | Add a Card Title | 200 Characters | Plain Text | Yes | No |
| Card Title Heading Level | Set the level of card title heading Choose from options: Heading 2, Heading 3, Heading 4, Heading 5, Heading 6 | N/A | Select Box (List: Dallas - Headings) | Yes | No |
| Card Link Type | Select link type for the card title Choose from options: Internal, External | N/A | Select Box (List: Dallas - Link Type) | No | No |
| Card Link Internal | Select section/content for internal link | N/A | Section/Content Link | No | Yes |
| Card Link External | Enter full URL (including https://) for external link | 255 Characters | Plain Text | No | Yes |
| Card Body | Enter the content for the card body, this can contain text and links. Please note that not all TinyMCE content options are suitable for use here. | 99999 Characters | HTML | No | No |
| CTA Button Text | Enter text for CTA button | 255 Characters | Plain Text | No | No |
| CTA Button Link Type | Select link type Choose from options: Internal, External | N/A | Select Box (List: Dallas - Link Type) | Yes | Yes |
| CTA Button Link Internal | Select section/content for internal link | N/A | Section/Content Link | Yes | Yes |
| CTA Button Link External | Enter full URL (including https://) for external link | 255 Characters | Plain Text | Yes | Yes |
| CTA Button Color | Choose button color Choose from options such as: Blue, Red, Grey, Light Blue, Light Red | N/A | Select Box (List: Dallas - Button Colors) | Yes | Yes |
| CTA Button icon | Select an icon for the button Choose from options such as: Address Book, Align Center, Apple, Apple Alt, Archway | N/A | Select Box (List: Dallas - Icons) | No | Yes |
Examples
Flexbox: Single Card Mode
Financial Aid Step by Step
Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.
Flexbox: Group
Financial Aid Step by Step
Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.
Financial Aid Step by Step
Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.
Specialized sites also are available for health care students and internship seekers.
Financial Aid Step by Step
Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.
Specialized sites also are available for health care students and internship seekers.
Financial Aid Step by Step
Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.
Financial Aid Step by Step
Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.
Financial Aid Step by Step
Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.
Financial Aid Step by Step
Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.