Callout
Callout
The callout component provides a box to highlight content. Anything available in the WYSIWYG text editor can be inserted within the callout, including lists, media, and tables.
Component options
- Title (optional heading)
- Float — to the right two-thirds, one-half, or one-third column width; or no float (full width)
- Background color — gold, red, violet, blue, green, or gray
- Hide left border
Floated callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet faucibus urna, eu scelerisque enim consequat id. Sed laoreet tellus vitae congue faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet faucibus urna, eu scelerisque enim consequat id. Sed laoreet tellus vitae congue faucibus. Donec ut semper lacus. Vestibulum efficitur magna ac nisi maximus ornare. Mauris cursus, dolor eu maximus interdum, leo arcu fringilla libero, vel iaculis lorem nisl in mauris. Nam id ligula in orci euismod aliquam sit amet non elit. Nam efficitur elementum porttitor.
Callout with mixed content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet faucibus urna, eu scelerisque enim consequat id. Sed laoreet tellus vitae congue faucibus. Donec ut semper lacus. Vestibulum efficitur magna ac nisi maximus ornare. Mauris cursus, dolor eu maximus interdum, leo arcu fringilla libero, vel iaculis lorem nisl in mauris.
- List item one
- List item two
- List item three
Callout with gray background and no left border
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet faucibus urna, eu scelerisque enim consequat id. Sed laoreet tellus vitae congue faucibus. Donec ut semper lacus. Vestibulum efficitur magna ac nisi maximus ornare. Mauris cursus, dolor eu maximus interdum, leo arcu fringilla libero, vel iaculis lorem nisl in mauris.
Callout with gold background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet faucibus urna, eu scelerisque enim consequat id. Sed laoreet tellus vitae congue faucibus. Donec ut semper lacus. Vestibulum efficitur magna ac nisi maximus ornare. Mauris cursus, dolor eu maximus interdum, leo arcu fringilla libero, vel iaculis lorem nisl in mauris.
Callout with red background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet faucibus urna, eu scelerisque enim consequat id. Sed laoreet tellus vitae congue faucibus. Donec ut semper lacus. Vestibulum efficitur magna ac nisi maximus ornare. Mauris cursus, dolor eu maximus interdum, leo arcu fringilla libero, vel iaculis lorem nisl in mauris.
Callout with violet background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet faucibus urna, eu scelerisque enim consequat id. Sed laoreet tellus vitae congue faucibus. Donec ut semper lacus. Vestibulum efficitur magna ac nisi maximus ornare. Mauris cursus, dolor eu maximus interdum, leo arcu fringilla libero, vel iaculis lorem nisl in mauris.
Callout with blue background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet faucibus urna, eu scelerisque enim consequat id. Sed laoreet tellus vitae congue faucibus. Donec ut semper lacus. Vestibulum efficitur magna ac nisi maximus ornare. Mauris cursus, dolor eu maximus interdum, leo arcu fringilla libero, vel iaculis lorem nisl in mauris.
Callout with green background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet faucibus urna, eu scelerisque enim consequat id. Sed laoreet tellus vitae congue faucibus. Donec ut semper lacus. Vestibulum efficitur magna ac nisi maximus ornare. Mauris cursus, dolor eu maximus interdum, leo arcu fringilla libero, vel iaculis lorem nisl in mauris.
This page last reviewed on