Multi-column block

What is it?

This block is based on features available in HTML5 and CSS3. It allows text to flow in equidistant columns in a newspaper column style.

Where can you get the block?

  1. Click on New > Blocks > Multi-column Block.
  2. Configure the information requested, including System Name and Parent Folder location.
  3. Click Submit to save.
Where can you attach it?

This block can be used in the main body regions of either the Flex or Standard page templates. It is not meant to function in either the right column (optional) region or the Related links or Page ownership sections of the Standard page.

How to create the Multi-column block

Sections contained inside of the Multi-column block.

The block is a fairly simple set up containing five sections:

  • Title (optional) - appears across the top of your columned text.
  • Column section - text entry region that will be rendered in columns
  • Settings
  • Style
  • Comments

Columns sections

  • # of columns - choose from the pre-set list for between 2-6 columns. Be aware that the block is already mobile-friendly and will gradually condense into a single column.
  • Space between columns - the numerical choices are rendered in pixel widths to keep the column distances equal.
  • Include line separator between columns? By default, there is no vertical line separating the columns, but you can easily turn this on.
  • Inline title (optional) - this text will be used as an optional title at the top of the first column of text.
  • Content - default WYSIWYG.

Multi-column settings

  • Headling level - leave on default H3 unless you're familiar with semantic headings
  • Language Code - if any of your text is in a foreign language, you can enter in a language code for proper rendering.

Multi-column styles

  • Custom class - if you would like to enhance the presentation of your block content, you're welcome to create your own CSS class to overwrite the default style.

Other options you can use

Callouts

In addition to the regular body text, you can also include a callout, or quote, in the flow of your story. This is a manual step involving the use of an embedded piece of CSS. If you use the code shown below and replace the text between the 'p' tags you can create your own callout or pull quote. The 'br' tag represents a line break and will start a new line for you. You can see a working example of this callout in the Demo section below where you'll be able to see how it formats the output.

<p class="callout">This is a callout<br /> Quoteable Person</p>

Inserting Images

You can use images in your multi-column layout by using the image icon image icon in the WYSIWYG. Images should resize to fit the width of the column, but please remember to optimize your images for the web (72 dpi).

Customization

The CSS for the multi-column block is brief and straightforward. You're welcome to either add a custom class (format: .u_your-class-name) or overwrite the existing classes in your own supplemental.css. View the classes used in the live stylesheet named multicolumn1.css.

Demo

Multiple Column Article Title

Consumers increasingly face companies’ creative smoke and mirrors

Heavily marketed as a safer, healthful alternative to smoking, electronic cigarettes are under fire from California health officials who have declared “vaping” a public health threat, hoping to head off the type of deceptive manipulation that tobacco companies succeeded with for decades, according to new research from the University of California, Davis. 

“For example, as labels such as ‘low fat’ and ‘low sugar’ became increasingly taken-for-granted shortcuts for the notion of ‘healthy’ food, there is some evidence that companies increasingly manipulated underlying product characteristics to make them more palatable, such as adding more sugar or fat and adjusting the serving size to mask the increase,” says Grodal. “It’s scope creep, and it’s deceiving.”

In their new study, published in the February issue of the American Sociological Review, Hsu and Grodal investigated how it was possible for the tobacco industry to ratchet up the levels of tar and nicotine in “light” cigarettes for decades without a regulatory crackdown. This happened despite mounting proof of health hazards.

e-cigarette

Looking at history of tobacco regulation

Starting in the early 1960s, in the face of increasing public scrutiny, U.S. tobacco firms marketed “lights” as a new, safer type of cigarette due to their low tar and nicotine content. By the 1990s, a number of light brands exceeded their full-flavor counterparts in deliveries of both components.

“While one may be tempted to regard cigarettes as an extreme case due to its links with addiction, we believe this kind of widespread manipulation of shared categorical understandings takes place in a variety of markets,” the authors wrote.

Smoking is one of the leading causes of statistics.
Fletcher Knebel

Hsu and Grodal point out that researchers and the media have highlighted the potential for manipulation in several growing market categories, including organic produce, “green” products such as hybrid cars and energy-saving appliances, nontoxic beauty products, and sectors defined around craft techniques, personnel, or ingredients such as microbrews, wild fishing, and Greek yogurt.

“In such cases, without the presence of regulatory watchdogs setting and upholding clear standards, the opportunities for and likelihood of manipulations are expected to increase,” Hsu says. “One lesson is that monitoring must be done by a trusted source.”