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

Accordion

CSS-only solution for toggeling content section visibility.
Note: You can use either checkbox or radio-button in your sections. Radio-button will only allow one opened section while checkbox will allow multiple.

Modifiers

  • .accordion-icon - Use plus/minus signs to indicate toggaleable element
  • .accordion-boxes - Make boxes around alternatives
  • .accordion-list - Show accordion as list (with alternating colors)

Example

Ice cream cupcake tootsie roll jujubes tart. Icing tart sweet ice cream candy canes chupa chups marshmallow carrot cake powder. Powder wafer caramels cake jelly-o jelly biscuit dessert topping. Oat cake apple pie dessert cookie.
Cupcake pudding cheesecake cake sugar plum. Apple pie marzipan bonbon tootsie roll tootsie roll jujubes cookie macaroon. Cake tart icing tiramisu marzipan liquorice.
I love apple pie fruitcake. Fruitcake I love danish toffee jelly beans croissant candy canes caramels. Biscuit wafer icing gingerbread sweet dragée sesame snaps.
Oat cake jelly-o wafer cake candy canes. Sweet pastry dragée biscuit dragée lemon drops I love. Bear claw bear claw cupcake candy canes fruitcake pudding sweet. Chocolate croissant caramels.
<div class="accordion accordion-icon accordion-list">
     <section class="accordion-section">
        <label tabindex="0" class="accordion-toggle" for="accordion-section-1">
            Ice cream
        </label>
        <div class="accordion-content">
            Ice cream cupcake tootsie roll jujubes tart. Icing tart sweet ice cream candy canes chupa chups marshmallow carrot cake powder. Powder wafer caramels cake jelly-o jelly biscuit dessert topping. Oat cake apple pie dessert cookie.
        </div>
    </section>
    <section class="accordion-section">
        <label tabindex="0" class="accordion-toggle" for="accordion-section-2">
            <h3>Sugar plum (H3)</h3>
        </label>
        <div class="accordion-content">
            Cupcake pudding cheesecake cake sugar plum. Apple pie marzipan bonbon tootsie roll tootsie roll jujubes cookie macaroon. Cake tart icing tiramisu marzipan liquorice.
        </div>
    </section>
    <section class="accordion-section">
        <label tabindex="0" class="accordion-toggle" for="accordion-section-3">
            <h3>Fruitcake</h3>
        </label>
        <div class="accordion-content">
            I love apple pie fruitcake. Fruitcake I love danish toffee jelly beans croissant candy canes caramels. Biscuit wafer icing gingerbread sweet dragée sesame snaps.
        </div>
    </section>
     <section class="accordion-section">
        <label tabindex="0" class="accordion-toggle" for="accordion-section-4">
            <h3>Jelly-o</h3>
        </label>
        <div class="accordion-content">
            Oat cake jelly-o wafer cake candy canes. Sweet pastry dragée biscuit dragée lemon drops I love. Bear claw bear claw cupcake candy canes fruitcake pudding sweet. Chocolate croissant caramels.
        </div>
    </section>
</div>
Source file: ~/source/sass/components/accordion/_accordion.scss

Modals

CSS only modal box (exception for positioning).

Modifiers

  • .modal-backdrop-1 - Stripe color 1 as backdrop
  • .modal-backdrop-2 - Stripe color 2 as backdrop
  • .modal-backdrop-3 - Stripe color 3 as backdrop
  • .modal-backdrop-4 - Stripe color 4 as backdrop
  • .modal-backdrop-5 - Stripe color 5 as backdrop
  • .modal-backdrop-black - Black backdrop
  • .modal-backdrop-white - White backdrop
  • .modal-large - Big modal (100% width, 100vh height)
  • .modal-medium - Medium modal (70% width)
  • .modal-small - Small modal (50% width)

Example

Gummi bear modal
<a href="#modal-target">Gummi bear modal</a>
<div id="modal-target" class="modal modal-backdrop-1 modal-medium" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content material-shadow-lg">
   		<div class="modal-header">
		<a class="btn btn-close" href="#close"></a>
       		<h2 class="modal-title">Gummi bears caramels</h2>
     	</div>
     	<div class="modal-body">
		<article>
                <p>Pastry sweet topping lollipop chocolate cake cake I love lollipop. Gummies I love sesame snaps oat cake candy tart. Cake sugar plum chupa chups croissant brownie I love pudding dragée. Caramels liquorice apple pie marshmallow jujubes apple pie soufflé. Lemon drops croissant toffee gummi bears caramels I love. Pudding biscuit wafer bonbon pie danish dragée caramels pastry.</p>
                <p>Gingerbread I love jelly-o oat cake cookie. Icing sweet cookie sweet roll cotton candy sesame snaps candy canes I love muffin. Apple pie I love cotton candy sweet jelly-o cheesecake sweet roll. Marshmallow marshmallow jujubes. Jujubes danish lollipop sweet. Gummies I love tiramisu sugar plum.</p>
                <p>Liquorice donut tart tart tiramisu tootsie roll cheesecake brownie. Chocolate bonbon dessert. Halvah ice cream I love marshmallow gummi bears pudding dessert cheesecake. Carrot cake I love tiramisu toffee toffee. I love jujubes chocolate cake toffee I love sweet sesame snaps. Tart dessert candy canes lemon drops cake lemon drops pudding jelly-o. Pie tart danish candy gummi bears marshmallow. Ice cream cheesecake chupa chups oat cake apple pie jujubes. Sweet wafer marshmallow. Croissant wafer I love ice cream tootsie roll.</p>
                <p>Caramels bear claw biscuit chocolate cake I love. Tart cotton candy sweet liquorice. Carrot cake pastry donut cupcake tart. Tootsie roll I love cupcake carrot cake gingerbread I love donut. Lollipop gingerbread marshmallow brownie gummies apple pie tart donut. Chupa chups cupcake biscuit marshmallow croissant.</p>
       		</article>
	</div>
     	<div class="modal-footer">
       		<a href="#close" class="btn btn-default">Close</a>
       		<button type="button" class="btn btn-primary">Save changes</button>
     	</div>
   	</div><!-- /.modal-content -->
<a href="#close" class="backdrop"></a>
</div><!-- /.modal -->
Source file: ~/source/sass/components/modal/_modal.scss

Slider

JavaScript dependent Sliding content.

Modifiers

  • .slider-nav-hover - Only show slider nav buttons on slider hover (wrapping element)
  • .slider-nav-bottom - Only show slider nav buttons in the bottom of the slider (wrapping element)
  • .type-featured - Use in combination with textblock left/right
  • .text-block-center - You can center the text in the text block by adding this class to text-block element
  • .text-block-left - Text on a solid white background, image to the right.
  • .text-block-right - Text on a solid white background, image to the left.
  • .is-collapsed - Inidcator of compressed layout settings (wrapping element).

Example

Ipsum Fermentum Euismod Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<div class="slider slider-nav-bottom slider-nav-hover">
        <div class="slide type-featured current">
             <a href="#">
                <span class="text-block text-block-left">
                   <span>
                       <em class="title block-level h1">Ipsum Fermentum Euismod</em>
                       Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                   </span>
                 </span>
                 <div class="slider-image slider-image-desktop hidden-xs hidden-sm" style="background-image:url(https://unsplash.it/800/800/?image=499)"></div>
                 <div class="slider-image slider-image-mobile hidden-md hidden-lg" style="background-image:url(https://unsplash.it/800/800/?image=500)"></div>
             </a>
        </div>
        <div class="slide type-featured">
             <span class="text-block text-block-right">
                 <span>
                     <em class="title block-level h1">Amet Ornare Bibendum</em>
                     Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla.
                 </span>
             </span>
             <div class="slider-image slider-image-desktop hidden-xs hidden-sm" style="background-image:url(https://unsplash.it/800/800/?image=499)"></div>
             <div class="slider-image slider-image-mobile hidden-md hidden-lg" style="background-image:url(https://unsplash.it/800/800/?image=500)"></div>
        </div>
        <div class="slide type-image has-text-block">
             <span class="text-block text-block-center">
                 <span>
                     <em class="title text-xl block-level">Ipsum Fermentum Euismod</em>
                     Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                 </span>
             </span>
             <div class="slider-image slider-image-desktop hidden-xs hidden-sm" style="background-image:url(https://unsplash.it/800/800/?image=496)"></div>
             <div class="slider-image slider-image-mobile hidden-md hidden-lg" style="background-image:url(https://unsplash.it/800/800/?image=498)"></div>
        </div>
        <div class="slide"><div class="slider-image" style="background-image:url('https://unsplash.it/800/800/?image=493');"></div></div>
        <div class="slide"><div class="slider-image" style="background-image:url('https://unsplash.it/800/800/?image=976');"></div></div>
        <div class="slide"><div class="slider-image player" style="background-image:url('https://unsplash.it/800/800/?image=889');"><a href="#video-player-101935278" data-video-id="101935278"></a></div></div>
</div>
Source file: ~/source/sass/components/slider/_slider.scss

Tooltip

Tooltip on hover or focus.
Note: Using tooltip will set position of the element to relative.

Modifiers

  • [data-tooltip-top] - Tooltip above element
  • [data-tooltip-bottom] - Tooltip below element
  • [data-tooltip-left] - Tooltip to the left of element
  • [data-tooltip-right] - Tooltip to the right of element

Example

<a href="#" data-tooltip="This is a tooltip below">Tooltip below</a><br>
<a href="#" data-tooltip="This is a tooltip above" data-tooltip-top>Tooltip above</a><br>
<a href="#" data-tooltip="This is a tooltip left" data-tooltip-left>Tooltip left</a><br>
<a href="#" data-tooltip="This is a tooltip right" data-tooltip-right>Tooltip right</a>
Source file: ~/source/sass/components/tooltip/_tooltip.scss