Column layouts & styles

Description

Column layouts and styles allow you to more easily control how your content is displayed. Layout names refer to the desktop presentation, and columns are automatically stacked on top of each other as the window size gets smaller (e.g. when going to a tablet or mobile presentation). Each style refers to the colour palette being used within the column, and various elements will have their colour adjusted depending on which style is being used.

How it Works

1. A

   data attribute

   is used on the

   <table>

   element to enable styling the layout & styles
2. Each row has flex styling that allow the columns to stack as the window size gets smaller
3. A

   data attribute

   is added on each

   <td>

   to determine the style of that column