Boxes

There are several different box styles available. Box styles are most often applied to <div> elements, but can also be applied to <p> elements.

Alignment & width

Boxes inherit the size of their parent container 100% by default (eg <div> or <span>). You can use the standard alignment and width classes on the parent containers to adjust where boxes sit and their width, or you can put boxes into columns that were created by grid class.

Do not apply alignment or width classes directly to boxes as this will cause problems with paddings and margins.

General
Customisation
Use cases

Available classes

The basic .box style has no border or background-size, it only has 10px padding on all four sides and a 10px margin at the bottom. Besides the basic style, we offer various box styles that contain different border colours and background colours.

Box with solid border

Box with a coloured 1px-wide border

Class name	Border colour	Border width	Background colour	Note
`.box`	N/A	N/A	#ffffff
`.box-bdr-gold`	#be830e	1px	#ffffff
`.box-bdr-black`	#000000	1px	#ffffff
`.box-bdr-white`	#ffffff	1px	#000000	Should only be used on dark background.
`.box-bdr2`	#be830e	top, bottom: 1px	#ffffff

Box with thick solid border

Box with a coloured 3px-wide border

Class name	Border colour	Border width	Background colour	Note
`.box-bdr-thick-gold`	#be830e	3px	#000000
`.box-bdr-thick-black`	#000000	3px	#ffffff
`.box-bdr-thick-white`	#ffffff	3px	#000000	Should only be used on dark background.

Box header

Designed for stacking on top of .box-solid as a header. 1px border width on top, right and left, 2px border width on bottom.

Class name	Border colour	Border width	Background colour	Note
`.box-header-black`	#000000	top,right,left: 1px; bottom: 2px	#000000
`.box-header-tint`	#be830e	top,right,left: 1px; bottom: 2px	#f5edde
`.box-header-tint-bdrblack`	#000000	top,right,left: 1px; bottom: 2px	#f5edde	box with tint background and black border

For more about how each box style looks like, please see the 'Customisation' tab.

Customisation

Box with solid border

class="box-bdr-gold"

class="box-bdr-black"

class="box-bdr-white"

class="box-bdr2"

Box with thick solid border

class="box-bdr-thick-gold"

class="box-bdr-thick-black"

class="box-bdr-thick-white bg-black"

Box header

class="box-header-black"

class="box-header-tint"

class="box-header-tint-bdrblack"

Use cases

Combining box-header-tint with box-bdr-gold

The box below has been created using box-header-tint and box-bdr-gold. When combining box styles, they 'fit' together better if you use <div> tags (rather than <p> tags). Rather than formatting the box header with heading tags, please apply large class to the text directly with a <span>. Or some unexpected margin can be added and you can add the my-0 class to get rid of them.


                        <div>
                        <div class="box-header-tint">
                            <span class="large">Heading text</span>
                        </div>
                        <div class="box-bdr-gold">
                            <p>Box text</p>
                        </div>
                        </div>

Heading text

Box text

Combining box-header-black with box-bdr-black

The box below has been created using box-header-black and box-bdr-black. When combining box styles, they 'fit' together better if you use <div> tags (rather than <p> tags). Rather than formatting the box header with heading tags, please apply large class to the text directly with a <span>. Or some unexpected margin can be added and you can add the my-0 class to get rid of them.


                        <div>
                        <div class="box-header-black">
                            <span class="large">Heading text</span>
                        </div>
                        <div class="box-bdr-black">
                            <p>Box text</p>
                        </div>
                        </div>

Heading text

Box text

Combining box-header-tint-bdrblack with box-bdr-gold

The box below has been created using box-header-tint-bdrblack and box-bdr-gold. When combining box styles, they 'fit' together better if you use <div> tags (rather than <p> tags). Rather than formatting the box header with heading tags, please apply large class to the text directly with a <span>. Or some unexpected margin can be added and you can add the my-0 class to get rid of them.


                        <div>
                        <div class="box-header-tint-bdrblack">
                            <span class="large">Heading text</span>
                        </div>
                        <div class="box-bdr-gold">
                            <p>Box text</p>
                        </div>
                        </div>

Heading text

Box text

There are a number of different box styles available. Box styles are most often applied to div elements, but can also be applied to p elements.

Box

The basic box style has no border and no background colour - just padding and margins. The basic box can be modified to use different background colours and borders.

class="box"

Box-solid

Filled with white and bordered with 100 per cent colour.

class="box-bdr-gold"

class="box-bdr-black"

Alignment & width

Boxes default to 100 per cent of their parent container (eg <div> or <span>). You can use the standard alignment and width classes on the containers to change where boxes sit and how wide they are, or put the box in a column created with a grid class.

Do not apply alignment or width classes directly to boxes as this will cause problems with padding and margins.

Colours

Besides gold and black, we also have box with white colour for dark background. Apply box-bdr-white to the div to make it work.

Thickness of border

We also offer another option for box with a thicker border. And it is available for all three colours. To use it, please replace the box-bdr with bdr-thick in the class name. For example:

.box-bdr-thick-gold

Designed for stacking on top of box-solid as a header. Filled with 10 per cent colour with text and borders at 100 per cent colour. 2px bottom border.

class=".box-header-tint"

class=".box-header-black"

class=".box-header-tint-bdrblack"

Combining box-header-tint with box-bdr-gold


    <div>
    <div class="box-header-tint">
        <span class="large">Heading text</span>
    </div>
    <div class="box-bdr-gold">
        <p>Box text</p>
    </div>
    </div>

Heading text

Box text

Combining box-header-black with box-bdr-black


    <div>
    <div class="box-header-black">
        <span class="large">Heading text</span>
    </div>
    <div class="box-bdr-black">
        <p>Box text</p>
    </div>
    </div>

Heading text

Box text

Combining box-header-tint-bdrblack with box-bdr-gold


    <div>
    <div class="box-header-tint-bdrblack">
        <span class="large">Heading text</span>
    </div>
    <div class="box-bdr-gold">
        <p>Box text</p>
    </div>
    </div>

Heading text

Box text

Box-bdr2

class="box-bdr2"

Box-bdr2 defaults to border on top and bottom only with a solid line of tint colour.

Additional box colours & borders

The easiest way to create a box is to use one of the pre-defined classes above, but you can also control the colours and borders using background colour classes and border classes. For example:

class="box bg-black"<div class="box-bdr-gold">

To compose a box (that is not already covered by one of the styles above):

Choose a box style from this page
If you want to change the background colour, add a background colour class
If you want to change the border colour, add a border colour class