Design with Pre-Built Sections

A flexible pre-built that allows a user to add multiple cards containing important information, links, or resources, often with a prominent call-to-action (CTA). On a website, a CTA is a prominent link, button, or instruction that encourages a visitor to take an action of some kind. 

The grid can optionally include a Callout in each card, featuring a single word or statistic that bears strong emphasis. 

Use Brand Text for:

• Specific content you want to highlight for your audience
• A specific action that your website visitors need to take

Content options:

• Title (required), up to 55 characters
• Callout, up to 10 characters.
• Text description, up to 300 characters
• Link display (button or text link)
• Option to add buttons or links
• Button or link text
• Button or link target

Tip: Button and link text should be concise and action-focused.

The Card Grid: Featured Links prebuilt section provides a flexible interface to collect and feature links to content in an appealing, photography-forward way.  

By default, Gato will adjust the layout based on the number of items added automatically, with a maximum of 3 items to a row, and 9 items to a grid. If preferred, a Widen property can be applied to individual cards to increase the relative size of a card in relation to others in the grid. Additionally, the section allows users to style and manage content options on the cards as a collective, turning on and off specific content options.

Section options: 

• Section title and description (optional)
• Card anatomy — choosing what parts of the cards to show or hide. New cards will make requirements based on these selections, but they can be changed at any time.
• Card style and layout—customizing card orientation, the section grid, and card colors

Card options: 

• Card title (always required)
• Label — a small heading at the top of the card, typically used to aid categorization
• Card description
• Background Image
• Link (always required)
• Widen — criteria that tells Gato how large to make this card in relation to others in the grid

Card Grid: Icon Links lets you choose from a variety of suitable icons that can be used to provide bits of information and link to additional resources. Icons work similarly to buttons. They can be helpful when site visitors don’t need further explanation or additional context about what to do next.

Content type options:

• Icon color (in modal 1)
• Icon selector (Font Awesome library)
• Title (required)
• Link target (required)

The Card Grid: List of Items prebuilt section provides a flexible interface to collect and build cards on your website. In web design, cards are used to organize small pieces of information with a relevant link. For example, a news website often uses cards to collect and link their articles from their homepage. 

By default, Gato will adjust the layout based on the number of items added automatically. If preferred, a specific grid layout can also be forced. Additionally, the section allows users to style and manage content options on the cards as a collective and sort alphabetically based on the card titles.

Section options: 

• Section title and description (optional)
• Card anatomy—choosing what parts of the cards to show or hide. New cards will make requirements based on these selections, but they can be changed at any time.
• Card style and layout—customizing card orientation, the section grid, and card colors
• Automated sorting (alphabetical)

Card options: 

• Card title (always required)
• Pre-header—a small heading at the top of the card, typically used to aid categorization
• Card description
• Image
• Link

This prebuilt is designed to help you showcase large, high-quality imagery in a prominent manner to a web page. Included are advanced layout controls to build out unique, dynamic layouts to showcase your imagery. 

Use Featured Images for:

• Photo essays and articles
• Showcasing event photography 
• Creating decorative visual breaks in long pages

Content Options:

• Up to 2 images OR 1 image with one text box
  • Adjust Image Position
  • Alt Text
• Width of image(s)
• Height of section
• Margin controls

The Featured Quote prebuilt section creates a unique layout designed to highlight important quotations and testimonials relevant to your page. Included in this prebuilt section are numerous layout options to let you customize this content to suit your content and tastes.

Content options:

• Quotation (required), 500 characters
• Cited source, 40 characters
• Cited source title, 80 characters
• Image
• Alt text
• Image crop options

Layout options:

• Option to show decorative quotation mark
• Background color and width
• Image alignment
• Option to have the image overlap the background

The Featured Text with Image prebuilt section is ideal to prominently highlight a high-quality image with a small amount of copy. This is a responsive layout, meaning the section will adjust to fill the site visitor's browser width. The image will always center and adjust its scale to fill the allotted space.

The text can optionally include a Callout, featuring a single word or statistic that bears strong emphasis. 

Content options:

• Title (required), up to 55 characters
• Callout, up to 10 characters
• Text description, up to 400 characters
• Link display (button or text link)
  • Button or text link text
  • Button or text link target
• Image
  • Image alignment
  • Image alt text (required)
  • Image caption, up to 60 characters
• Background color

Tip: Button and link text should be concise and action-focused

Allows editors to easily create visually interesting galleries of imagery in a quick workflow with minimal effort. This option makes building a dynamic image grid simple and straightforward. 

Use Flex Image Galleries for:

• Displaying one or two images alongside a short piece of text 
• Showcasing a collection of event photos.

Content options:

• Up to 9 images
• Width controls (individual images)
• Section Background option
• Lightbox option
• Section Title (60 characters)
• Section Description (265 characters)
• Additional text box inside the grid 
  • Heading: 50 characters
  • Description: 160 characters)
  • Background color option

Share video or image content with personalized links that lead to additional TXST websites and beyond.

The Flexible Media with Text option allows you to build a mobile-friendly two-column layout with an image. Site visitors using mobile devices will see the images above the associated content. And, if you need to feature a video instead of an image, you will have the ability to choose a thumbnail to display along with a play button. Users can further tailor this layout by adjusting the image ratio, column proportions, and vertical alignment of the content.

Content type options:

• Title
• Text
• Image (required)
• Alt text (required)
• Video URL
• Background color
• Link text (required)
• Link target (required)

Information Callouts allow you to create stylized boxes for featured content. These blue boxes give visitors a visual cue that the information is important and offset the featured content from the rest of your page.

Content type options:

• Title
• Text (required)

The Styled List content provides a visual way to display links in a uniform fashion. There is an option to select different column layouts and choose an image.

Options include:

• 1–4 columns
• Background color: white or sandstone
• Image optional
• Alt text for image
• Alphabetical optional
• Title
• Link text
• Link target

Text on Background Image provides you with an accessible way to highlight information while providing a visually engaging background image. Because this is a responsive layout (the section will adjust to fill the site visitor's browser window), the subject matter in the image may be obscured in unpredictable ways. Use wide, horizontal shots; avoid featuring people, especially when they're close-up shots.

Content type options:

• Image (required)
• Image position
• Title (required), up to 55 characters
• Text, up to 500 characters
• Text box color
• Text box alignment
• Button text
• Button target

The Text with Button Overlapping Image option is great for highlighting special content. This design allows you to drive visitors to more information by calling out a unique piece of content.

Content type options:

• Image (required)
• Alt text (required)
• Left/right alignment (required)
• Background color
• Overlay color
• Title (required)
• Text
• Button text (required)
• Button target (required)