Text customizations:

• H1-H6 text fields (2 max)
  • Choose between Heading or Subheading font style
• WYSIWYG text field (1 max)
  • allows links
• Text color
• Button (1 max)
• Text alignment (center/left/right)
• Background overlay color: applies a color behind any text and button fields
• Desktop & Tablet vertical positioning (center/left/right)
• Desktop & Tablet horizontal positioning (center/top/bottom)
• Mobile positioning: Show Atop Banner, Show Fixed Below Banner, Show Fixed Above Banner
  • In the Fixed Above or Below Banner option, body text color (#000 in most cases) overrides if a custom color is applied
• Mobile alignment override: Overrides desktop/tablet text alignment (center/left/right options)

Image customizations:

• See psd templates for all available mobile/tablet/desktop dimensions
• Mobile/tablet/desktop image fields
• Container widths
  • Full span container
  • Fluid container (leaves a small margin on the left and right side of the image)
  • Fixed container (leaves a large margin on the left and right side of the image)
    • only visible on desktop
• Background color
• Accepts jpg, png, or svg
• Option to just upload an image without adding live text*
• Carousel option (up to 10 cards)
  • Autoplay: Yes or No 
  • Transition: Slide or Fade
  • Delay: 2s, 3s (default), 4s

* If live text overlay isn't needed or desired, see the Image Brick for more flexibility with dimensions.

A 50/50 two column layout that accepts either a color or image background with optional text overlay on each side. 

IMPORTANT MOBILE NOTE: 

• Images/colors stack
• If text overlay is used on one side and an image is used on the other, the amount of text will dictate the height of the brick and could lead to an unintended image crop; The image height will be cropped to 50% of the text height.

Text customizations:

• H1-H6 text fields (2 max)
  • Choose between Heading or Subheading font style
• WYSIWYG text field (1 max)
  • allows links
• Text color
• Button (1 max)
• Text alignment (center/left/right)
• Vertical and horizontal position: Centered (cannot adjust)

Image customizations:

• See psd templates for all available mobile/tablet/desktop dimensions
• Mobile/tablet/desktop image fields
• Container widths
  • Full span container
  • Fluid container (leaves a small margin on the left and right side of the image)
  • Fixed container (leaves a large margin on the left and right side of the image)
    • only visible on desktop
• Background color
• Accepts jpg, png, or svg
• Option to just upload an image without adding live text*
• Carousel option (up to 10 cards)
  • Autoplay: Yes or No 
  • Transition: Slide or Fade
  • Delay: 2s, 3s (default), 4s

* If live text overlay isn't needed or desired, see the Image Brick for more flexibility with dimensions.

Customizations:

• Youtube or Vimeo URL
• Container widths
  • Full span container
  • Fluid container (leaves a small margin on the left and right side of the image)
  • Fixed container (leaves a large margin on the left and right side of the image)
    • only visible on desktop
• Background color

Because this is within a Display Banner which requires specific dimension, the Youtube or Vimeo URL will crop to the selected dimensions.  The alternative uncropped approach would be to use the Video Embed Brick within a Section Column.

*NOTE: Video example below is cropped

Customizations:

• Text customizations: all display banner with text options apply
• Youtube or Vimeo URL
• Container widths
  • Full span container
  • Fluid container (leaves a small margin on the left and right side of the image)
  • Fixed container (leaves a large margin on the left and right side of the image)
    • only visible on desktop
• Background color

Because this is within a Display Banner which requires specific dimension, the Youtube or Vimeo URL will crop to the selected dimensions.  The alternative uncropped approach would be to use the Video Embed Brick within a Section Column.

*NOTE: Video example below is cropped

Customizations:

• Contained with a page section
• Variable widths
  • 25% column
  • 33% column
  • 50% column
  • 66% column
  • 75% column
  • Auto (default): Spans 100% width if only one column is used
  • Full span column (100%)
• Variable widths can be different for each browser aspect ratio (mobile/tablet/desktop)
  • For example: 50% on tablet and desktop, Full span/100% on mobile
• Up to four per page section
  • width percentages above cannot exceed 100% when using more than one column
• Vertical alignment options: top/center/bottom

Customizations:

• see the style guide for all configurations
• Choose between Heading or Subheading font style
• Text color
• Text alignment (center/left/right)

Customizations:

• Paragraph style body copy
  • bulleted or numbered lists
  • bold, underline, italics
• Allows links
• Alignment (center/left/right)

Customizations:

• See the style guide for all options
• Target: _blank option
• The Image Brick can also be a button/link. See Image Brick for more details.
• Add jumplinks and anchors for pages with a lot of content

Customizations:

• H4 title 
• WYSIWYG editor

Customizations:

• Responsive
• Define number or rows and columns
• Optional first row header styling
• Optional remove grid styling
• WYSIWYG editor for all cells

Customizations:

• no size/dimension limitations
• separate mobile/tablet/desktop uploads
• accepts jpg, png, or svg
• can link to another page or jump somewhere else on the page
  • example below shows the animation upon hover

Customizations:

• Youtube or Vimeo URL
• Optional video caption headline
  • left/right/center alignment
• Optional video caption WYSIWYG text field
• Contextual / In page video playback
  • Autoplay yes or no
• or, Modal / Lightbox video playback
• 16:9 or 4:3 aspect ratio options
• Optional poster image upload
  • 16:9 or 4:3

Customizations:

• NEED MORE INFO
• Import a social media feed
• Form?

Customizations:

• A carousel to display single products or recipes, product or recipe collections, or other data objects
• Optional headline and paragraph text
  • H1-H6 text fields (2 max)
    • Choose between Heading or Subheading font style
  • WYSIWYG text field (1 max)
    • allows links
  • Text color
  • Button (1 max)
  • Text alignment (center/left/right)