Filled

Filled box. Typically used in sidebars.

Modifiers

  • .box-filled-1 - Use the first stripe color as background-color
  • .box-filled-2 - Use the second stripe color as background-color
  • .box-filled-3 - Use the third stripe color as background-color
  • .box-filled-4 - Use the fourth stripe color as background-color
  • .box-filled-5 - Use the fifth stripe color as background-color

Example

Title

This is a filled box. This box is typically used in the sidebar to display "widgets" or secondary information.

<div class="box box-filled-3">
    <div class="box-content">
        <h4>Title</h4>
        <p>This is a filled box. This box is typically used in the sidebar to display "widgets" or secondary information.</p>
    </div>
</div>
Source file: ~/source/sass/component/box/filled.scss
View source on GitHub

Index

Box that usally is of type <a> (can also be used on other elements) and represents an entrance to a sub section.

Example

Index box

This is a index box. This box is typically used to link to a sub section.

 
<div class="grid">
    <div class="grid-md-6">
        <a href="#" class="box box-index">
            <img class="box-image" src="http://www.helsingborg.se/wp-content/uploads/2015/01/Bibliotek_610x250.jpg">
            <div class="box-content">
                <h5 class="box-index-title link-item">Index box</h5>
                <p>This is a index box. This box is typically used to link to a sub section.</p>
            </div>
        </a>
    </div>
</div>
Source file: ~/source/sass/component/box/index.scss
View source on GitHub

News

Used to feature news stories.

Example

Kommunalanställd
Ledia jobb i Helsingborgs stad
 
<div class="grid">
    <div class="grid-lg-6">
        <a href="#" class="box box-news">
            <img src="http://www.helsingborg.se/wp-content/uploads/2014/12/Kommunalanstalld_420x280.jpg" alt="Kommunalanställd">
            <div class="box-content">
                <h5 class="link-item link-item-light">Ledia jobb i Helsingborgs stad</h5>
            </div>
        </a>
    </div>
</div>
Source file: ~/source/sass/component/box/news.scss
View source on GitHub

Panel

Box that usally is of type <a> (can also be used on other elements) and represents an entrance to a sub section.

Modifiers

  • .box-panel-primary - Promary look (Default)
  • .box-panel-secondary - Secondary look

Example

Primary panel box

Primary box with plain text content.

Secondary panel box

Secondary box with plain text content.

Primary panel box

Secondary panel box

First column Second column
This is a box panel
Displaying a table 
<div class="grid">
    <div class="grid-md-6">
        <div class="box box-panel box-panel-primary">
            <h4 class="box-title">Primary panel box</h4>
            <div class="box-content">
                <p>Primary box with plain text content.</p>
            </div>
        </div>
    </div>
    <div class="grid-md-6">
        <div class="box box-panel box-panel-secondary">
            <h4 class="box-title">Secondary panel box</h4>
            <div class="box-content">
                <p>Secondary box with plain text content.</p>
            </div>
        </div>
    </div>
</div>
<div class="grid">
    <div class="grid-md-6">
        <div class="box box-panel box-panel-primary">
            <h4 class="box-title">Primary panel box</h4>
            <ul>
                <li>This is a box panel</li>
                <li>Displaying a list</li>
                <li><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="link-item">Do not click here</a></li>
            </ul>
        </div>
    </div>
    <div class="grid-md-6">
        <div class="box box-panel box-panel-secondary">
            <h4 class="box-title">Secondary panel box</h4>
            <table class="table-striped">
                <thead>
                    <tr>
                        <th>First column</th>
                        <th>Second column</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>This is</td>
                        <td>a box panel</td>
                    </tr>
                    <tr>
                        <td>Displaying</td>
                        <td>a table</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
Source file: ~/source/sass/component/box/panel.scss
View source on GitHub