Skip to main content
Hej! Letar du efter något? Klicka här
Toppen! Vad kan vi hjälpa till med?
OK, here’s some content for that.

Tout Class Library Documentation

Tout Class Library Documentation



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



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



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



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).



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


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


This option changes the look of the tout to a "card" with a white background and a light box-shadow.

  • tout-type-card


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


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


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


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



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.



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


    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


        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