COLORS
Color Options
These classes apply color to various elements of the tout. If an icon is used, the color applies to either the background circle that surrounds the icon (icon will be white), the icon itself (if used with the "tout-color-inverted" class), or the background-color of the tout (if used with the "tout-type-circle" class). Additionally, if using a tout type class (e.g. "tout-type-card"), the color may apply to the title and/or certain bolded or italicized description text, according to the style of that tout. See examples on the Tout Reference page.
- tout-color-blue
- tout-color-lighterblue
- tout-color-orange
- tout-color-purple
- tout-color-teal
- tout-color-magenta
- tout-color-lightergreen
This class applies the color to the icon itself and sets the color of the icon's background-circle to transparent. For example, if a tout contains an "eye" icon with a blue circle, adding this class changes the icon color to blue and hides the icon's circle background. See examples on the Tout Reference page.
- tout-color-inverted
ICONS
Icon Options
These classes render a vector version of the intended icon. Use color and inverted color options to further customize the icon. See examples on the Tout Reference page.
- tout-icon-eye
- tout-icon-mail
- tout-icon-umbrella
- tout-icon-mirror
- tout-icon-cloud
- tout-icon-coin
- tout-icon-contact-clean
- tout-icon-pin
- tout-icon-circle-pattern
- tout-icon-contact-add
- tout-icon-chat
- tout-icon-idea
- tout-icon-biweekly
- tout-icon-daily
- tout-icon-monthly
- tout-icon-map-pin
- tout-icon-computer
- tout-icon-mirror
- tout-icon-book
- tout-icon-appointment
- tout-icon-checklist
- tout-icon-clipboard
- tout-icon-contact-double
NUMBERS
Number Options
These classes print a gray number (1-15) above the text. The gray color of these numbers is hardcoded into the class and cannot be changed with the addition of a color option.
- tout-number-one
- tout-number-two
- tout-number-three
- tout-number-four
- tout-number-five
- tout-number-six
- tout-number-seven
- tout-number-eight
- tout-number-nine
- tout-number-ten
- tout-number-eleven
- tout-number-twelve
- tout-number-thirteen
- tout-number-fourteen
- tout-number-fifteen
TYPES
These classes provide pre-defined tout styles that typically change multiple aspects of the tout. In some cases, they are used as a starting point and overriden with one or more modifier classes (see below).
Box
This option changes the look of the tout to a flat "box" with a gray border and light-gray background. The title will be blue and uppercase. The CTA style will have a plain, uppercase "crosslink" style.
- tout-type-box
Button
This option changes the look and functionality of the tout to a "button". This tout requires only CTA "URL" and "Display Name" fields to be filled out. You can add a color and an icon option to change the background-color and display an icon.
- tout-type-button
Card
This option changes the look of the tout to a "card" with a white background and a light box-shadow.
- tout-type-card
Circle
This option changes the look and functionality of the tout to a "circle tout". This tout requires only CTA "URL" and "Display Name" fields to be filled out. You can add a color and an icon option to change the background color and add an icon which will be displayed over the CTA "Display Name".
- tout-type-circle
This option, when used in addition to the "tout-type-circle" class, decreases the size of the "circle tout" and removes the arrow which usually appears beneath the text. You can add a color option to change the background-color, but no icon class can be used. This is currently used in the second-level of the AI Strap.
- tout-type-circle-small
Featured
This option applies the "featured" style, which positions an icon over the bottom center of a tout image. It is typically used on 50% touts, as seen on the homepage. This tout requires and image to be selected and an icon and color class to be used.
- tout-type-featured
Fine Print
This option applies the "fine print" style, which has a decreased font-size and a lighter gray font-color.
- tout-type-fine-print
Plain
This option applies the "plain" style, which changes the font-size of the tout description from large to medium and sets the CTA button-style to a plain "crosslink" with an arrow.
- tout-type-plain
Small Plain
This option applies the "plain" style for Eye Conditions page and sets the CTA button-style to a plain "crosslink" with an arrow.
- tout-type-plain-small
Spacer
This option is used solely for spacing purposes on touts that have no content. For example, on a horizontal tout without an image, an empty tout with this class can be created to fill the space where the image would usually be.
- tout-type-spacer
Suggestion Card
This option applies a "card" style that also has an image, border, and CTA with a custom arrow icon. Add a color option to change the color of the border and the arrow icon. This is currently used in the third-level of the AI Strap.
- tout-type-suggestion-card
MODIFIERS
These classes target a specific tout part or attribute. They may be combined with a tout type class, but, in cases where the modifier conflicts with an essential style of the tout type, the modifier class may be overridden.
Title
This option sets the font-family on the tout title to "Noe Display Bold", increases the font-size, and sets the title to uppercase.
- tout-title-font-headline
Description
If this class is present, bolded words in the tout description will receive any color applied via the color class.
- tout-description-has-color
If this class is present, italics in the tout description will be set to the fine-print style.
- tout-description-has-fine-print
If this class is present, additional space will appear above the description.
- tout-description-has-space-above
This option aligns the tout description text to the left (or right for 'rtl' languages).
- tout-description-text-align-left
This option decreases the tout description font-size from large to medium.
- tout-description-text-size-medium
This option increases the tout description font-size from medium to large.
- tout-description-text-size-large
Image
This option removes the default box-shadow on the tout image.
- tout-image-no-shadow
Call to Action
This option removes the default CTA "button" style and changes it to a plain "crosslink" style with an arrow.
- tout-cta-plain
Tout Direction
This option reverses the default order of the image and text on a 100% horizontal tout with an image, moving the text to the left and the image to the right (or the opposite for 'rtl' languages).
- tout-direction-reverse
Tout Text Alignment
This class aligns both the tout title and the tout description to the left (or opposite for 'rtl' languages).
- tout-text-align-left