Watch the Econ-grid training video

.econ-grid-container

Add <div class="econ-grid-container">...</div> around the html to be able to activate the new template

.header-image

Add <section class="header-image">...</section> around an image you wish to use as header. Use an image that is 1700x650px. Make sure to include an empty alt attribute to indicate the image is only for decorative purposes.

Place a <h2> tag within .header-image section to create a title.

.overlay

Add <div class="overlay">...</div> inside .header-image section to create a dark overlay area

Place buttons on the .overlay area by adding <button class="btn btn-lg btn-primary">Test Button Primary</button> for primary colour buttons or <button class="btn btn-lg btn-default">Test Button Default</button> for default styling buttons.

.fewer

Add class="fewer" to <div class="overlay">...</div> to make the overlay box narrow.

Buttons in header without overlay

Add <button class="btn btn-lg btn-primary">Button not in shaded overlay</button> to place a button over the banner image without a shaded overlay

.body-subtitle

Add <section class="body-subtitle"><h3>Subtitle text here</h3></section> to create a subtitle area on the page. Works on any page with econgrid template.

.grid-list

Insert <section class="grid-list"></section> to create an a section with a 3 boxes.

.flex-list

Create a row with unlimited number of boxes by wrapping elements in <div class="flex-list"> ... </div>
Different options available. Items will reorganise themselves automatically.

.with-button

Vertically align buttons on a grid list by adding .with-button: <div class="grid-list with-button"> ... </div>

.more

Fit an additional column on a grid list by adding .more to .grid-list: <div class="grid-list more"> ... </div>

.fewer

Fit one column less on a grid list by adding .fewer to .grid-list: <div class="grid-list fewer"> ... </div>

.compact

Fit five columns on a grid list by adding .compact to .grid-list: <div class="grid-list compact"> ... </div>

.wide

Add <div class="wide"></div> to elements within the .grid-list to make them twice as wide

.tall

Add <div class="tall"></div> to elements within the .grid-list to make them twice as tall

.fill-start

Get an individual grid element to fill the initial part of the grid row by adding .fill-start to .grid-list: <div class="fill-start"> ... </div>

.fill-end

Get an individual grid element to fill the end part of the grid by adding .fill-end to .grid-list: <div class="fill-end"> ... </div>

.standout


Add <div class="standout">...</div> to elements within the .grid-list to give them a border and some drop shadow.

.hero


Add <div class="hero">...</div> to elements within the .grid-list to give them a border and some drop shadow.

.feature

Add .feature to elements to set the background to light <section class="feature">...</section>

.highlight

Add .highlight to elements to set the background to lighter blue Economics brand colour : <section class="highlight">...</section>

.inverse

Add .inverse to elements to set the background to dark Economics brand colour : <section class="inverse">...</section>

.econ-accordion

To create accordions add <div class="econ-accordion" data-start-open="false"></div> to the area of the page where you want to create the accordions.
Insert the accordion header by placing <h3>Panel Title</h3>
You can also use <h4>Panel Title</h4>, or <h5>Panel Title</h5>
Add the content by placing <p>Panel text.</p><p>under the heading element.

.econ-tab

To create tabs add <div class="econ-tab"></div> to the area of the page where you want to create the tabs.
Insert the tab header by placing <h3>Panel Title</h3>

You can also use <h4>Panel Title</h4>, or <h5>Panel Title</h5>
Add the content by placing <p>Panel text.</p> under the panel heading element.

.accent

Add .accent to .econ-accordion to make the header larger and bold: <div class="econ-accordion accent">

Add .accent to .econ-tab to make the header larger and bold: <div class="econ-tab accent">