Please ensure Javascript is enabled for purposes of website accessibility FW Column Boxes | University of West Florida
Skip to main content
Logo of University of West Florida

FW Column Boxes

FW Column Boxes allow you to feature minimal text and imagery in a grid format.

Important Information

FW Column Boxes does not operate like the standard Column Boxes: Complete content type where you add 2-4 boxes per instance of the content type. In this version, you will add one FW Column Box per box and they will automatically align based on the choices you make in the first instance.

At a Glance

  • Requires Placeholder: No
  • Placement: Almost anywhere
  • Special Setup: None
  • Image Sizes:
    • Landscape preferred
    • Max width: 600px
    • Height: Variable

FW Column Boxes contains the following elements:

This content type contains four duplicates of each element, except 'Name', corresponding to the appropriate column (first, second, third, or fourth).

  • Name - Used in Sitemanager only. This does NOT show up on your webpage.
  • Heading - Row header, only needed for first column.
  • Header Type - H2 by default.
  • Heading Classes - Any additional classes to customize main header.
  • Text Alignment - Will apply to heading and all columns.
  • Row Width - Does grid container span 12 or 10 columns?
  • Row Padding Classes - Only use if you understand Bootstrap spacers.
  • Row Background Color - White by default.
  • Row Alignment - Only use if you understand Bootstrap justify-content classes.
  • Slider? - Enables Flickity functionality on mobile.
  • Column Classes - Only use if you understand Bootstrap grid.
  • Margin Classes - Only use if you understand Bootstrap spacers.
  • Image - Select image from the media library. Preferred size of 1280 x 720px
  • Title - Column header
  • Title Header Type - H3 by default
  • Title Internal Link - Select List from Site Structure.
  • Title External Link - Enter full link including https://
  • Body - Content for the column. Supports rich text such as bold, italics.
  • Button Text - Enter the text to appear on the button.
  • Button Color - Select color from list.
  • Button Style - Note that non-small buttons transform text to uppercase.
  • Button Internal Link - Select List from Site Structure.
  • Button External Link - Enter full link including https://

FW Column Boxes: Example of Two Columns

Screenshot of a two column box layout

FW Column Boxes: Example of Three Columns

Screenshot of a three column box layout

FW Column Boxes: Example of Four Columns

Screenshot of a four column box layout