CTA Test
CTA Related Component Inventory
2 Column CTA
Features a Header and 2 CTA Block with Icon components. Each CTA Block with Icon features an Icon, Headline, Text, and Link. The display of these elements depends on the screen width:
- Icon: Displayed at all widths.
- Title: Displayed at all widths.
- Description: Displayed at XL and above.
- Action Button: Displayed at SM and above.
The Background Image, Invert Color, and Button Type options of the CTA Block with Icon are not supported in this context.
Header Text
Headline Text
Text goes here. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Headline Text
Descriptive text. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
3 Column CTA
Features a Header and 3 CTA Block or CTA Block with Icon components. Each CTA Block features a Headline, Text, and Link, and the CTA Block with Icon also supports an Icon. All the fields are displayed at all screen widths, with the display changed from 3 columns to 3 rows at MD and below.
Please note that while you can use either the CTA Block or CTA Block with Icon components they should not be mixed as in the example below. This will create an inconsistent look, and is done so below only for illustrative/demonstrative purposes.
The Background Image, Invert Color, and Button Type options of the CTA Block and CTA Block with Icon are not supported in this context.
Header Text
Headline Text
Maecenas faucibus mollis interdum. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Headline Text
Headline Text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
3 Column CTA With Button
Features a Header, a Summary, 3 CTA Block or CTA Block with Icon components, and a CTA Button. The Summary text only appears at screen widths XL and below. Each CTA Block features a Headline, Text, and Link, and the CTA Block with Icon also supports an Icon. The Text for the CTA Block and CTA Block with Icon is hidden at screen widths XL and below, and the entire CTA Block and CTA Block with Icon is hidden at screen widths MD and below.
Please note that while you can use either the CTA Block or CTA Block with Icon components they should not be mixed as in the example below. This will create an inconsistent feel, and is done so below only for illustrative/demonstrative purposes.
The Background Image, Invert Color, and Button Type options of the CTA Block and CTA Block with Icon are not supported in this context.
Header Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Headline Text
Maecenas faucibus mollis interdum. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Headline Text
Headline Text
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
4 Column CTA
Features a Header and 4 CTA Block with Icon components. Each CTA Block with Icon features an Icon and Link. All the fields are displayed at all screen widths, with the display changed from 4 columns to 2 columns and 2 rows at MD and below.
The Headline, Text, Background Image, Invert Color, and Button Type options of the CTA Block with Icon are not supported in this context.
Header Text
Headline Here
Text Here