Tout Modules

Touts

Layered Touts
  1. Right
    Tout module with a gradient fill, call to action on the left and product image on the right.
  2. Left
    Tout module with a gradient fill, product image on the left and call to action on the right.
  3. Bottom
    Tout module with a gradient fill, product image in the middle and a call to action with positioning based on viewport.
  4. Middle
    Tout module with a dark solid fill, product image horizontally aligned in the middle, but flush to the top. Call to action is placed below.
  5. Middle Left
    Tout module with a dark solid fill, product image horizontally aligned in the middle, but aligned to the left. Call to action is aligned right.
  6. Middle Right
    Tout module with a dark solid fill, product image horizontally aligned in the middle, but aligned to the right. Call to action is aligned left.

Fill Touts
  1. Right
    Tout module with a full bleed image background, call to action text on the right.
  2. Left
    Tout module with a full bleed image background, call to action text on the left.
  3. Center
    Tout module with a full bleed image background, call to action text center(ish).

Light Touts
  1. Center
    Tout module light version, centered content.
  2. Left
    Tout module light version, left content.
  3. Right
    Tout module light version, right content.