Tout Class Library Documentation

Tout Class Library Documentation

 

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