Styleguide

Banner

Style for Banner

<div class="banner-container">
  <div class="container">
    <div class="banner-content">
      <h1 class="banner-heading">Banner Heading</h1>
      <p class="banner-description">Quis laborum minim id ipsum exercitation sit irure. Minim pariatur esse velit reprehenderit occaecat.</p>
      <div class="banner-action">
        <a href="#" class="cta-primary">Banner Action 1</a>
        <a href="#" class="cta-secondary">Banner Action 2</a>
      </div>
    </div>
    </div>
    </div>

Thumbnail

Style for Thumbnail

  • Thumbnail 1

    Sint duis labore cupidatat elit eiusmod exercitation culpa incididunt. Cillum tempor aliquip ex velit veniam ut ullamco voluptate irure duis. Magna nisi velit quis ullamco. Deserunt elit anim eiusmod do velit nulla incididunt non ipsum.

  • Thumbnail 2

    Voluptate ipsum eiusmod velit eu ipsum duis aute incididunt. Proident nisi minim sit labore aliquip voluptate magna anim magna fugiat nulla. Anim amet proident minim ut sunt incididunt ut enim nisi et veniam. Cillum ut ut sint minim commodo exercitation est.

<ul class="small-thumbnails">
          <li class="thumbnail-small">
            <div class="thumbnail-small_graphics">
              <img src="/assets/images/icons/icon_scale.svg" alt="">
            </div>
            <div class="thumbnail-small_details">
              <h3 class="feature-heading">Thumbnail 1</h3>
              <p> Sint duis labore cupidatat elit eiusmod exercitation culpa incididunt. Cillum tempor aliquip ex velit veniam ut ullamco voluptate irure duis. Magna nisi velit quis ullamco. Deserunt elit anim eiusmod do velit nulla incididunt non ipsum. </p>
            </div>
          </li>
          <li class="thumbnail-small">
            <div class="thumbnail-small_graphics">
              <img src="/assets/images/icons/icon_scale.svg" alt="">
            </div>
            <div class="thumbnail-small_details">
              <h3 class="feature-heading">Thumbnail 2</h3>
              <p>Voluptate ipsum eiusmod velit eu ipsum duis aute incididunt. Proident nisi minim sit labore aliquip voluptate magna anim magna fugiat nulla. Anim amet proident minim ut sunt incididunt ut enim nisi et veniam. Cillum ut ut sint minim commodo exercitation est. </p>
            </div>
          </li>
        </ul>

Page header

Style for Page Header

<header class='page-header'>
        <h1>Page Header</h1>
    </header>

Side Tab

Style for tabs

Tab 1

Tab 2

Tab 3

<div class="tab-container tab-container-plugins">
    <aside class="sidebar-menu sidebar-menu-plugins">
      <ul class="tab-nav">
        <li class="tab-nav_item active-tab" data-attr="featured-tab1">Tab 1</li>
        <li class="tab-nav_item" data-attr="featured-tab2">Tab 2</li>
        <li class="tab-nav_item " data-attr="featured-tab3">Tab 3</li>
      </ul>
    </aside>

    <div class="content-container">
      <h2 class="mobile-heading open" data-attr="featured-tab1">Tab 1<span class="expander arrow-active"></span></h2>
      <div class="tab-content active" id="featured-tab1">
        <p> Pariatur proident laborum aliqua cupidatat id nostrud aute. Consectetur cupidatat amet ullamco sit consectetur officia commodo elit minim cupidatat incididunt minim Lorem. Qui ad veniam nostrud ad ut esse anim proident cillum.</p>
      </div>

      <h2 class="mobile-heading" data-attr="featured-tab2">Tab 2 <span class="expander arrow"></span></h2>
      <div class="tab-content" id="featured-tab2">
        <p>Culpa ex do eu amet aliquip. Anim deserunt proident eiusmod anim aliqua Lorem do laborum irure consectetur ad commodo tempor. Ex exercitation sint Lorem eiusmod commodo. Fugiat Lorem dolore magna ipsum nostrud. Consequat in voluptate reprehenderit excepteur. Ut deserunt excepteur laborum velit.</p>
      </div>

      <h2 class="mobile-heading" data-attr="featured-tab3">Tab 3 <span class="expander arrow"></span></h2>
      <div class="tab-content" id="featured-tab3">
        <p>Lorem cillum id excepteur dolore sit in. Magna est dolore quis laborum dolore laboris duis officia officia anim ipsum. Ipsum culpa labore non aliqua anim. Sit deserunt nostrud culpa sint cupidatat ea voluptate ex nisi aute dolore laboris consectetur nisi.</p>
      </div>
    </div>
  </div>

Tab

Style for tabs

  • Tab 1
  • Tab 2

Tab1

Consectetur proident officia ipsum incididunt aute ex qui quis fugiat. Do esse esse nisi ullamco. Duis proident nulla culpa enim reprehenderit qui in nostrud magna nulla mollit est eiusmod laboris.

Tab2

Do esse esse nisi ullamco. Duis proident nulla culpa enim reprehenderit qui in nostrud magna nulla mollit est eiusmod laboris.

<div class="tab-component tab-install">
            <ul class="tab">
              <li class="tab_item active-tab" data-attr="tab1">Tab 1</li>
              <li class="tab_item" data-attr="tab2">Tab 2</li>
            </ul>
            <div class="tab-content-container">
              <div class="tab-content active" id="tab1">
                <h4 class="mobile-title">Tab1</h4>
                <p>Consectetur proident officia ipsum incididunt aute ex qui quis fugiat. Do esse esse nisi ullamco. Duis proident nulla culpa enim reprehenderit qui in nostrud magna nulla mollit est eiusmod laboris.</p>
              </div>
              <div class="tab-content" id="tab2">
                <h4 class="mobile-title">Tab2</h4>
                <p>Do esse esse nisi ullamco. Duis proident nulla culpa enim reprehenderit qui in nostrud magna nulla mollit est eiusmod laboris.</p>
              </div>
            </div>
          </div>

Template

Template Example

Section Heading

  • Aliquip anim occaecat occaecat nostrud enim commodo sunt labore et tempor minim. Est sunt ipsum cupidatat do.

  • Aliquip anim occaecat occaecat nostrud enim commodo sunt labore et tempor minim. Est sunt ipsum cupidatat do.

  • Aliquip anim occaecat occaecat nostrud enim commodo sunt labore et tempor minim. Est sunt ipsum cupidatat do.


Section Heading

Excepteur elit adipisicing irure cupidatat. Reprehenderit exercitation cillum excepteur dolor velit enim amet cillum voluptate.


<div class="banner-container">
      <div class="container">
        <div class="banner-content">
          <h1 class="banner-heading">Banner Heading</h1>
          <p class="banner-description">Quis laborum minim id ipsum exercitation sit irure. Minim pariatur esse velit reprehenderit occaecat.</p>
          <div class="banner-action">
            <a href="#" class="cta-primary">Banner Action 1</a>
            <a href="#" class="cta-secondary">Banner Action 2</a>
          </div>
        </div>
        </div>
    </div>

    <section class="section-container">
      <div class="container">
        <h2 class="section-heading"> Section Heading </h2>
        <ul class="card-container">
          <li>
            <img src="http://via.placeholder.com/350x150" alt="">
            <p>Aliquip anim occaecat occaecat nostrud enim commodo sunt labore et tempor minim. Est sunt ipsum cupidatat do.  </p>
          </li>
          <li>
            <img src="http://via.placeholder.com/350x150" alt="">
            <p>Aliquip anim occaecat occaecat nostrud enim commodo sunt labore et tempor minim. Est sunt ipsum cupidatat do. </p>
          </li>
          <li>
            <img src="http://via.placeholder.com/350x150" alt="">
            <p>Aliquip anim occaecat occaecat nostrud enim commodo sunt labore et tempor minim. Est sunt ipsum cupidatat do.  </p>
          </li>
        </ul>
        <div class="section-action">
          <a href="#" class="cta-general">Section Action</a>
        </div>
      </div>
    </section>

    <hr />

  <section class="section-container">
    <div class="container">
      <h2 class="section-heading">Section Heading </h2>
      <p class="section-desc">Excepteur elit adipisicing irure cupidatat. Reprehenderit exercitation cillum excepteur dolor velit enim amet cillum voluptate.</p>
        <ul class="card-container">
        <li>
          <img src="http://via.placeholder.com/350x150" alt="">
        </li>
        <li>
          <img src="http://via.placeholder.com/350x150" alt="">
        </li>
        <li>
          <img src="http://via.placeholder.com/350x150" alt="">
        </li>
        <li>
          <img src="http://via.placeholder.com/350x150" alt="">
        </li>
        <li>
          <img src="http://via.placeholder.com/350x150" alt="">
        </li>
        <li>
          <img src="http://via.placeholder.com/350x150" alt="">
        </li>
        <li>
          <img src="http://via.placeholder.com/350x150" alt="">
        </li>
        <li>
          <img src="http://via.placeholder.com/350x150" alt="">
        </li>
      </ul>
    </div>
  </section>
  <hr />

Typography

Style for tabs

// Default Styles

Sample Text

Sample Text

Sample Text

Sample Text

Sample Text
Sample Text
// Custom Class with typography

Sample Text

Sample Text

Sample Text

Sample Text

Sample Text
Sample Text
// Default Styles
 <h1> Sample Text </h1>
 <h2> Sample Text </h2>
 <h3> Sample Text </h3>
 <h4> Sample Text </h4>
 <h5> Sample Text </h5>
 <h6> Sample Text </h6>

// Custom Class with typography

 <h1 class="h5"> Sample Text </h1>
 <h2 class="h6"> Sample Text </h2>
 <h3 class="h1"> Sample Text </h3>
 <h4 class="h2"> Sample Text </h4>
 <h5 class="h3"> Sample Text </h5>
 <h6 class="h4"> Sample Text </h6>