Multi Columns & Text Wrapping

Overview

Overview

You can create a multi-column layout in the content area of pages and content sections by using custom classes and div tags.  We have created a grid generator to make this process easier to use.

  1. The grid generator is located at /grid-generator/
  2. Select the number of rows and then the column layout for each row. This will produce a code snippet that you can place into the editor of your page or content section
  3. Copy the code snippet and go to your page in the CMS.  You will need to use the html view option and paste in the code to the desired location.
  4. Switch to edit view and you can update the example content as needed (the grid generator will place a dummy image and text as a placeholder).

*NOTE - Your style guide page has an example for review.

**NOTE - If you would like to display an image inside a column at fullwidth of the column container you can add the class "responsive image" to the image tag.

http://bluefield.monkpreview2.com/grid-generator/

Wrapping Text around Images

The best approach if you are using the caption style on an image is to use the grid.

If you are inserting an image and would like to have text wrap around it, you can use the class image-left or image-right from the formats drop down.

If you are inserting an image with both text wrapping and a caption, you will need to open the Source Code and use the following format around the image:

<figure class="float-left"><img src="http://imageurl.jpg" alt="Caption to go here if needed" height="229" width="400" /> <figcaption>Caption to here if needed and in this style.</figcaption></figure>

You can do either "float-left" or "float-right" and you can edit the caption that shows up underneath the image or the caption that shows up when you hover over it (the alt= in the example above).