Skip to Content
Texas State University

Calico Content Types

Looking to build a site using the Calico template?

Prebuilt Sections

Call to Action:

The call to action content types are designed to highlight information while driving users to inner pages with links or buttons. There are seven types of calls to action, each providing a solution for unique scenarios.

 

Text + Image/Video:

With this content type, editors can build a mobile-friendly two column layout with an image. Images on mobile will now always be placed above the associated content. Editors will also have the ability to choose a video with a play thumbnail.

 

Background Image:

This content type is an accessible way to highlight information while providing a visually engaging background image.

 

Facts & Figures:

Facts and figures are the new way to present callouts in the Calico template. There are three versions, each with their own layout options.

 

Quote + Image

The quote and image content type gives the editor predefined inputs to feature someone using their photo and a quote. A bordered option is available and recommended when using multiple content types together.

Call to Action: Buttons

Visit Campus

The natural beauty of our school is stunning. The work our students and faculty produce is even more impressive. Talk to the people you meet on campus and you’ll see why we’re so proud to call Texas State home.

Best Practices

  • Provide a short and concise header that presents the user with the section topic.
  • Copy should lead the user to move forward with buttons that explain the action.
  • Use in combination with other content types. This prebuilt section is designed to stand out and can quickly become overwhelming when overused.

Avoid

  • Avoid linking with phrases like "click here" or "learn more"; instead, links should inform the user as to where they will go next once clicked.
  • Avoid overuse. Use other content types in correlation to provide a meaningful call to action.

Once a Bobcat, Always a Bobcat

The Bobcat family includes nearly 190,000 alumni, living in all fifty states. As a graduate, you'll be in good company! Here are just a few notable people who attended Texas State:

Best Practices

  • Provide a short and concise header that presents the user with the section topic.
  • Copy should lead the user to move forward with buttons that explain the action.
  • Use in combination with other content types. This prebuilt section is designed to stand out and can quickly become overwhelming when overused.

Avoid

  • Avoid linking with phrases like "click here" or "learn more"; instead, links should inform the user as to where they will go next once clicked.
  • Avoid overuse. Use other content types in correlation to provide a meaningful call to action.

Call to Action: Buttons + Image

Alma Mater

The school song's words, written in 1919, harken back to the golden era of school tributes. The song paints a classical and idyllic portrait of the hilly campus above the San Marcos River.
bobcat band members playing at game

Best Practices

  • When used multiple times on a single page, consider alternating the image direction and color with each section.
  • Provide a short and concise header that presents the user with the section topic.
  • Copy should lead the user to move forward with buttons that explain the action.
  • Whenever possible, use high-quality images with the dimensions of 800px wide and 400px tall. Larger images that are not the equal aspect ratio will be cropped.

Avoid

  • Avoid portrait-oriented photos whenever possible.
  • Refrain from images that do not relate to the content.
  • Do not use low-resolution imagery.
  • Don't use images that you don't own or have permission to use.
  • Do not use stock photography unless there is a compelling need for your unit.

Texas State Stories

Every Bobcat has a story. Whether they’re new students or longtime professors, current staff members or accomplished alumni, all of these people — and so many more! — add to the fabric of Texas State.
students walking a trail near glass bottom boats

Best Practices

  • When used multiple times on a single page, consider alternating the image direction and color with each section.
  • Provide a short and concise header that presents the user with the section topic.
  • Copy should lead the user to move forward with buttons that explain the action.
  • Whenever possible, use high-quality images with the dimensions of 800px wide and 400px tall. Larger images that are not the equal aspect ratio will be cropped.

Avoid

  • Avoid portrait-oriented photos whenever possible.
  • Refrain from images that do not relate to the content.
  • Do not use low-resolution imagery.
  • Don't use images that you don't own or have permission to use.
  • Do not use stock photography unless there is a compelling need for your unit.

Call to Action: Two w/ Button

Learning Experiences

Take advantage of study abroad, research and more for an in-depth and enriching learning experience.

Academic Resources

We will help you keep your degree plan on track with our support resources.

Best Practices

  • Alternate background color options for best visibility.
  • Great for a final call to action on a page or multiple call to actions, when you do not have photos

Avoid

  • Avoid overuse. Use other content types in correlation to provide a meaningful call to action.

Call to Action: Icons

Best Practices

  • Select an icon that clearly matches the purpose of your accompanying text or linked content.
  • Pick a color option for your site and be consistent. Maroon, gold and charcoal are the icon color options.
  • Best used as the last section for a final call to action on a page.

Avoid

  • Avoid overuse. Use other content types in correlation to provide a meaningful call to action.

Call to Action: w/ Margin + Button + Image

students at a San Marcos coffee shop

Where to Eat

Check out our 10 dining locations, diverse menus and your meal plan options.

Best Practices

  • Best when used as a secondary call to action.
  • When used multiple times on a single page, consider alternating the image direction and color with each section.
  • Provide a short and concise header that presents the user with the section topic.
  • Copy should lead the user to move forward with buttons that explain the action.
  • Whenever possible, use high-quality images with the dimensions of 580px wide and 350px tall. Larger images that are not the equal aspect ratio will be cropped.

Avoid

  • Avoid repeating content type more than three times on a page.
  • Avoid portrait-oriented photos whenever possible.
  • Refrain from images that do not relate to the content.
  • Do not use low-resolution imagery.
  • Don't use images that you don't own or have permission to use.
  • Do not use stock photography unless there is a compelling need for your unit.

Text + Image/Video Button

Student Life

It’s not just the river or Old Main that make this the most beautiful campus in Texas. It's the experiences you embrace. The best thing you’ll discover is that while we work hard, sometimes, it’s just plain fun to be here.

students at outside table

Best Practices

  • Best used for long-form content that can be divided with an image.
  • When used multiple times on a single page, consider alternating the image direction and background color with each section.
  • Whenever possible, use high-quality images with the dimensions of 580px wide and 350px tall. Larger images that are not the equal aspect ratio will be cropped.

Avoid

  • Avoid using multiple linking types simultaneously.
  • Avoid linking with phrases like "click here" or "learn more"; instead, link from a natural portion of your text.
  • Avoid portrait-oriented photos whenever possible.
  • Refrain from images that do not relate to the content.
  • Do not use low-resolution imagery.
  • Don't use images that you don't own or have permission to use.
  • Do not use stock photography unless there is a compelling need for your unit.

Homecoming

Homecoming at Texas State is one of the university's longest-running annual traditions. The university plans a week's worth of events for students, staff and alumni, culminating on a Saturday at Bobcat Stadium when the football team hosts another Sun Belt Conference team.

cheerleader at football game

Best Practices

  • Best used for long-form content that can be divided with an image.
  • When used multiple times on a single page, consider alternating the image direction and background color with each section.
  • Whenever possible, use high-quality images with the dimensions of 580px wide and 350px tall. Larger images that are not the equal aspect ratio will be cropped.

Avoid

  • Avoid using multiple linking types simultaneously.
  • Avoid linking with phrases like "click here" or "learn more"; instead, link from a natural portion of your text.
  • Avoid portrait-oriented photos whenever possible.
  • Refrain from images that do not relate to the content.
  • Do not use low-resolution imagery.
  • Don't use images that you don't own or have permission to use.
  • Do not use stock photography unless there is a compelling need for your unit.

Background Image: Text

About Texas State

For more than a century, our university has been united by the belief that through our love of learning and our hard work we can do great things. Our name has changed a few times over the years, but our belief in the power of lifelong learning has never wavered.

Best Practices

  • Use in combination with other content types. This prebuilt section is designed to stand out and can quickly become overwhelming when overused.
  • Use semi-abstract, detailed, or blurred images. Background images are best for driving impressions, not delivering content.
  • Images should be 1600px x 400px or larger. Larger images that are not the equal aspect ratio will be cropped.

Avoid

  • Avoid cluttered images or scenes with a lot of people and faces.
  • Do not use low-resolution imagery.
  • Don't use images that you don't own or have permission to use.
  • Do not use stock photography unless there is a compelling need for your unit.
  • Avoid words or type on banner images.

Facts/Figures

27,000+ students receive financial aid

There are three different kinds of financial aid: grants, student loans and work study. When you apply for aid, you will be considered for all of them.

Best Practices

  • Facts/Figures is one of the content types for data visualization. It is useful for representing completion, progress or highlighting impressive numbers.
  • Information should be short and direct.
  • Use in combination with other content types. This prebuilt section is designed to stand out and can quickly become overwhelming when overused. (edited) 

Avoid

  • Avoid using long title information.

Facts/Figures: Image

507 acres on the San Marcos campus

Texas State has an additional 4,000 acres of academic, agricultural, research and recreational areas.
rafters in the San Marcos river rapids

Best Practices

  • Facts/Figures is one of the content types for data visualization. It is useful for representing completion, progress or highlighting impressive numbers.
  • Information should be short and direct.
  • Whenever possible, use high-quality images with the dimensions of 800px wide and 400px tall. Larger images that are not the equal aspect ratio will be cropped.

Avoid

  • Avoid using long title information.
  • Avoid portrait-oriented photos whenever possible.
  • Do not use low-resolution imagery.
  • Don't use images that you don't own or have permission to use.
  • Do not use stock photography unless there is a compelling need for your unit.

Facts/Figures: Two

38,000+ students

Our students come from around the globe to choose from 97 bachelor’s, 93 master’s and 14 doctoral degree programs.

52% ethnic minorities

The makeup of the 2018-19 student body more closely mirrors the Texas population than ever before.

Best Practices

  • Facts/Figures is one of the content types for data visualization. It is useful for representing completion, progress or highlighting impressive numbers.
  • Alternate background color options for best visibility.
  • Information should be short and direct.

Avoid

  • Avoid using long title information.
  • Avoid overuse. Use other content types in correlation to provide a meaningful call to action.

Quote + Image

quotation
Here the seeds were planted from which grew my firm conviction that for the individual, education is the path to achievement and fulfillment…
Lyndon B. Johnson
Class of 1930

Best Practices

  • Quote photo should be of the quotee or directly relate to the information.
  • Select bordered option to differentiate content from other sections.
  • Whenever possible, use high-quality images with the dimensions of 800px wide and 400px tall. Larger images that are not the equal aspect ratio will be cropped.

Avoid

  • Avoid portrait-oriented photos whenever possible.
  • Refrain from images that do not relate to the content.
  • Do not use low-resolution imagery.
  • Don't use images that you don't own or have permission to use.
  • Do not use stock photography unless there is a compelling need for your unit.