We are working on something new! Check it out here!

Contact Card

View of a persons contactcard. Use buttons to link to profiles etc.

Modifiers

  • .vertical-card - Show description on the right hand side in desktop (identical to mobile).

Example

John Doe
  • Cupcake king
  • 073 00 00 00
  • john.dow@helsingborg.se
  • Macaroon pastry sweet pastry lollipop tootsie roll candy canes sweet roll. Candy canes lollipop cake I love. Candy canes I love ice cream caramels I love I love.
Jane Roe
  • Macaroon princess
  • 073 00 00 00
  • jane.roe@helsingborg.se
  • Macaroon pastry sweet pastry lollipop tootsie roll candy canes sweet roll. Candy canes lollipop cake I love. Candy canes I love ice cream caramels I love I love.
<div class="grid">
    <div class="grid-md-4">
        <span class="box box-card">
            <img class="box-image" src="https://unsplash.it/267/267/?image=64">
            <div class="box-content">
                <h5>John Doe</h5>
                <ul>
					<li class="card-title">Cupcake king</li>
					<li><a class="link-item" href="tel:+4673000000">073 00 00 00</a></li>
					<li><a class="link-item" href="mailto:john.doe@helsingborg.se">john.dow@helsingborg.se</a></li>
					<li class="small description">Macaroon pastry sweet pastry lollipop tootsie roll candy canes sweet roll. Candy canes lollipop cake I love. Candy canes I love ice cream caramels I love I love.</li>
			   </ul>
            </div>
        </span>
    </div>
</div>
<div class="grid">
   <div class="grid-md-12">
        <span class="box box-card vertical-card">
            <img class="box-image" src="https://unsplash.it/267/267/?image=823">
            <div class="box-content">
                <h5>Jane Roe</h5>
                <ul>
					<li class="card-title">Macaroon princess</li>
                     <li><a class="link-item" href="tel:+4673000000">073 00 00 00</a></li>
                     <li><a class="link-item" href="mailto:jane.roe@helsingborg.se">jane.roe@helsingborg.se</a></li>
                     <li class="small description">Macaroon pastry sweet pastry lollipop tootsie roll candy canes sweet roll. Candy canes lollipop cake I love. Candy canes I love ice cream caramels I love I love.</li>
                </ul>
            </div>
        </span>
    </div>
</div>
Source file: ~/source/sass/components/box/_card.scss

Filled

Filled box. Typically used in sidebars. If used in a looping grid the filled boxes will be coloured according to the brand stripe colors.

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

Chupa chups

Candy canes donut jelly caramels chocolate cake chupa chups caramels wafer. I love tart danish croissant gummies gummi bears. Tiramisu croissant cheesecake chocolate cake.

Chupa cis

This will be smaller than orginal size.

Candy canes donut jelly caramels chocolate cake chupa chups caramels wafer. I love tart danish croissant gummies gummi bears. Tiramisu croissant cheesecake chocolate cake.

<div class="box box-filled box-filled-3">
    <h4 class="box-title">Chupa chups</h4>
    <div class="box-content">
        <p>Candy canes donut jelly caramels chocolate cake chupa chups caramels wafer. I love tart danish croissant gummies gummi bears. Tiramisu croissant cheesecake chocolate cake.</p>
    </div>
</div>
<div class="box box-filled box-filled-4">
    <h4 class="box-title">Chupa cis</h4>
    <div class="box-content">
        <p><img src="https://unsplash.it/1000/600/?image=446" width="1000" height="600" alt="This will be smaller than orginal size."/></p>
        <p>Candy canes donut jelly caramels chocolate cake chupa chups caramels wafer. I love tart danish croissant gummies gummi bears. Tiramisu croissant cheesecake chocolate cake.</p>
    </div>
</div>
Source file: ~/source/sass/components/box/_filled.scss

Post brick box

Display a post brick on image background

Example

<div class="grid">
    <div class="grid-md-6">
         <a class="box box-post-brick" href="#">
            <div style="background-image:url(https://unsplash.it/1200/800/?image=513);" class="box-image">
               <img alt="Explicabo accusantium est necessitatibus" src="https://unsplash.it/1200/800/?image=513">
            </div>
            <div class="box-content">
               <span class="box-post-brick-date">
                   <time>19 february, 2016 09:48</time>
               </span>
               <h3 class="post-title">Jelly beans jujubes cupcake</h3>
            </div>
            <div class="box-post-brick-lead">
               <p>Gummies cake marzipan tootsie roll oat cake cupcake. Jelly beans jujubes cupcake cotton candy cupcake gummi bears jelly bonbon croissant. Sweet gingerbread tootsie roll tootsie roll bonbon gingerbread marshmallow cake oat cake. Bear claw candy toffee marshmallow pie macaroon lemon drops powder. Dessert powder chocolate chocolate cake. Jelly-o cupcake ice cream cupcake cheesecake. Jelly beans candy cookie halvah chocolate cake marzipan.</p>
            </div>
       </a>
    </div>
</div>
Source file: ~/source/sass/components/box/_grid-post.scss

Index

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

Example

&lt;div class="grid"&gt;
    &lt;div class="grid-md-6"&gt;
        &lt;a href="#" class="box box-index"&gt;
            &lt;img class="box-image" src="https://unsplash.it/610/250/?image=442"&gt;
            &lt;div class="box-content"&gt;
                &lt;h5 class="box-index-title link-item"&gt;Candy canes donut jelly&lt;/h5&gt;
                &lt;p&gt;Macaroon pastry sweet pastry lollipop tootsie roll candy canes sweet roll. Candy canes lollipop cake I love. Candy canes I love ice cream caramels I love I love.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
Source file: ~/source/sass/components/box/_index.scss

News

Used to feature news stories.

Example

&lt;div class="grid"&gt;
    &lt;div class="grid-lg-6"&gt;
        &lt;a href="#" class="box box-news"&gt;
            &lt;img src="https://unsplash.it/420/280/?image=400" alt="Kommunalanställd"&gt;
            &lt;div class="box-content"&gt;
                &lt;h5 class="link-item link-item-light"&gt;Candy canes chocolate cake&lt;/h5&gt;
            &lt;/div&gt;
        &lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="grid"&gt;
    &lt;div class="grid-lg-12"&gt;
        &lt;a href="#" class="box box-news box-news-horizontal"&gt;
            &lt;div class="box-image-container"&gt;
                &lt;img src="https://unsplash.it/200/130/?image=600"&gt;
            &lt;/div&gt;
            &lt;div class="box-content"&gt;
                &lt;h3 class="box-title text-highlight"&gt;Fruitcake toffee&lt;/h3&gt;
                &lt;time datetime="2016-05-27 08:50:36"&gt;2016-05-27 08:50&lt;/time&gt;
                &lt;p&gt;Chocolate candy cookie ice cream fruitcake toffee cake. Jujubes sesame snaps oat cake jujubes toffee sweet. Caramels danish candy candy canes croissant.&lt;/p&gt;
                &lt;p&gt;&lt;span class="link-item"&gt;Read more&lt;/span&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="grid-lg-12"&gt;
        &lt;a href="#" class="box box-news box-news-horizontal"&gt;
            &lt;div class="box-image-container"&gt;
                &lt;img src="https://unsplash.it/200/130/?image=500"&gt;
            &lt;/div&gt;
            &lt;div class="box-content"&gt;
                &lt;h3 class="text-highlight"&gt;Croissant oat cake&lt;/h3&gt;
                &lt;p&gt;Dessert muffin tart cheesecake toffee sweet roll. Halvah pudding jelly muffin soufflé. Bonbon ice cream gummies cotton candy halvah. Jelly chupa chups icing cookie.&lt;/p&gt;
                &lt;p&gt;&lt;span class="link-item"&gt;Read more&lt;/span&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
Source file: ~/source/sass/components/box/_news.scss

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