Ornamental background

Left Right Text with Image

This component is widely used on Viasat.com.  It creates a section with an image and companion text.  The image may be set to "full" width background with the text on top of it, or the image can be made to sit to the side of the text.  The text can be on the left (image right) or on the right (image left) with the side-by-side option.
BACK TO ALL COMPONENTS

Specifications for the Left Right Text with Image Component

This component, or multiple versions of this component, are stacked on a page to provide information with a related image.  Text typically has a Headline and a block of text that may include bullets.  A call-to-action (CTA) is often used in this section to link elsewhere.  If image/text side-by-side option is selected and stacks, the image and text should alternate sides.

Shown here with optional disclaimer below the component and white text.
Inline image Style option shown.

How to author the Left Right Text with Image Component

Below are screenshots showing the authoring experience of the Left Right Text with Image component.

Selecting an background image asset, using Alt Text
Authoring the Headline and Description paragraph text
Choosing the text beside image look.
Adding the CTA button. Target options: "Same tab" for going to a page within the same website. "New tab" for external websites. "Modal" opens a lightbox within the current page.
Disclaimers may be placed in three locations. Avoid using more than one disclaimer per section.
Choosing to place the text on the right.
This Style turns on/off the gradient color fade behind the text.
This Style affects mobile (narrow device widths) only. Use sparingly because most images do not work well this way.

Live Component Examples Below

Please do not edit these examples. 

Default with Full Background

Disclaimer below component title. With longer text. With longer text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros nulla, fermentum at tellus in, mollis vestibulum dui. Nullam in neque condimentum odio pretium semper. Aliquam erat volutpat.

Aliquam auctor quam vitae aliquam sagittis. Nunc id risus suscipit, pharetra eros at, feugiat erat. Maecenas nulla dui, egestas quis pretium commodo, dignissim non elit.

Read More
large cruise ships at port

Standard Text on Right and No Fade

Disclaimer below title line here. With longer text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros nulla, fermentum at tellus in, mollis vestibulum dui. Nullam in neque condimentum odio pretium semper. Aliquam erat volutpat.

Read More
test

Shorter Height Style Selected (Paintbrush)

Also with Video CTA style.  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros nulla, fermentum at tellus in, mollis vestibulum dui. Nullam in neque condimentum odio pretium semper. Aliquam erat volutpat.

Read More
test
cruise ship passenger using viasat wifi

Standard Text Beside Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros nulla, fermentum at tellus in, mollis vestibulum dui. Nullam in neque condimentum odio pretium semper. Aliquam erat volutpat.

  • Aliquam auctor quam vitae aliquam sagittis.
  • Nunc id risus suscipit, pharetra eros at, feugiat erat.
  • Maecenas nulla dui, egestas quis pretium commodo, dignissim non elit.
Read More

Disclaimer below CTA here.

cruise ship passenger using viasat wifi

Alternate Left and Right Text when stacked

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros nulla, fermentum at tellus in, mollis vestibulum dui. Nullam in neque condimentum odio pretium semper. Aliquam erat volutpat.

  • Aliquam auctor quam vitae aliquam sagittis.
  • Nunc id risus suscipit, pharetra eros at, feugiat erat.
  • Maecenas nulla dui, egestas quis pretium commodo, dignissim non elit.
Read More

Disclaimer below CTA here.

other styles options

Other Paintbrush / Styles Options (not shown above)

  • "Text in Center" and "Text in Center-Top" will place text on top of full width background option and center justify the text.  Only very specific imagery designed to have text on top will work well with these styles.
  • Mobile Background - These options only apply to Phone and narrow screen widths.  In addition to Background Image (example above), "No Image" (image not visible on phones) or a "Solid Color" (teal) background that replaces the image; the text sits on the color. 
  • "No bottom space" - If two full width background image sections are stacked, this will eliminate the gap / space between them.  Apply this Style to the section on top.

Related Components:

A Sales version of this component is available.  That version provides additional fields geared toward product pricing and options.  The Sales version should only be used by authorized Viasat groups.

Gradient