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

A text featuring a specific item. With a simple image or icon (all content is padded). All "boxes" is compatible to embed inside .grid class.

Modifiers

  • .section-sm/md/lg - Sets a minimum height on the section. Aproxmently 60px, 40% 100%.
  • .padding-sm/md/lg - Sets a padding on the area.
  • .image-left/right - Where to place the image in the split view
  • .background-color-1 - A background color for the text.
  • .effect-multiply - Make color shite trough image
  • .effect-parallax - Make background image stay put, creates an efficient parallax illusion. This function should not be used with images of illustrative importantness, as they can be cropped weird. Cannot be combined with image focusing.

Full width section

Full width section with text. Can be devided in 1 - 3 columns. All "boxes" is compatible to embed inside .grid class.

Modifiers

  • .section-sm/md/lg - Sets a minimum height on the section. Aproxmently 60px, 40% 100%.
  • .padding-sm/md/lg - Sets a padding on the area.
  • .image-focus-right-top - Sets focal point of the image. Supports standard placement. Refer to the css documentation.
  • .background-color-1 - A background color for the text.
  • .columnize-2/3 - Makes columns from text.
  • .effect-multiply - Make color shite trough image
  • .effect-parallax - Make background image stay put, creates an efficient parallax illusion. This function should not be used with images of illustrative importantness, as they can be cropped weird. Cannot be combined with image focusing.

Example

Cheesecake chocolate cake

Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam.

Croissant dragée powder tootsie roll cupcake macaroon icing gummi bears tiramisu. Topping donut sweet chupa chups lemon drops halvah biscuit macaroon apple pie. Tootsie roll bonbon cheesecake dragée candy jelly beans croissant. Brownie halvah icing. Wafer chupa chups sweet marzipan croissant icing. Sugar plum chocolate cake jelly gingerbread sugar plum bear claw chocolate bar biscuit croissant. Macaroon muffin gummi bears topping chupa chups oat cake.

<section class="section section-full image-focus-right-top background-2 section-md padding-lg columnize-2 text-lg effect-multiply" style="background-image: url(https://unsplash.it/1250/800?image=1001);">
    <div class="container">
        <div class="grid">
            <div class="grid-xs-12">
                <article class="section-article">
                     <h2 class="section-title">Cheesecake chocolate cake</h2>
                     <div class="section-text">
                         <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam.</p>
                         <p>Croissant dragée powder tootsie roll cupcake macaroon icing gummi bears tiramisu. Topping donut sweet chupa chups lemon drops halvah biscuit macaroon apple pie. Tootsie roll bonbon cheesecake dragée candy jelly beans croissant. Brownie halvah icing. Wafer chupa chups sweet marzipan croissant icing. Sugar plum chocolate cake jelly gingerbread sugar plum bear claw chocolate bar biscuit croissant. Macaroon muffin gummi bears topping chupa chups oat cake.</p>
                     </div>
                </article>
            </div>
        </div>
    </div>
</section>
Source file: ~/source/sass/components/section/section-full.scss

Section split

Split section in two parts where the majority is kept for the content. The image adapts to the remaining surface. All "boxes" is compatible to embed inside .grid class.

Modifiers

  • .section-sm/md/lg - Sets a minimum height on the section. Aproxmently 60px, 40% 100%.
  • .padding-sm/md/lg - Sets a padding on the area.
  • .image-left/right - Where to place the image in the split view
  • .image-focus-right-top - Sets focal point of the image. Supports standard placement. Refer to the css documentation.
  • .background-color-1 - A background color for the text.
  • .text-top/middle/bottom - Where to place the text vertically.

Example

Cheesecake chocolate cake

Chocolate bar jujubes pastry halvah. Jujubes soufflé cotton candy. Liquorice bear claw carrot cake. Sesame snaps dessert sesame snaps donut soufflé danish bonbon. Toffee powder macaroon tiramisu apple pie sweet donut.

Cotton candy donut

<section class="section section-split image-focus-right-top image-left text-middle background-1 section-md padding-md text-md">
    <div class="section-image-mobile hidden-md hidden-lg ratio-16-9" style="background-image: url(https://unsplash.it/800/450?image=1001);"></div>
    <div class="container">
    <div class="grid">
     <div class="grid-xs-12 grid-md-7 grid-lg-6">
         <div class="vertical-alignment-wrapper">
             <article class="section-article">
                 <h2 class="section-title">Cheesecake chocolate cake</h2>
                 <div class="section-text">
                     <p>Chocolate bar jujubes pastry halvah. Jujubes soufflé cotton candy. Liquorice bear claw carrot cake. Sesame snaps dessert sesame snaps donut soufflé danish bonbon. Toffee powder macaroon tiramisu apple pie sweet donut.</p>
                     <p><a class="btn btn-lg btn-btn" href="https://www.youtube.com/watch?v=ug4c2mqlE_0">Cotton candy donut</a></p>
                 </div>
             </article>
         </div>
     </div>
    </div>
    </div>
    <div class="section-image hidden-xs hidden-sm" style="background-image: url(https://unsplash.it/500/600?image=1001);" data-equal-item></div>
</section>
Source file: ~/source/sass/components/section/section-split.scss