Good for:
- When you want a call to action to stand out on the page
- When you want a box with text in it that can have a coloured BG, an image BG or a border
Page type used: None
Can be used in these row options: All
Tips:
- "Min. Height of Box" is good to use when you have 2 boxes side by side to ensure they are the same size assuming the content of any box does not exceed the minimum height chosen
- Use bullet lists sparingly
Logic:
- CTA box will take up the entire width of the row you put it in
- Can open the button link in a new window
Specs
- Border colour:
- Charcoal (default)
- White
- Background type:
- Image
- Solid colour (default)
- White (default)
- Charcoal
- Grey (E7)
- Light grey (F2)
- None (transparent)
- Card text alignment:
- Center (default)
- Left
- Right
- Card text colour:
- Charcoal (default)
- White
- Card CTA's have 11 button styles
Optional: A normal CTA box
Optional: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium, sem sed mollis condimentum, orci diam porttitor nisl, a vehicula diam nulla ac eros.
- Bullet list
- Are always centered in here
CTA box: Min. Height of Box
This option ensures the box is at least 448px tall. This allows us to have 2 boxes side by side with the same height IF both don't exceed the minimal height.
Height options: None (default) | 296px | 385px | 448px.
When mobile kicks in and this element wraps, the minimum height stays so it can get very tall. In a future release we are going to remove the minimum height on mobile.
This option ensures the box is at least 448px tall
CTA box: Styling variations
CTA Box - Email signup
Usage: To use when you want a call to action for some sort of email/newsletter signup
Page type used: None
Can be used in these row options: All
Specs:
- Is its own widget
- Link opens in a new window
- Button style:
- Outlined charcoal version
- Has a "mail" icon
- Is centered to page