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

Card

Nullam quis risus eget urna mollis ornare vel eu leo.

Example

Card title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Card link Card link
<div class="grid">
 <div class="grid-s-12 grid-md-6">
     <div class="c-card">
         <div class="c-card__body">
             <h4 class="c-card__title">Card title</h4>
             <p class="c-card__text">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
             <a href="#" class="c-card__link">Card link</a>
             <a href="#" class="c-card__link">Card link</a>
         </div>
     </div>
 </div>
</div>
Source file: ~/source/sass/components/card/_card.scss

Image

Nullam quis risus eget urna mollis ornare vel eu leo.

Modifiers

  • :disabled - Disabled button
  • .btn-sm - Small button
  • .btn-lg - Large button
  • .btn-outline - Outline button

Example

Card title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Card link Card link

Card title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Card link Card link
<div class="grid">
 <div class="grid-s-12 grid-md-6">
     <div class="c-card">
         <img class="c-card__image" src="https:helsingborg.se/wp-content/uploads/2014/12/cyklist_groningen_420x280.jpg">
         <div class="c-card__body">
             <h4 class="c-card__title">Card title</h4>
             <p class="c-card__text">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
             <a href="#" class="c-card__link">Card link</a>
             <a href="#" class="c-card__link">Card link</a>
         </div>
     </div>
 </div>
 <div class="grid-s-12 grid-md-6">
     <div class="c-card">
         <div class="c-card__image">
             <img src="https:helsingborg.se/wp-content/uploads/2014/12/cyklist_groningen_420x280.jpg">
         </div>
         <div class="c-card__body">
             <h4 class="c-card__title">Card title</h4>
             <p class="c-card__text">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
             <a href="#" class="c-card__link">Card link</a>
             <a href="#" class="c-card__link">Card link</a>
         </div>
     </div>
 </div>
</div>
Source file: ~/source/sass/components/card/_card.scss

Nullam quis risus eget urna mollis ornare vel eu leo.

Example

Card with header

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod.

Card with header

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod.

<div class="grid">
 <div class="grid-s-12 grid-md-6">
     <div class="c-card">
         <h4 class="c-card__header">
             Card with header
         </h4>
         <div class="c-card__body">
             <p class="c-card__text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod.</p>
         </div>
     </div>
 </div>
 <div class="grid-s-12 grid-md-6">
     <div class="c-card">
         <div class="c-card__header">
             Card with header
         </div>
         <div class="c-card__body">
             <p class="c-card__text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod.</p>
         </div>
     </div>
 </div>
</div>
Source file: ~/source/sass/components/card/_card.scss

Nullam quis risus eget urna mollis ornare vel eu leo.

List

Nullam quis risus eget urna mollis ornare vel eu leo.

Example

Card with list

    Tellus Inceptos Commodo
    Tortor Pharetra Aenean Condimentum
    Condimentum Ipsum
    Tortor Justo Quam
<div class="grid">
 <div class="grid-s-12 grid-md-6">
     <div class="c-card">
         <h4 class="c-card__header">
             Card with list
         </h4>
         <ul class="c-list c-list--flush">
             <div class="c-list__item">
                 Tellus Inceptos Commodo
             </div>
             <div class="c-list__item">
                 Tortor Pharetra Aenean Condimentum
             </div>
             <div class="c-list__item">
                 Condimentum Ipsum
             </div>
             <div class="c-list__item">
                 Tortor Justo Quam
             </div>
         </ul>
     </div>
 </div>
 <div class="grid-s-12 grid-md-6">
     <div class="c-card">
         <h4 class="c-card__header">
             Card with list
         </h4>
         <div class="c-list c-list--flush">
             <a href="#" class="c-list__item c-list__action">
                 Tellus Inceptos Commodo
             </a>
             <a href="#" class="c-list__item c-list__action">
                 Tortor Pharetra Aenean Condimentum
             </a>
             <a href="#" class="c-list__item c-list__action">
                 Condimentum Ipsum
             </a>
             <a href="#" class="c-list__item c-list__action">
                 Tortor Justo Quam
             </a>
         </div>
     </div>
 </div>
</div>
Source file: ~/source/sass/components/card/_card.scss