Worcester Bosch Styleguide

5.1 #permalink Standard

Examples

Default styling

Title of box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.

Button

.helper

Add this class to boxes that compliment a main feature. Usually used for helpful notes.

Title of box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.

Button

<div class="box [modifier class]">
    <h3 class="box-title">Title of box</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
        Fusce tincidunt ligula
        <a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
    </p>
    <div class="btn-row">
        <a href="#" class="btn btn-default" role="button">Button</a>
    </div>
</div>

5.2 #permalink With Image

Example

Title of box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.

Button

<div class="box">
    <div class="asset">
        <img src="http://www.fillmurray.com/1200/800"/>
    </div>
    <h3 class="box-title">Title of box</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
        Fusce tincidunt ligula
        <a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
    </p>
    <div class="btn-row">
        <a href="#" class="btn btn-default" role="button">Button</a>
    </div>
</div>

5.3 #permalink With Image and header feature

In the real version of the theme, the circle will appear much smaller and fixed to the left

Example

A short eye-catching header

Title of box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.

Button

<div class="box">
    <div class="asset">
        <img src="http://www.fillmurray.com/1400/1100"/>
        <div class="heading">
            <div class="bubble">
                <div class="bubble-outer">
                    <div class="bubble-inner">
                        <div class="bubble-text">
                            <h2 class="bubble-title">A short eye-catching header</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <h3 class="box-title">Title of box</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
        Fusce tincidunt ligula
        <a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
    </p>
    <div class="btn-row">
        <a href="#" class="btn btn-default" role="button">Button</a>
    </div>
</div>

5.4 #permalink Cosy

Example

Title of box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.

Button

<div class="box box-cosy">
    <div class="asset">
        <img src="http://www.fillmurray.com/1400/1100"/>
    </div>
    <h3 class="box-title">Title of box</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
        Fusce tincidunt ligula
        <a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
    </p>
    <div class="btn-row">
        <a href="#" class="btn btn-default" role="button">Button</a>
    </div>
</div>

5.5 #permalink Filter box

These are used for thing such as news category lists. It will collapse to an accordian style menu at mobile size.

Example

Select a category

<main>
    <div class="box">
        <h3 data-toggle="collapse" data-target="#something-categories-collapse">Select a category</h3>
        <nav class="navbar navbar-default" role="navigation">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#something-categories-collapse">
                <span class="sr-only">Toggle filter</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse" id="something-categories-collapse">
                <ul class="filter">
                    <li class="active">
                        <a href="#">
                            <span class="badge pull-right">423</span>Category Item A
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="badge pull-right">148</span>Category Item B
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="badge pull-right">120</span>Category Item C
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</main>

5.6 #permalink Btn Row Text

Used for text that needs the same spacing as a button

Example

Content here

01-05-2014 Read More

<div class="box">
    <p>Content here</p>
    <div class="btn-row">
        <span class="btn-row-text pull-left">01-05-2014</span>
        <span class="btn btn-link pull-right">Read More</span>
    </div>
</div>

5.7 #permalink Box No Padding

Used for image picker where theres' no body content.

Example

Button

<div class="box box-nopad">
    <div class="asset">
        <img src="http://www.fillmurray.com/1400/1100"/>
    </div>
    <div class="btn-row">
        <a href="#" class="btn btn-default" role="button">Button</a>
    </div>
</div>

5.8 #permalink Box Active

Already added

5.10 #permalink Box Flex

Box that flexes to a parent flexer flex flex, requires box-body

Example

Title of box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.

Button

<div style='background: #eee; height: 500px; display: flex;'>
    <div class="box box-flex">
        <div class="box-body">
            <h3 class="box-title">Title of box</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
                Fusce tincidunt ligula
                <a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
            </p>
        </div>
        <div class="btn-row">
            <a href="#" class="btn btn-default" role="button">Button</a>
        </div>
    </div>
 </div>

5.11 #permalink Box Plain

Box that has no border, box shadow or background color.

Example

Title of box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut. Fusce tincidunt ligula quis dolor tempus, at tincidunt diam lacinia.

Button

<div>
    <div class="box box-plain">
        <div class="box-body">
            <h3 class="box-title">Title of box</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Sed dignissim facilisis lacus, tincidunt mattis dolor porta ut.
                Fusce tincidunt ligula
                <a href="#">quis dolor tempus</a>, at tincidunt diam lacinia.
            </p>
        </div>
        <div class="btn-row">
            <a href="#" class="btn btn-default" role="button">Button</a>
        </div>
    </div>
 </div>