Welcome to the Viasat.com Component Library
Get started by choosing one of the cards below to learn how that specific component works on Viasat.com and its many style options.
Components: Authoring Guides
Click on one of the component detail pages below to learn more about the component.
Hero Banner
The top-most section of the page, placed between the Navigation and the start of your content.
Left Right Text With Image
A common component with multiple configurations that features imagery and companion text.
Universal Card
Universal Card content is usually brief and offers a linked entry point to further details, rather than the full details themselves.
Enhanced Text With CTA
This component can be used to introduced a new section leveraging the Headline, which can be used by itself.
Accordions
Accodions gives authors a chance to display a lot of content within a small space using the functionality of the opening and closing of Accordion sections.
Tabs
Tabs alternate between views within the same space. Tabs are best used in groups of like content and each tab should be a contained expereinece, not needing information from another tab to fully understand.
Downloadable Carousel
Downloadable Carousels give authors the chance to show downloadable content such as datasheets, brouchers and white papers in a more visually interesting way.
Video components
Videos can be displayed in page at various sizes and also within a modal, which is engaged by clicking a CTA button.
Product Detail Carousel
This component replaces the standard banner component for Product Detail pages. It features a carousel of product images along with text and button options to describe the product.
Gated Content Form
This component is used in the upper portion of the page, ideally above "the fold". It is a full-width section dedicated to a form that contains content that is gated until the form is filled out (often a PDF).
Breadcrumbs
Breadcrumbs should be used on the majority of site pages. This helps users know where they are within the site structure and helps them navigate to other pages as needed.
Floating Card
This component is used on the Residential Internet section of Viasat.com and is the primary way potential customers can see if they can get Viasat internet service at their location.
Service Availability
A component that lets users fill out a form to discover if they can get satellite internet service in their area. Available in embedded in a hero, within a modal and as a stand-alone section.
Containers
Containers help define the structure of a page. Viasat.com uses a few different types of containers and some components require certain containers to work properly.
Phone Lead
This component is leveraged on the Spain subfolder of Viasat.com and is the one of the primary ways potential customers can get in contact to acquire internet service.
Flexible Image Card
A component that lets users fill out a form to discover if they can get satellite internet service in their area. Available in embedded in a hero, within a modal and as a stand-alone section.
Sub Navigation
A component that lets users fill out a form to discover if they can get satellite internet service in their area. Available in embedded in a hero, within a modal and as a stand-alone section.
Flyout
The Flyout appears as a small tab, anchored to the right side of the device screen and is expanded to show text and link content. This is commonly used to show Calls to Action (CTA) and Contact type information that will follow the user as they scroll.
Quote
A stylized text component that is meant for quotes. It seperates the quote from other content, drawing emphasis and adding visual interest.
Promo Card
This component is similar to the Universal Card, with some distinct changes. The image portion isn't used and in it's place there are multiple levels of text. This variation is meant for promotional content such as plans and offers.
Dynamic Media
Dynamic Media is a feature unique to Adobe AEM and allows for the creation of interactive multimedia experience. On Viasat.com Dynamic Media helps with the treatment of assets across breakpoints and also helps integrate video in some components.
Image Crop
This page serves as a guide to understanding Image Crop and how to properly size your assets for mobile and desktop
Promo Banner
It is a independant image near the top of the page which promotes something and contains a link to follow from.
Image Optimization for Web
Image optimization is the process of delivering images in the highest possible quality while maintaining the smallest possible size. For Viasat.com, optimizing images is a necessary step taken with our assets to ensure the best page speeds and user experience while browsing the site.