EvoToolkit - v3.7.2 (Changelog)

Generic Box

Very basic box component which sits atop the undecorated box object pattern. Can be adapted to fit all kinds of scenarios where content needs to be boxed off.

Source

Contributors

Luke Harrison
  • Overview
  • Theming

Table of contents

Base

Mixes

Modifiers

Base

Spacing modifiers for o-box object pattern can be used to adding padding to the box component.

Hello, I'm a standard box component.
Hello, I'm a box component with tiny padding.
Hello, I'm a box component with small padding.
Hello, I'm a box component with regular padding.
Hello, I'm a box component with large horizontal padding.
Hello, I'm a box component with huge vertical padding.
<div class='o-box c-box u-mb-small'>Hello, I'm a standard box component.</div>
<div class='o-box u-p-micro c-box u-mb-small'>Hello, I'm a box component with tiny padding.</div>
<div class='o-box u-p-small c-box u-mb-small'>Hello, I'm a box component with small padding.</div>
<div class='o-box u-p-regular c-box u-mb-small'>Hello, I'm a box component with regular padding.</div>
<div class='o-box u-ph-large c-box u-mb-small'>Hello, I'm a box component with large horizontal padding.</div>
<div class='o-box u-pv-huge c-box u-mb-small'>Hello, I'm a box component with huge vertical padding.</div>

Mixes

Mixes refer to new variants of the Generic Box component which are created by including other components within it, with a few new styles added to make them fit better.

Here are all the mixes where the Generic Box is the parent component.

TabsView

For more complex layouts, you can integrate the tabs component neatly into a box.

  • Mercedes Benz
  • Audi
  • Range Rover
1
2
3
<div class="c-box-light c-box--rounded c-box--border c-box--hide-overflow">
	<div class="o-box u-ph-small u-pt-small c-box c-box--border-bottom">
		<div class="c-tabs c-box__tabs" data-tabs="js-tabs-content">
			<ul class="o-layout o-layout--flush o-layout--fit-height c-tabs__layout">
				<li class="o-layout__item c-tabs__item is-active" tabindex="0"><div class="c-tabs__item-inner">Mercedes Benz</div></li>
				<li class="o-layout__item c-tabs__item" tabindex="0"><div class="c-tabs__item-inner">Audi</div></li>
				<li class="o-layout__item c-tabs__item" tabindex="0"><div class="c-tabs__item-inner">Range Rover</div></li>
			</ul>
		</div>
	</div>
	<div class="c-tabs__content js-tabs-content">
		<div class="c-tabs__content-item is-active">
			<div class="o-box u-p-small">1</div>
		</div>
		<div class="c-tabs__content-item">
			<div class="o-box u-p-small">2</div>
		</div>
		<div class="c-tabs__content-item">
			<div class="o-box u-p-small">3</div>
		</div>
	</div>
</div>

Modifiers

A list of modifiers for the generic box component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

Rounded

You can round the corners of the box component with this modifier to give a softer appearance.

Hello, I'm a box component with rounded corners.
Hello, I'm a box component with rounded top corners.
Hello, I'm a box component with rounded bottom corners.
Hello, I'm a box component with a rounded top left corner.
Hello, I'm a box component with a rounded top right corner.
Hello, I'm a box component with a rounded bottom left corner.
Hello, I'm a box component with a rounded bottom right corner.
<div class="o-box u-p-regular c-box c-box--rounded u-mb-small">Hello, I'm a box component with rounded corners.</div>

<div class="o-box u-p-regular c-box c-box--rounded-top u-mb-small">Hello, I'm a box component with rounded top corners.</div>

<div class="o-box u-p-regular c-box c-box--rounded-bottom u-mb-small">Hello, I'm a box component with rounded bottom corners.</div>

<div class="o-box u-p-regular c-box c-box--rounded-top-left u-mb-small">Hello, I'm a box component with a rounded top left corner.</div>

<div class="o-box u-p-regular c-box c-box--rounded-top-left u-mb-small">Hello, I'm a box component with a rounded top right corner.</div>

<div class="o-box u-p-regular c-box c-box--rounded-bottom-left u-mb-small">Hello, I'm a box component with a rounded bottom left corner.</div>

<div class="o-box u-p-regular c-box c-box--rounded-bottom-right">Hello, I'm a box component with a rounded bottom right corner.</div>

Circular

You can also make the box component completely circular.

Cat 
<div class="o-box u-p-micro c-box-light c-box--circular c-box--border u-width-6/12 u-width-4/12@md">
	<img src="/static/img/cat-11da71f943.jpg" alt="Cat" class="c-box c-box--circular u-width-full">
</div>

Hide Overflow

Hides any content which breaks out of the box component. A common usecase would be to hide bits of child components when the box's rounded corners modifier is used.

Account Due Date Amount
Visa - 3412 04/01/2016 £1,190
Visa - 6076 03/01/2016 £2,443
Visa - 1237 07/01/2016 £1,181 
<div class='o-box c-box c-box--rounded c-box--hide-overflow'>
	<table class="c-table c-table--bare">
		<thead>
			<tr>
				<th>Account</th>
				<th>Due Date</th>
				<th>Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Visa - 3412</td>
				<td>04/01/2016</td>
				<td>&pound;1,190</td>
			</tr>
			<tr>
				<td>Visa - 6076</td>
				<td>03/01/2016</td>
				<td>&pound;2,443</td>
			</tr>
			<tr>
				<td>Visa - 1237</td>
				<td>07/01/2016</td>
				<td>&pound;1,181</td>
			</tr>
		</tbody>
	</table>
</div>

Shadow

Adds a shadow to the box component. Use to raise its prominance over other components on a page.

I'm a box with a shadow. 
<div class='o-box u-p-small c-box c-box--shadow'>
	I'm a box with a shadow.
</div>

Borders

A suite of modifiers to add borders to the box component.

I'm a box component with a border.
I'm a box component with a vertical border.
I'm a box component with a horizontal border.
I'm a box component with a top border.
I'm a box component with a right border.
I'm a box component with a bottom border.
I'm a box component with a left border. 
<div class='o-box u-p-small c-box c-box--border u-mb-small'>
	I'm a box component with a border.
</div>

<div class='o-box u-p-small c-box c-box--border-vertical u-mb-small'>
	I'm a box component with a vertical border.
</div>

<div class='o-box u-p-small c-box c-box--border-horizontal u-mb-small'>
	I'm a box component with a horizontal border.
</div>

<div class='o-box u-p-small c-box c-box--border-top u-mb-small'>
	I'm a box component with a top border.
</div>

<div class='o-box u-p-small c-box c-box--border-right u-mb-small'>
	I'm a box component with a right border.
</div>

<div class='o-box u-p-small c-box c-box--border-bottom u-mb-small'>
	I'm a box component with a bottom border.
</div>

<div class='o-box u-p-small c-box c-box--border-left'>
	I'm a box component with a left border.
</div>

You can theme the generic box component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.

Below is a list of theme variables and their default values.

Theme Variables

Theme Variables Default
$component-box-color very-light
$component-box-border-color light
$component-box-focus-color primary