Design with Pre-Built Sections

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

Highlight important facts and figures relevant to your college, division, office, or organization.

Facts and Figures are used to present call-outs in the Calico template. The basic option allows you to highlight a single fact (e.g., a number or percentage), followed by a title and supporting text with up to two buttons.

Content type options:

• Callout (usually a number or percentage, required)
• Background
• Background color
• Title (required)
• Text
• Button text (required)
• Button target (required)

Highlight important facts and figures via a callout element while including a relevant image that adds to the information.

The Facts and Figures with Image option furthers the callout feature, allowing you to pair it with a supporting image. You can also choose this option instead of the Facts and Figures option if you need to break up heavy page content (e.g. long running text).

Content type options:

• Image (required)
• Alt text (required)
• Callout (usually a number or percentage, required)
• Background
• Background color
• Title (required)
• Text
• Button text (required)
• Button target (required)

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

Use Featured Text when users need to see 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.

Use Featured 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
• 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 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.

• Title (required), up to 55 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

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

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)

Share video or image content with call-to-action buttons that direct to additional pages or resources. The Image or Video with Button section allows you to build a mobile-friendly two-column layout with an image.

Site visitors using mobile devices will always see the images above the associated content. If you would prefer to feature a video instead of an image, you will have the ability to choose a thumbnail to display with a play button.

Content type options:

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

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

The Image or Video with Link 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.

Whereas the Image of Video with Button option is restricted to two buttons, the Image or Video with Link option can support up to three links.

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)

Highlight and compare important facts and figures. Two Facts and Figures are used to present and compare call-outs side by side.

Content type options, for both the left and right side:

• Callout (usually a number or percentage, required)
• Background
• Background color
• Title (required)
• Text
• Button text (required)
• Button target (required)

The Two Text with Buttons option is an ideal option when there are two different but equally important paths your visitors may need to take.

Content type options, for both the left and ride side:

• Title (required)
• Text description
• Text alignment (required, center, or left)
• Background color
• Button text (required)
• Button target (required)