Stylekit useful Classes

There is some shorthand classes predefined in Stylekit:


Displays:

.gu-display-none for display: none

.gu-relative-block for position: relative and display: block

.gu-absolute-block for position: absolute and display: block


Margins and Paddings

You can use specified classes like .gu-p*-** and .gu-m*-**

gu is prefix, p for padding, m for margin

Where * is for direction (a - all, t - top, b - bottom, l - left, r - right)

And ** for value which is with step of 4px (0 - 0px, 1 - 4px, 2 - 8px, 3 - 12px, 4 - 16px, 5 - 20px)


Flexbox classes

.gu-d-flex is for display: flex

Requirement: all next classes should be used with .gu-d-flex class in pair

for example:

                
    <div class="gu-d-flex gu-justify-around" style="background: #cecece; width: 330px">
      <div class="gu-d-flex gu-direction-column gu-justify-center gu-align-center" style="height: 150px; width: 150px; background: #29b6f6">
        <div class="gu-pa-3" style="background: aqua">Content</div>
      </div>
      <div class="gu-ml-2 gu-d-flex gu-direction-column gu-justify-end gu-align-center" style="height: 150px; width: 150px; background: #29b6f6">
        <div class="gu-pa-3" style="background: aqua">Content</div>
      </div>
    </div>
Content
Content

.gu-direction-row for flex-direction: row

.gu-direction-row-reverse for flex-direction: row-reverse

.gu-direction-column for flex-direction: column

.gu-direction-column-reverse for flex-direction: column-reverse


.gu-justify-center for justify-content: center

.gu-justify-center for justify-content: center

.gu-justify-between for justify-content: space-between

.gu-justify-around for justify-content: space-around

.gu-justify-start for justify-content: flex-start

.gu-justify-end for justify-content: flex-end


.gu-align-center for align-items: center

Cards in column on mobile

Block gu-circle-card__top-image

It has gu-card-hover-area class. You can show it on hover on the gu-circle-card__top-image element or
show it always by adding a class gu-card-hover-area-always-visible to class gu-card-hover-area
(example: class="gu-card-hover-area gu-card-hover-area-always-visible"

Block gu-card-content

This block is main column of card for content part
For deleting image banner just remove gu-card-banner block and so on.
For changing content within gu-card-content you can cut gu-circle-text-preview block from code examples below
and paste it in your card by replacing standard gu-circle-text-preview block.

Multiline block gu-circle-text-preview__text

This block has automatic ellipsis ending for multiline block, based on parent's height and gu-circle-text-preview__text line-height value.
The -webkit-line-clamp css parameter is calculated by (parent's height / line-height)
circle_image
#1
3.6
(75 Reviews)
Genius Test
Wellington, New Zealand
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima numquam quasi qui tempora, unde voluptatem?
Members: 1234421
circle_image
#1
3.6
(75 Reviews)
Genius Test
Wellington, New Zealand
Type: Lorem ipsum dolor sit amet, consectetur adipisicing.
Purpose: Lorem ipsum dolor sit amet, consectetur adipisicing.
Owner:
Roger Hamilton
circle_image
3.6
(75 Reviews)
Michelle Nolting
Wellington, New Zealand
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima numquam quasi qui tempora, unde voluptatem? Ab accusamus, alias amet consequatur corporis culpa, deserunt error explicabo, facilis fugit inventore ipsam repellat. Neque, voluptas.
1
8
13
140
10
circle_image
#1
3.6
(75 Reviews)
Genius Test
Wellington, New Zealand
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima numquam quasi qui tempora, unde voluptatem? Ab accusamus, alias amet consequatur corporis culpa, deserunt error explicabo, facilis fugit inventore ipsam repellat. Neque, voluptas.
Team members: 30
Followers: 300 000
circle_image
Mentoring Programs
3.6
(75 Reviews)
Passion Test Consultant Certification
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima numquam quasi qui tempora, unde voluptatem? Ab accusamus, alias amet consequatur corporis culpa, deserunt error explicabo, facilis fugit inventore ipsam repellat. Neque, voluptas.
364 · 12 jan 2020
$ 1325
$ 325
circle_image
Mentoring Programs
Coaching
Join me to lead my Startup!
Online
Amanda Brown
1 month ago
364 · 12 jan 2020
$ 1325
$ 325
circle_image
3.6
(75 Reviews)
InSight-U Coaching Programme
Your Learning Progress:
Steps 20/30
              
  <div class="gu-circle-card">
    <div class="gu-circle-card__top-image">
      <img src="images/V1/laptop.png" alt="circle_image" />
      <div class="gu-card-hover-area">
        <!-- You can place here whatever hoverable elements you want-->
        <div class="gu-card-hover-area__left gu-d-flex">
          <div class="gu-close-icon gu-round-btn"><i class="fal fa-times fa-lg"></i></div>

          <div class="gu-share-icon gu-round-btn"><i class="far fa-share-alt fa-lg"></i></div>
        </div>
        <div class="gu-card-hover-area__right gu-d-flex">
          <div class="gu-post-bookmark gu-round-btn"><i class="far fa-bookmark fa-lg"></i></div>
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-content">
      <div class="gu-card-banner elevation-1">
        <img src="images/V1/curriculum-banner.jpg" />
        <div class="gu-card-banner__badge">#1</div>
      </div>

      <div class="gu-rating-wrapper">
        <div class="gu-rating-block">
          <div class="gu-main-card-middle-rating-block">
            <div class="gu-main-card-middle-rating">
              <span style="width: 66%"></span>
            </div>
            <div class="gu-main-card-middle-rating-number">3.6</div>
          </div>
          <div class="gu-rating-block-reviews"><a href="">(75 Reviews)</a></div>
        </div>
      </div>

      <div class="gu-circle-text-preview">
        <div class="gu-circle-text-preview__header">Genius Test</div>
        <div class="gu-circle-location gu-mb-3">
          <i class="fal fa-map-marker-alt gu-btn-icon gu-ml-0 gu-mr-1"></i>
          Wellington, New Zealand
        </div>

        <div class="gu-circle-text-preview__text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima
          numquam quasi qui tempora, unde voluptatem? Ab accusamus, alias amet consequatur corporis culpa, deserunt error
          explicabo, facilis fugit inventore ipsam repellat. Neque, voluptas.
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-bottom">
      <div class="gu-card-bottom__members">Members: <b>1234421</b></div>
      <div class="gu-card-bottom__button">
        <button class="gu-main-link-form-fill gu-bg-orange">VIEW</button>
      </div>
    </div>
  </div>

  <!---->

  <div class="gu-circle-card">
    <div class="gu-circle-card__top-image">
      <img src="images/V1/laptop.png" alt="circle_image" />
      <div class="gu-card-hover-area">
        <!-- You can place here whatever hoverable elements you want-->
        <div class="gu-card-hover-area__left gu-d-flex">
          <div class="gu-close-icon gu-round-btn"><i class="fal fa-times fa-lg"></i></div>

          <div class="gu-share-icon gu-round-btn"><i class="far fa-share-alt fa-lg"></i></div>
        </div>
        <div class="gu-card-hover-area__right gu-d-flex">
          <div class="gu-post-bookmark gu-round-btn"><i class="far fa-bookmark fa-lg"></i></div>
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-content">
      <div class="gu-card-banner elevation-1">
        <img src="images/V1/curriculum-banner.jpg" />
        <div class="gu-card-banner__badge">#1</div>
      </div>

      <div class="gu-rating-wrapper">
        <div class="gu-rating-block">
          <div class="gu-main-card-middle-rating-block">
            <div class="gu-main-card-middle-rating">
              <span style="width: 66%"></span>
            </div>
            <div class="gu-main-card-middle-rating-number">3.6</div>
          </div>
          <div class="gu-rating-block-reviews"><a href="">(75 Reviews)</a></div>
        </div>
      </div>

      <div class="gu-circle-text-preview">
        <div class="gu-circle-text-preview__header">Genius Test</div>
        <div class="gu-circle-location gu-mb-3">
          <i class="fal fa-map-marker-alt gu-btn-icon gu-ml-0 gu-mr-1"></i>
          Wellington, New Zealand
        </div>

        <div class="gu-d-flex gu-direction-column gu-justify-around">
          <div class="gu-d-flex gu-mt-1">
            <div class="gu-svg-icon">
              <object type="image/svg+xml" data="images/V1/icon-building-yellow.svg"></object>
            </div>
            <div class="gu-line-ellipsis">Type: <span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span></div>
          </div>
          <div class="gu-d-flex gu-mt-1">
            <div class="gu-svg-icon">
              <object type="image/svg+xml" data="images/V1/icon-purpose.svg"></object>
            </div>

            <div class="gu-line-ellipsis">Purpose: <span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span></div>
          </div>
          <div class="gu-d-flex gu-mt-1">
            <div class="gu-svg-icon">
              <object type="image/svg+xml" data="images/V1/icon-person.svg"></object>
            </div>

            <div class="gu-d-flex gu-direction-row">
              <span>Owner: </span>
              <div class="elevation-1 gu-round-image-block">
                <img width="20px" src="images/V1/avatar.png" />
              </div>
              <a href=""><span>Roger Hamilton</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-bottom">
      <div class="gu-card-bottom__members"></div>
      <div class="gu-card-bottom__button">
        <button class="gu-main-link-form-fill gu-bg-orange">VIEW</button>
      </div>
    </div>
  </div>

  <!---->

  <div class="gu-circle-card">
    <div class="gu-circle-card__top-image">
      <img src="images/V1/laptop.png" alt="circle_image" />
      <div class="gu-card-hover-area gu-card-hover-area-always-visible">
        <!-- You can place here whatever hoverable elements you want-->
        <div class="gu-card-hover-area__left gu-d-flex">
          <div class="gu-close-icon gu-round-btn"><i class="fal fa-times fa-lg"></i></div>

          <div class="gu-share-icon gu-round-btn"><i class="far fa-share-alt fa-lg"></i></div>
        </div>
        <div class="gu-card-hover-area__right gu-d-flex">
          <div class="gu-post-bookmark gu-round-btn"><i class="far fa-bookmark fa-lg"></i></div>
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-content">
      <div class="gu-card-banner elevation-1">
        <img src="images/V1/curriculum-banner.jpg" />

        <div class="gu-card-banner__badge badge-checkmark">
          <div class="badge-checkmark-wrapper checkmark-done">
            <object type="image/svg+xml" data="images/V1/icon-checkmark.svg"></object>
          </div>
        </div>
      </div>

      <div class="gu-rating-wrapper">
        <div class="gu-rating-block">
          <div class="gu-main-card-middle-rating-block">
            <div class="gu-main-card-middle-rating">
              <span style="width: 66%"></span>
            </div>
            <div class="gu-main-card-middle-rating-number">3.6</div>
          </div>
          <div class="gu-rating-block-reviews"><a href="">(75 Reviews)</a></div>
        </div>
      </div>

      <div class="gu-circle-text-preview">
        <div class="gu-circle-text-preview__header">Michelle Nolting</div>
        <div class="gu-circle-location gu-mb-3">
          <i class="fal fa-map-marker-alt gu-btn-icon gu-ml-0 gu-mr-1"></i>
          Wellington, New Zealand
        </div>

        <div class="gu-circle-text-preview__text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima
          numquam quasi qui tempora, unde voluptatem? Ab accusamus, alias amet consequatur corporis culpa, deserunt error
          explicabo, facilis fugit inventore ipsam repellat. Neque, voluptas.
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-bottom">
      <div class="gu-card-bottom__members">
        <div class="gu-overlap-area">
          <div class="gu-overlap-icon gu-round-btn gu-overlap-element gu-bg-yellow">
            <img src="images/V1/icon-building.svg" />
            <span class="gu-round-btn__number">1</span>
          </div>
          <div class="gu-overlap-icon gu-round-btn gu-overlap-element gu-bg-orange">
            <img src="images/V1/icon-education.svg" />
            <span class="gu-round-btn__number">8</span>
          </div>
          <div class="gu-overlap-icon gu-round-btn gu-overlap-element gu-bg-blue">
            <img src="images/V1/icon-circle.svg" />
            <span class="gu-round-btn__number">13</span>
          </div>
          <div class="gu-overlap-icon gu-round-btn gu-overlap-element gu-bg-green">
            <img src="images/V1/icon-shop-bag.svg" />
            <span class="gu-round-btn__number">140</span>
          </div>
          <div class="gu-overlap-icon gu-round-btn gu-overlap-element gu-bg-purple">
            <img src="images/V1/icon-calendar.svg" />
            <span class="gu-round-btn__number">10</span>
          </div>
        </div>
      </div>
      <div class="gu-card-bottom__button">
        <button class="gu-main-link-form-fill gu-bg-orange">VIEW</button>
      </div>
    </div>
  </div>

  <!---->

  <div class="gu-circle-card">
    <div class="gu-circle-card__top-image">
      <img src="images/V1/laptop.png" alt="circle_image" />
      <div class="gu-card-hover-area gu-card-hover-area-always-visible">
        <!-- You can place here whatever hoverable elements you want-->
        <div class="gu-card-hover-area__left gu-d-flex">
          <div class="gu-close-icon gu-round-btn"><i class="fal fa-times fa-lg"></i></div>

          <div class="gu-share-icon gu-round-btn"><i class="far fa-share-alt fa-lg"></i></div>
        </div>
        <div class="gu-card-hover-area__right gu-d-flex">
          <div class="gu-post-bookmark gu-bookmark-active gu-round-btn"><i class="far fa-bookmark fa-lg"></i></div>
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-content">
      <div class="gu-card-banner elevation-1">
        <img src="images/V1/curriculum-banner.jpg" />
        <div class="gu-card-banner__badge">#1</div>
      </div>

      <div class="gu-rating-wrapper">
        <div class="gu-rating-block">
          <div class="gu-main-card-middle-rating-block">
            <div class="gu-main-card-middle-rating">
              <span style="width: 66%"></span>
            </div>
            <div class="gu-main-card-middle-rating-number">3.6</div>
          </div>
          <div class="gu-rating-block-reviews"><a href="">(75 Reviews)</a></div>
        </div>
      </div>

      <div class="gu-circle-text-preview">
        <div class="gu-circle-text-preview__header">Genius Test</div>
        <div class="gu-circle-location gu-mb-3">
          <i class="fal fa-map-marker-alt gu-btn-icon gu-ml-0 gu-mr-1"></i>
          Wellington, New Zealand
        </div>

        <div class="gu-circle-text-preview__text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima
          numquam quasi qui tempora, unde voluptatem? Ab accusamus, alias amet consequatur corporis culpa, deserunt error
          explicabo, facilis fugit inventore ipsam repellat. Neque, voluptas.
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-bottom">
      <div class="gu-card-bottom__members gu-d-flex gu-direction-column">
        <div>Team members: <b>30</b></div>
        <div>Followers: <b>300 000</b></div>
      </div>
      <div class="gu-card-bottom__button">
        <button class="gu-main-link-form-fill gu-bg-orange">VIEW</button>
      </div>
    </div>
  </div>

  <!---->

  <div class="gu-circle-card">
    <div class="gu-circle-card__top-image">
      <img src="images/V1/laptop.png" alt="circle_image" />
      <div class="gu-card-hover-area gu-card-hover-area-always-visible">
        <!-- You can place here whatever hoverable elements you want-->
        <div class="gu-card-hover-area__left gu-d-flex">
          <div class="gu-close-icon gu-round-btn"><i class="fal fa-times fa-lg"></i></div>

          <div class="gu-share-icon gu-round-btn"><i class="far fa-share-alt fa-lg"></i></div>
        </div>
        <div class="gu-card-hover-area__right gu-d-flex">
          <div class="gu-post-bookmark gu-bookmark-active gu-round-btn"><i class="far fa-bookmark fa-lg"></i></div>
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-content">
      <div class="gu-d-flex gu-justify-between">
        <div class="gu-tag-block">
          <div>Mentoring Programs</div>
        </div>

        <div class="gu-rating-wrapper">
          <div class="gu-rating-block">
            <div class="gu-main-card-middle-rating-block">
              <div class="gu-main-card-middle-rating">
                <span style="width: 66%"></span>
              </div>
              <div class="gu-main-card-middle-rating-number">3.6</div>
            </div>
            <div class="gu-rating-block-reviews"><a href="">(75 Reviews)</a></div>
          </div>
        </div>
      </div>

      <div class="gu-circle-text-preview">
        <div class="gu-circle-text-preview__header">Passion Test Consultant Certification</div>

        <div class="gu-circle-text-preview__text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima
          numquam quasi qui tempora, unde voluptatem? Ab accusamus, alias amet consequatur corporis culpa, deserunt error
          explicabo, facilis fugit inventore ipsam repellat. Neque, voluptas.
        </div>
        <div class="gu-pt-2">
          <span class="gu-member-count gu-date">364</span>
          <span class="gu-middle-dot-divider">&#183;</span>
          <span class="gu-date">12 jan 2020</span>
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-bottom">
      <div class="gu-card-bottom__members gu-d-flex gu-direction-column">
        <div class="gu-old-price">$ 1325</div>
        <div class="gu-price">$ 325</div>
      </div>
      <div class="gu-card-bottom__button">
        <button class="gu-main-link-form-fill gu-bg-orange">VIEW</button>
      </div>
    </div>
  </div>

  <!---->

  <div class="gu-circle-card">
    <div class="gu-circle-card__top-image">
      <img src="images/V1/laptop.png" alt="circle_image" />
      <div class="gu-card-hover-area gu-card-hover-area-always-visible">
        <!-- You can place here whatever hoverable elements you want-->
        <div class="gu-card-hover-area__left gu-d-flex">
          <div class="gu-close-icon gu-round-btn"><i class="fal fa-times fa-lg"></i></div>

          <div class="gu-share-icon gu-round-btn"><i class="far fa-share-alt fa-lg"></i></div>
        </div>
        <div class="gu-card-hover-area__right gu-d-flex">
          <div class="gu-post-bookmark gu-bookmark-active gu-round-btn"><i class="far fa-bookmark fa-lg"></i></div>
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-content">
      <div class="gu-d-flex gu-tags-line-grey gu-mb-3">
        <div class="gu-tag-block gu-mr-1">
          <div>Mentoring Programs</div>
        </div>
        <div class="gu-tag-block gu-mr-1">
          <div>Coaching</div>
        </div>
        <div class="gu-ellipsis-svg">
          <div>
            <object type="image/svg+xml" data="images/V1/icon-ellipsis.svg"></object>
          </div>
        </div>
      </div>

      <div class="gu-circle-text-preview">
        <div class="gu-circle-text-preview__header">Join me to lead my Startup!</div>

        <div class="gu-tag-online gu-mr-1 gu-mb-2">
          <div>Online</div>
        </div>

        <div class="gu-card-row__image-n-text-block gu-d-flex gu-direction-row">
          <div
            class="elevation-1 gu-card-row__image gu-card-row__image-36 gu-card-banner gu-card-banner-header gu-static gu-mb-0 gu-mr-3"
          >
            <img src="images/V1/avatar.png" />
          </div>
          <div class="gu-card-row__name gu-card-row__name-in-card gu-d-flex gu-direction-column">
            <span class="header">Amanda Brown</span>
            <div class="subheader">1 month ago</div>
          </div>
        </div>
        <div class="gu-pt-2">
          <span class="gu-member-count gu-date">364</span>
          <span class="gu-middle-dot-divider">&#183;</span>
          <span class="gu-date">12 jan 2020</span>
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-bottom">
      <div class="gu-card-bottom__members gu-d-flex gu-direction-column">
        <div class="gu-old-price">$ 1325</div>
        <div class="gu-price">$ 325</div>
      </div>
      <div class="gu-card-bottom__button">
        <button class="gu-main-link-form-fill gu-bg-orange">VIEW</button>
      </div>
    </div>
  </div>

  <!---->

  <div class="gu-circle-card">
    <div class="gu-circle-card__top-image">
      <img src="images/V1/laptop.png" alt="circle_image" />
      <div class="gu-card-hover-area">
        <!-- You can place here whatever hoverable elements you want-->
        <div class="gu-card-hover-area__left gu-d-flex">
          <div class="gu-close-icon gu-round-btn"><i class="fal fa-times fa-lg"></i></div>

          <div class="gu-share-icon gu-round-btn"><i class="far fa-share-alt fa-lg"></i></div>
        </div>
        <div class="gu-card-hover-area__right gu-d-flex">
          <div class="gu-post-bookmark gu-round-btn"><i class="far fa-bookmark fa-lg"></i></div>
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-content">
      <div class="gu-card-banner elevation-1">
        <img src="images/V1/curriculum-banner.jpg" />

        <div class="gu-card-banner__badge badge-checkmark">
          <div class="badge-checkmark-wrapper">
            <object type="image/svg+xml" data="images/V1/icon-checkmark.svg"></object>
          </div>
        </div>
      </div>

      <div class="gu-rating-wrapper">
        <div class="gu-rating-block">
          <div class="gu-main-card-middle-rating-block">
            <div class="gu-main-card-middle-rating">
              <span style="width: 66%"></span>
            </div>
            <div class="gu-main-card-middle-rating-number">3.6</div>
          </div>
          <div class="gu-rating-block-reviews"><a href="">(75 Reviews)</a></div>
        </div>
      </div>

      <div class="gu-circle-text-preview">
        <div class="gu-circle-text-preview__header">InSight-U Coaching Programme</div>
      </div>
      <div class="gu-learning-progress-block gu-mt-4">
        <div class="gu-learning-progress-block-top">
          <div class="gu-progress-header">Your Learning Progress:</div>
          <div class="gu-progress-steps">Steps 20/30</div>
        </div>
        <div class="gu-progress-bar">
          <span class="gu-progress-bar-fill" style="width: 70%"></span>
        </div>
      </div>
    </div>

    <div class="gu-card gu-card-bottom">
      <div class="gu-card-bottom__button gu-width-full">
        <button class="gu-main-link-form-fill gu-bg-orange">VIEW</button>
      </div>
    </div>
  </div>

Cards in scrollable row on mobile

Add class gu-card-wrapper-scrollable to gu-circle-card-wrapper
circle_image
#1
3.6
(75 Reviews)

Genius Test

Wellington, New Zealand
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima numquam quasi qui tempora, unde voluptatem? Ab accusamus, alias amet consequatur corporis culpa, deserunt error explicabo, facilis fugit inventore ipsam repellat. Neque, voluptas.
Members: 1234421
circle_image
#1
3.6
(75 Reviews)

Genius Test

Wellington, New Zealand
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima numquam quasi qui tempora, unde voluptatem? Ab accusamus, alias amet consequatur corporis culpa, deserunt error explicabo, facilis fugit inventore ipsam repellat. Neque, voluptas.
Members: 1234421
circle_image
#1
3.6
(75 Reviews)

Genius Test

Jersey, USA
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima numquam quasi qui tempora, unde voluptatem? Ab accusamus, alias amet consequatur corporis culpa, deserunt error explicabo, facilis fugit inventore ipsam repellat. Neque, voluptas.
Members: 1234421
circle_image
#1
3.6
(75 Reviews)

Genius Test

Wellington, New Zealand
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores autem esse, fugiat fugit hic magni minima numquam quasi qui tempora, unde voluptatem? Ab accusamus, alias amet consequatur corporis culpa, deserunt error explicabo, facilis fugit inventore ipsam repellat. Neque, voluptas.
Members: 1234421
            
  <div class="gu-circle-card-wrapper gu-card-wrapper-scrollable">
    <div class="gu-circle-card">
      <!-- Circle card -->
    </div>
    <!-- Another cards -->
  </div>

Post and messages

Posts wrapper

              
  <div class="gu-posts-wrapper">
    <div class="gu-d-flex gu-post-row">
      <div class="elevation-1 gu-card-row__image gu-card-banner gu-card-banner-header gu-static gu-mb-0">
        <img src="./images/avatar.png" />
      </div>
      <input type="text" class="gu-posts-input input-lg gu-input" id="exmpl" placeholder="Your Circle name" />
      <button class="gu-posts-btn gu-main-link-form-fill gu-bg-orange">POST</button>
    </div>

    <div class="gu-d-flex gu-post-row">
      <div class="gu-tags-wrapper">
        <button class="gu-tag gu-main-link-form-fill gu-border-green gu-color-green">
          <div class="btn-content">
            <i class="far fa-star gu-btn-icon"></i>
            General
          </div>
        </button>
        <button class="gu-tag gu-main-link-form-fill gu-border-green gu-color-green">
          <div class="btn-content">
            <i class="far fa-clipboard-list gu-btn-icon"></i>
            Announcements
          </div>
        </button>
        <button class="gu-tag gu-main-link-form-fill gu-border-green gu-color-green">
          <div class="btn-content">
            <i class="far fa-graduation-cap gu-btn-icon"></i>
            Circle Microdegree
          </div>
        </button>
      </div>
    </div>
  </div>

Pinned post

Roger Hamilton
Mentor
Active bookmark with class gu-bookmark-active 
            
  <div class="gu-posts-wrapper gu-post-pinned">
    <div class="gu-d-flex gu-post-row gu-justify-between gu-align-center">
      <div class="gu-card-row__image-n-text-block gu-d-flex gu-direction-row">
        <div class="elevation-1 gu-card-row__image gu-card-banner gu-card-banner-header gu-static gu-mb-0 gu-mr-3">
          <img src="images/V1/avatar.png" />
        </div>
        <div class="gu-card-row__name gu-d-flex gu-direction-column">
          <span class="header">Roger Hamilton</span>
          <div class="subheader">Mentor</div>
        </div>
      </div>

      <div class="gu-post-bookmark gu-round-btn"><i class="far fa-bookmark fa-lg"></i></div>
    </div>

    <div class="gu-post-bookmark gu-round-btn gu-bookmark-active"><i class="far fa-bookmark fa-lg"></i></div>
    Active bookmark with class <code class="language-html">gu-bookmark-active</code>
  </div>

Header with "View all" for cards

Mentor row for cards

Default size on image wrapper 44px; You can specify 36px or 60px by adding to class gu-card-row__image class gu-card-row__image-60 or gu-card-row__image-36

Example

            
  <div class="gu-card-row__image gu-card-row__image-36 gu-card-banner gu-static">
    <img src="images/V1/neon.png" alt="neon" />
  </div>
neon

Separator added by adding class gu-with-separator to gu-side-card__rows-block

Circle Mentor View All
Roger Hamilton
Mentor
3.6
(75 Reviews)
The Personalised Education Movement
364 · 12 jan 2020
The Personalised Education
11 jan 2020 - 12 jan 2020 
            
  <div class="gu-side-card gu-d-flex gu-direction-column">
    <div class="gu-side-card__header gu-d-flex gu-direction-row gu-justify-between gu-align-center gu-mb-2">
      <span class="header">Circle Mentor</span>
      <a class="view-all" href="">View All</a>
    </div>

    <div class="gu-side-card__rows-block gu-with-separator">
      <div class="gu-side-card-row gu-d-flex gu-direction-row gu-justify-between gu-mt-3 gu-mb-2">
        <div class="gu-card-row__image-n-text-block gu-d-flex gu-direction-row">
          <div class="elevation-1 gu-card-row__image gu-card-banner gu-card-banner-header gu-static gu-mb-0 gu-mr-3">
            <img src="./images/avatar.png" />
          </div>
          <div class="gu-card-row__name gu-d-flex gu-direction-column">
            <span class="header">Roger Hamilton</span>
            <div class="subheader">Mentor</div>
          </div>
        </div>

        <div class="gu-rating-block">
          <div class="gu-main-card-middle-rating-block">
            <div class="gu-main-card-middle-rating">
              <span style="width: 66%"></span>
            </div>
            <div class="gu-main-card-middle-rating-number">3.6</div>
          </div>
          <div class="gu-rating-block-reviews"><a href="">(75 Reviews)</a></div>
        </div>
      </div>

      <div class="gu-side-card-row gu-d-flex gu-direction-row gu-justify-between gu-mt-3 gu-mb-2 ">
        <div class="gu-card-row__image-n-text-block gu-d-flex gu-direction-row">
          <div
            class="elevation-1 gu-card-row__image gu-card-row__image-60 gu-card-banner gu-card-banner-header gu-static gu-mb-0 gu-mr-3"
          >
            <img src="./images/neon.png" />
          </div>
          <div class="gu-card-row__name gu-d-flex gu-direction-column">
            <span class="header low">The Personalised Education Movement</span>
            <div class="subheader">
              <i class="far fa-user-friends gu-date"></i>
              <span class="gu-member-count gu-date">364</span>
              <span class="gu-middle-dot-divider">&#183;</span>
              <span class="gu-date">12 jan 2020</span>
            </div>
          </div>
        </div>
      </div>

      <div class="gu-side-card-row gu-d-flex gu-direction-row gu-justify-between gu-mt-3 gu-mb-2 ">
        <div class="gu-card-row__image-n-text-block gu-d-flex gu-direction-row">
          <div
            class="elevation-1 gu-card-row__image gu-card-row__image-60 gu-card-banner gu-card-banner-header gu-static gu-mb-0 gu-mr-3"
          >
            <img src="./images/circle-badge.png" />
          </div>
          <div class="gu-card-row__name gu-d-flex gu-direction-column">
            <span class="header low">The Personalised Education</span>
            <div class="subheader">
              <span class="gu-date">11 jan 2020</span>
              <span class="gu-date">-</span>
              <span class="gu-date">12 jan 2020</span>
            </div>
          </div>
        </div>
        <button class="gu-main-link-form-fill gu-bg-green">Start</button>
      </div>
    </div>
  </div>

Round image badge



*Wrapper with position: relative; using class gu-relative-block

This image has position absolute with top: -88px; left: calc(50% - 70px); @media (min-width: 768px) { top: -112px; left: 70px; } so it requires a wrapper with position: relative; Override position values for positioning.
For discarding absolute positioned image - use class gu-static
Control the size with width and height of image wrapper (gu-card-banner-* or gu-card-banner(if no gu-card-banner-header class)), width and height should be equal. 
            
  <div class="gu-relative-block gu-border-orange gu-pa-5" style="min-height: 70px">
    <div class="gu-card-banner gu-card-banner-header elevation-1"><img src="./images/circle-badge.png" /></div>
  </div>

  <div class="gu-relative-block gu-border-orange gu-pa-5" style="min-height: 70px">
    <div class="gu-card-banner gu-card-banner-header gu-static elevation-1"><img src="./images/circle-badge.png" /></div>
  </div>

Circles duo-banner

Health Dynamics

Wellington, New Zealand 
            
  <div class="gu-duo-banner">
    <div class="gu-duo-banner__background-wrapper">
      <button class="gu-main-link-form-fill gu-bg-green">View Tour</button>
    </div>
    <div class="gu-duo-banner__bottom-wrapper">
      <div class="gu-card-banner gu-card-banner-header elevation-1"><img src="./images/circle-badge.png" /></div>
      <div class="gu-duo-banner-circle-name">
        <div class="gu-circle-header"><h1>Health Dynamics</h1></div>
        <div class="gu-circle-location">
          <i class="fal fa-map-marker-alt gu-btn-icon gu-ml-0 gu-mr-1"></i>
          Wellington, New Zealand
        </div>
      </div>
      <div class="gu-buttons-block">
        <button class="gu-main-link-form gu-border-green gu-color-green">
          <i class="far fa-share-alt gu-btn-icon"></i>
          Share
        </button>
        <button class="gu-main-link-form-fill gu-bg-orange">Join</button>
      </div>
    </div>
  </div>

Pagination

            
 <div>
  <nav class="gu-pagination">
    <span class="prev change-active">
      <a rel="prev" href=""
        ><img
          src="https://d27hl5wikuj24b.cloudfront.net/assets/2020/genius_institute/left-green-arrow-b6779c6808e5fd57da394c2959e3d0d8bd33c8823ada17b67d48720e9d3b4179.svg"
          alt="Left green arrow"
      /></a>
    </span>

    <span class="page active">
      <a rel="prev" href="">1</a>
    </span>

    <span class="page current active"> 2 </span>
    <span class="page active"> 3 </span>
    <span class="page active"> 4 </span>

    <span class="next change-active">
      <a rel="next" href=""
        ><img
          src="https://d27hl5wikuj24b.cloudfront.net/assets/2020/genius_institute/left-green-arrow-b6779c6808e5fd57da394c2959e3d0d8bd33c8823ada17b67d48720e9d3b4179.svg"
          alt="Left green arrow"
        /></a>
      </span>
    </nav>
  </div>

Rating Stars

Control the fulfilling of stars with value of style="width: 80%"

4
            
  <div class="gu-rating-block">
    <div class="gu-main-card-middle-rating-block">
      <div class="gu-main-card-middle-rating">
        <span style="width: 80%"></span>
      </div>
      <div class="gu-main-card-middle-rating-number">4</div>
    </div>
  </div>

Rating with review

3.6
(75 Reviews)
            
  <div class="gu-rating-block">
    <div class="gu-main-card-middle-rating-block">
      <div class="gu-main-card-middle-rating">
        <span style="width: 66%"></span>
      </div>
      <div class="gu-main-card-middle-rating-number">3.6</div>
    </div>
    <div class="gu-rating-block-reviews"><a href="">(75 Reviews)</a></div>
  </div>

One line rating

Add class gu-rating-one-line

3.6
(75 Reviews)
            
  <div class="gu-rating-block gu-rating-one-line">
    <div class="gu-main-card-middle-rating-block">
      <div class="gu-main-card-middle-rating">
        <span style="width: 66%"></span>
      </div>
      <div class="gu-main-card-middle-rating-number">3.6</div>
    </div>
    <div class="gu-rating-block-reviews"><a href="">(75 Reviews)</a></div>
  </div>

Banner image

logo

Circles

            
  <div class="gu-banner-background">
    <div class="gu-banner-content-wrapper">
      <div class="gu-banner-content gu-banner-content-left"></div>
      <div class="gu-banner-content gu-banner-content-center gu-color-white">
        <div><img src="./images/Ellipse-105.png" alt="logo" /></div>
        <div><h3>Circles</h3></div>
        <button class="gu-main-link-form-fill gu-bg-orange gu-color-white">Submit</button>
      </div>
      <div class="gu-banner-content gu-banner-content-right"></div>
    </div>
  </div>
  <div class="gu-container-wrapper">
    <!-- TABS components-->
  </div>

Tabs

            
  <div class="gu-main-content-container">
    <!-- GU tabs component-->
    <div class="gu-tabs-container">
      <ul class="gu-tabs-list gu-relative-block">
        <li class="gu-tab">
          <a href="1" data-tab-name="created-1" class="gu-tab-text">Created</a>
        </li>
        <li class="gu-tab gu-tab-active">
          <a href="2" data-tab-name="created-2" class="gu-tab-text">Created</a>
        </li>
        <li class="gu-tab">
          <a href="3" data-tab-name="created-3" class="gu-tab-text">Created</a>
        </li>
        <li class="gu-tab">
          <a href="4" data-tab-name="created-4" class="gu-tab-text">Created</a>
        </li>
        <li class="gu-tab">
          <a href="5" data-tab-name="created-5" class="gu-tab-text">Created</a>
        </li>
        <li class="gu-tab">
          <a href="6" data-tab-name="created-6" class="gu-tab-text">Created</a>
        </li>
      </ul>
    </div>
    <!---->
  </div>

Main content container climbing on top

some content
            
  <div class="gu-container-wrapper">
    <div class="gu-main-content-container"><div>some content</div></div>
  </div>

Select2 component

To enable Select2 component class js-no-search-basic-single should be registered in app like this:
From the docs:

Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call .select2() on any jQuery selector where you would like to initialize Select2.

Basic usage | Select2
Basic usage | Select2 (WebCache) 
            
  // In your Javascript (external .js resource or <script> tag or import select2register.js from stylekit)
  $(function () {
    $(".js-no-search-basic-single").select2({
      minimumResultsForSearch: -1,
      dropdownCssClass: "gu-select-dropdown",
    });
  });

  $(function () {
    $(".js-with-search-basic-single").select2({
      dropdownCssClass: "gu-select-dropdown",
    });
  });

  $(function () {
    $(".js-form-select-no-search-single").select2({
      minimumResultsForSearch: -1,
      dropdownCssClass: "gu-select-form-dropdown",
    });
  });

Select without search

Added with class js-no-search-basic-single

Should be registered in js as class .js-no-search-basic-single or imported file from stylekit with predefined select2 options


Select with search

Added with class js-with-search-basic-single

Should be registered in js as class .js-with-search-basic-single or imported file from stylekit with predefined select2 options


Select without search for form

Added with class js-form-select-no-search-single

Should be registered in js as class .js-form-select-no-search-single or imported file from stylekit with predefined select2 options 

            
  <div class="gu-select">
    <select class="js-no-search-basic-single" name="state">
      <option value="AL">Alabama</option>
      <option value="AL1">Alabama1</option>
      <option value="AL2">Alabama2</option>
      <option value="WY">Wyoming</option>
    </select>
  </div>

  <div class="gu-select">
    <select class="js-with-search-basic-single" name="state">
      <option value="AL">Alabama</option>
      <option value="AL1">Alabama1</option>
      <option value="AL2">Alabama2</option>
      <option value="WY">Wyoming</option>
    </select>
  </div>

  <div class="gu-select-form-input">
    <select class="js-form-select-no-search-single" name="state">
      <option value="AL">Alabama</option>
      <option value="AL1">Alabama1</option>
      <option value="AL2">Alabama2</option>
      <option value="WY">Wyoming</option>
    </select>
  </div>

Dropdown

Dropdown

Use bootstrap options for positioning

Dropdowns BS3.3 
            
  <div class="dropdown">
    <a href="#" data-toggle="dropdown" class="gu-dropdown-active-area">
      Dropdown
      <i class="fas fa-fw fa-caret-down gu-dropdown-icon-rotate"></i>
    </a>

    <ul class="dropdown-menu">
      <li><a href="#">Profile</a></li>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Messages</a></li>
      <li><a href="#">Notifications</a></li>
      <li><a href="#">Settings / Preferences</a></li>
      <li><a href="#">Stream</a></li>
      <li><a href="#">Logout</a></li>
    </ul>
  </div>

Button with icon

For adding or removing icon, just add or remove "i" tag before Text between button tags
To specify icon after button text, add to icon tag "gu-ml-2" class for correct margin

Icons used from Fontawesome library

            
  <button class="gu-main-link-form gu-border-green gu-color-green">
    <i class="far fa-filter gu-btn-icon"></i>
    Back
    <i class="far fa-filter gu-btn-icon gu-ml-2"></i>
  </button>

Button filled and empty

For now we can customize parameters:

"gu-main-link-form" class for empty button
"gu-main-link-form-fill" class for filled button
"gu-color-*" class for setting the font color
"gu-bg-*" class for background, not just buttons but all blocks. *In combination with "gu-main-link-form*" class no need to additionally set hover/focus backgrounds
"gu-border-*" class to set border color. *In combination with "gu-main-link-form*" class no need to additionally set hover/focus backgrounds

For now available colors orange (#f05203), primary (#3081ce), green (#8fbb23), white (#fff) 
            
  <button class="gu-main-link-form gu-color-orange gu-border-orange">
    Cancel
  </button>

  <button class="gu-main-link-form-fill gu-bg-orange gu-color-white">
    Submit
  </button>

  <button class="gu-main-link-form-fill gu-bg-primary gu-color-white">
    Submit
  </button>

Form

Choose your image to show it on Circle with the following dimensions: 310x140 px wide

Cover Image

Upload your image, please make sure your image is the following dimensions: 90Ñ…90

Icon with hover popup

Activating the Store for your circle means you will be able to link Products to your circle. These are visible from the Product tab in your circle once added. Select this box if you want to activate the store
Activating the Store for your circle means you will be able to link Products to your circle. These are visible from the Product tab in your circle once added. Select this box if you want to activate the store 
            
  <form class="gu-form">
    <div class="form-group">
      <label for="circle_name2">Circle Name</label>
      <input type="text" class="form-control input-lg gu-input" id="circle_name2" placeholder="Your Circle name" />
    </div>

    <div class="form-group gu-mt-4">
      <label for="circle_name3">Input with Button</label>
      <div class="gu-input-with-btn-wrapper">
        <input type="text" class="form-control input-lg gu-input" id="circle_name3" placeholder="Your Circle name" />
        <button class="gu-main-link-form gu-ml-3">Back</button>
      </div>
    </div>

    <div class="form-group gu-mt-4">
      <label for="circle_name4">Input with Button (with icon)</label>
      <div class="gu-input-with-btn-wrapper">
        <input type="text" class="form-control input-lg gu-input" id="circle_name4" placeholder="Your Circle name" />
        <button class="gu-main-link-form gu-ml-3">
          <i class="fal fa-arrow-left gu-btn-icon"></i>
          Back
        </button>
      </div>
    </div>

    <div class="gu-select-form-input">
      <select class="js-form-select-no-search-single" name="state">
        <option value="AL">Alabama</option>
        <option value="AL1">Alabama1</option>
        <option value="AL2">Alabama2</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>

    <div class="form-group">
      <label for="description_example">Short description</label>
      <textarea class="form-control gu-input gu-input-textarea" rows="3" id="description_example"></textarea>
    </div>

    <div class="form-group gu-image-loader gu-pl-0">
      <input type="file" id="cover_image_example" class="gu-visually-hidden" />
      <p class="gu-pl-0 gu-mb-1">Choose your image to show it on Circle with the following dimensions: 310x140 px wide</p>

      <div class="gu-image-wrapper gu-pl-0 gu-mt-5 gu-mb-5">
        <div class="gu-image">
          <div class="gu-cover-image-preview"></div>
        </div>
      </div>
      <label for="cover_image_example" class="gu-image-loader-label gu-main-link-orange-form gu-pl-0">Choose Image</label>
    </div>

    <div class="form-group gu-image-loader gu-pl-0">
      <h3>Cover Image</h3>

      <input type="file" id="badge_image" class="gu-visually-hidden" />

      <p class="gu-pl-0 gu-mb-1">Upload your image, please make sure your image is the following dimensions: 90Ñ…90</p>

      <div class="gu-image-wrapper gu-pl-0 gu-mt-5 gu-mb-5">
        <div class="gu-image">
          <div class="gu-round-image-preview"></div>
        </div>
      </div>
      <label for="badge_image" class="gu-image-loader-label gu-main-link-orange-form gu-pl-0">Choose Image</label>
    </div>

    <h3>Icon with hover popup</h3>

    <div class="gu-creation-label gu-creation-label-with-icon gu-mb-5">
      <div class="gu-create-label-hint">
        <span><i class="fas fa-question fa-sm"></i></span>
        <div class="gu-hover-label-hint">
          Activating the Store for your circle means you will be able to link Products to your circle. These are visible from the
          Product tab in your circle once added. Select this box if you want to activate the store
        </div>
      </div>
    </div>

    <div class="gu-vertical-space"></div>

    <div class="gu-input-radio">
      <div class="gu-d-flex gu-mb-3">
        <label class="gu-input-radio__container gu-mr-2">
          One
          <input type="radio" checked="checked" name="radio" />
          <span class="gu-checkmark"></span>
        </label>
        <div class="gu-creation-label gu-creation-label-with-icon">
          <div class="gu-create-label-hint">
            <span><i class="fas fa-question fa-sm"></i></span>
            <div class="gu-hover-label-hint">
              Activating the Store for your circle means you will be able to link Products to your circle. These are visible from
              the Product tab in your circle once added. Select this box if you want to activate the store
            </div>
          </div>
        </div>
      </div>

      <div class="gu-d-flex gu-mb-3">
        <label class="gu-input-radio__container">
          Two
          <input type="radio" name="radio" />
          <span class="gu-checkmark"></span>
        </label>
      </div>

      <div class="gu-d-flex gu-mb-3">
        <label class="gu-input-radio__container"
          >Three
          <input type="radio" name="radio" />
          <span class="gu-checkmark"></span>
        </label>
      </div>

      <div class="gu-d-flex gu-mb-3">
        <label class="gu-input-radio__container"
          >Four
          <input type="radio" name="radio" />
          <span class="gu-checkmark"></span>
        </label>
      </div>
    </div>

    <div class="gu-vertical-space"></div>

    <div class="gu-input-checkbox">
      <div class="gu-d-flex gu-mb-3">
        <label class="gu-input-checkbox__container"
          >One
          <input type="checkbox" checked="checked" />
          <span class="gu-checkmark"></span>
        </label>
      </div>

      <div class="gu-d-flex gu-mb-3">
        <label class="gu-input-checkbox__container"
          >Two
          <input type="checkbox" />
          <span class="gu-checkmark"></span>
        </label>
      </div>

      <div class="gu-d-flex gu-mb-3">
        <label class="gu-input-checkbox__container"
          >Three
          <input type="checkbox" />
          <span class="gu-checkmark"></span>
        </label>
      </div>

      <div class="gu-d-flex gu-mb-3">
        <label class="gu-input-checkbox__container"
          >Four
          <input type="checkbox" />
          <span class="gu-checkmark"></span>
        </label>
      </div>
    </div>
  </form>

Text Search Input

            
  <div class="form-group">
    <label for="circle_name">Circle Name</label>
    <input type="text" class="form-control input-lg gu-input" id="circle_name" placeholder="Your Circle name" />
  </div>

Text Input

            
  <div class="form-group">
    <label for="circle_name">Circle Name</label>
    <input type="text" class="form-control input-lg gu-input" id="circle_name" placeholder="Your Circle name" />
  </div>

Text Input with buttons

            
  <div class="form-group gu-mt-4">
    <label for="circle_name3">Input with Button</label>
    <div class="gu-input-with-btn-wrapper">
      <input type="text" class="form-control input-lg gu-input" id="circle_name3" placeholder="Your Circle name" />
      <button class="gu-main-link-form">Back</button>
    </div>
  </div>

  <div class="form-group gu-mt-4">
    <label for="circle_name4">Input with Button (with icon)</label>
    <div class="gu-input-with-btn-wrapper">
      <input type="text" class="form-control input-lg gu-input" id="circle_name4" placeholder="Your Circle name" />
      <button class="gu-main-link-form">
        <i class="fal fa-arrow-left gu-btn-icon"></i>
        Back
      </button>
    </div>
  </div>

Select

            
  <div class="gu-select-form-input">
    <select class="js-form-select-no-search-single" name="state">
      <option value="AL">Alabama</option>
      <option value="AL1">Alabama1</option>
      <option value="AL2">Alabama2</option>
      <option value="WY">Wyoming</option>
    </select>
  </div>

Textarea

            
  <div class="form-group">
    <label for="description">Short description</label>
    <textarea class="form-control gu-input gu-input-textarea" rows="3" id="description"></textarea>
  </div>

Input File - Image Loader

Choose your image to show it on Circle with the following dimensions: 310x140 px wide

            
  <div class="form-group gu-image-loader gu-pl-0">
    <input type="file" id="cover_image" class="gu-visually-hidden" />
    <p class="gu-pl-0 gu-mb-1">Choose your image to show it on Circle with the following dimensions: 310x140 px wide</p>

    <div class="gu-image-wrapper gu-pl-0 gu-mt-5 gu-mb-5">
      <div class="gu-image">
        <div class="gu-cover-image-preview"></div>
      </div>
    </div>
    <label for="cover_image" class="gu-image-loader-label gu-main-link-orange-form gu-pl-0">Choose Image</label>
  </div>

Radiobuttons & Checkboxes

Activating the Store for your circle means you will be able to link Products to your circle. These are visible from the Product tab in your circle once added. Select this box if you want to activate the store 
            
<div class="gu-input-radio">
  <div class="gu-d-flex gu-mb-3">
    <label class="gu-input-radio__container gu-mr-2">
      One
      <input type="radio" checked="checked" name="radio" />
      <span class="gu-checkmark"></span>
    </label>
    <div class="gu-creation-label gu-creation-label-with-icon">
      <div class="gu-create-label-hint">
        <span><i class="fas fa-question fa-sm"></i></span>
        <div class="gu-hover-label-hint">
          Activating the Store for your circle means you will be able to link Products to your circle. These are visible from
          the Product tab in your circle once added. Select this box if you want to activate the store
        </div>
      </div>
    </div>
  </div>
  <div class="gu-d-flex gu-mb-3">
    <label class="gu-input-radio__container">
      Two
      <input type="radio" name="radio" />
      <span class="gu-checkmark"></span>
    </label>
  </div>
  <div class="gu-d-flex gu-mb-3">
    <label class="gu-input-radio__container"
    >Three
      <input type="radio" name="radio" />
      <span class="gu-checkmark"></span>
    </label>
  </div>
  <div class="gu-d-flex gu-mb-3">
    <label class="gu-input-radio__container"
    >Four
      <input type="radio" name="radio" />
      <span class="gu-checkmark"></span>
    </label>
  </div>
</div>
<div class="gu-vertical-space"></div>
<div class="gu-input-checkbox">
  <div class="gu-d-flex gu-mb-3">
    <label class="gu-input-checkbox__container"
    >One
      <input type="checkbox" checked="checked" />
      <span class="gu-checkmark"></span>
    </label>
  </div>
  <div class="gu-d-flex gu-mb-3">
    <label class="gu-input-checkbox__container"
    >Two
      <input type="checkbox" />
      <span class="gu-checkmark"></span>
    </label>
  </div>
  <div class="gu-d-flex gu-mb-3">
    <label class="gu-input-checkbox__container"
    >Three
      <input type="checkbox" />
      <span class="gu-checkmark"></span>
    </label>
  </div>
  <div class="gu-d-flex gu-mb-3">
    <label class="gu-input-checkbox__container"
    >Four
      <input type="checkbox" />
      <span class="gu-checkmark"></span>
    </label>
  </div>
</div>
You should import js files of Stylekit for enabling navigation features

Navbar (Desktop) Display: none on (max-width: 1419px)

To see the component, width of viewport should be 1420px or more

            
  <nav class="gu-navigation">
    <div class="gu-navigation__left">
      <a href="#">
        <img src="images/logo.svg" />
      </a>
      <ul class="list-inline list-unstyled gu-navigation__links">
        <li class="dropdown">
          <a href="#" data-toggle="dropdown" class="gu-dropdown-active-area">
            Curriculum
            <i class="fas fa-fw fa-caret-down gu-dropdown-icon-rotate"></i>
          </a>

          <ul class="dropdown-menu">
            <li><a href="#">Curriculum</a></li>
            <li><a href="#">Curriculum for Kids</a></li>
          </ul>
        </li>
        <li><a href="#">Mentors</a></li>
        <li><a href="#">Circles</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">Companies</a></li>
        <li><a href="#">Store</a></li>
      </ul>
    </div>

    <div class="gu-navigation__right">
      <div class="gu-navigation__search search__container gu-d-none">
        <a href="#" class="gu-navigation__search__close">
          <i class="fal fa-fw fa-times"></i>
        </a>

        <input type="text" class="form-control search__input gu-navigation__search__input" placeholder="Search" />

        <div class="search__results gu-d-none">
          <div class="search__results__section">
            <div class="search__results__title">USERS</div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>
          </div>

          <a href="#" class="search__results__divide">
            <div class="search__results__divide__intro">
              Show
              <div class="search__results__divide__highlight">5</div>
              users containing:
            </div>
            <div class="search__results__divide__highlight">pas</div>
          </a>

          <div class="search__results__section">
            <div class="search__results__title">MENTOR CIRCLES</div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>
          </div>

          <a href="#" class="search__results__divide">
            <div class="search__results__divide__intro">
              Show
              <div class="search__results__divide__highlight">5</div>
              mentor circles containing:
            </div>
            <div class="search__results__divide__highlight">pas</div>
          </a>

          <div class="search__results__section">
            <div class="search__results__title">DEGREES</div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>
          </div>

          <a href="#" class="search__results__divide">
            <div class="search__results__divide__intro">
              Show
              <div class="search__results__divide__highlight">5</div>
              degrees containing:
            </div>
            <div class="search__results__divide__highlight">pas</div>
          </a>

          <div class="search__results__section">
            <div class="search__results__title">CERTIFICATIONS</div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>
          </div>

          <a href="#" class="search__results__divide">
            <div class="search__results__divide__intro">
              Show
              <div class="search__results__divide__highlight">5</div>
              certifications containing:
            </div>
            <div class="search__results__divide__highlight">pas</div>
          </a>
        </div>
      </div>

      <div class="gu-navigation__extra">
        <a href="#" class="gu-navigation__icon gu-navigation__search_icon">
          <i class="fal fa-fw fa-search"></i>
        </a>

        <a href="#" class="gu-navigation__icon gu-navigation__cart_icon">
          <i class="fal fa-fw fa-shopping-cart"></i>
        </a>

        <span class="dropdown">
          <a href="#" data-toggle="dropdown" class="gu-navigation__icon gu-navigation__ellipsis_icon">
            <i class="far fa-ellipsis-v"></i>
            <i class="fas fa-fw fa-caret-down gu-dropdown-icon-rotate"></i>
          </a>

          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Membership</a></li>
            <li><a href="#">Invest</a></li>
            <li><a href="#">TBC Leaderboard</a></li>
          </ul>
        </span>
      </div>

      <div class="gu-navigation__user">
        <a href="#" class="gu-navigation__user__name">Tom Gallagher</a>

        <span class="dropdown">
          <a href="#" data-toggle="dropdown" class="gu-navigation__user__avatar">
            <img src="images/temp_avatar.png" />
          </a>

          <a href="#" data-toggle="dropdown" class="gu-navigation__user__caret">
            <i class="fas fa-fw fa-caret-down gu-dropdown-icon-rotate"></i>
          </a>

          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Profile</a></li>
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Messages</a></li>
            <li><a href="#">Notifications</a></li>
            <li><a href="#">Settings / Preferences</a></li>
            <li><a href="#">Stream</a></li>
            <li><a href="#">Logout</a></li>
          </ul>
        </span>
      </div>
    </div>
  </nav>

Navbar (Mobile) Display: none on (min-width: 1420px)

To see the component, width of viewport should be 1420px or less

USERS
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
Show
5
users containing:
pas
MENTOR CIRCLES
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
Show
5
mentor circles containing:
pas
DEGREES
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
Show
5
degrees containing:
pas
CERTIFICATIONS
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
John Pasquelin
Show
5
certifications containing:
pas

Mobile navigation bar

            
  <div class="gu-mobile_navigation">
    <div class="gu-mobile_navigation__icons gu-mobile_navigation__icons--left">
      <div class="gu-mobile_navigation__search search__container gu-d-none">
        <a href="#" class="gu-mobile_navigation__search__close">
          <i class="fal fa-fw fa-times"></i>
        </a>

        <input type="text" class="form-control search__input gu-mobile_navigation__search__input" placeholder="Search" />

        <div class="search__results gu-d-none">
          <div class="search__results__section">
            <div class="search__results__title">USERS</div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>
          </div>

          <a href="#" class="search__results__divide">
            <div class="search__results__divide__intro">
              Show
              <div class="search__results__divide__highlight">5</div>
              users containing:
            </div>
            <div class="search__results__divide__highlight">pas</div>
          </a>

          <div class="search__results__section">
            <div class="search__results__title">MENTOR CIRCLES</div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>
          </div>

          <a href="#" class="search__results__divide">
            <div class="search__results__divide__intro">
              Show
              <div class="search__results__divide__highlight">5</div>
              mentor circles containing:
            </div>
            <div class="search__results__divide__highlight">pas</div>
          </a>

          <div class="search__results__section">
            <div class="search__results__title">DEGREES</div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>
          </div>

          <a href="#" class="search__results__divide">
            <div class="search__results__divide__intro">
              Show
              <div class="search__results__divide__highlight">5</div>
              degrees containing:
            </div>
            <div class="search__results__divide__highlight">pas</div>
          </a>

          <div class="search__results__section">
            <div class="search__results__title">CERTIFICATIONS</div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>

            <div class="search__result">
              <div class="search__result__icon">
                <img src="images/temp_avatar.png" />
              </div>

              <div class="search__result__info">
                <div class="search__result__title">John Pasquelin</div>
                <div class="search__result__detail">John Pasquelin</div>
              </div>
            </div>
          </div>

          <a href="#" class="search__results__divide">
            <div class="search__results__divide__intro">
              Show
              <div class="search__results__divide__highlight">5</div>
              certifications containing:
            </div>
            <div class="search__results__divide__highlight">pas</div>
          </a>
        </div>
      </div>

      <div class="gu-mobile_navigation__menu_icon">
        <a href="#" data-toggle="modal" data-target="#gu-mobile_navigation_dialog-">
          <i class="fal fa-bars"></i>
        </a>
      </div>

      <a href="#" class="gu-mobile_navigation__search_icon">
        <i class="fal fa-search"></i>
      </a>
    </div>

    <a href="#" class="gu-mobile_navigation__logo">
      <img src="images/logo.svg" />
    </a>

    <div class="gu-mobile_navigation__icons">
      <a href="#" class="gu-mobile_navigation__cart">
        <i class="fal fa-shopping-cart"></i>
      </a>

      <a href="#" class="gu-mobile_navigation__user">
        <img src="images/temp_avatar.png" />
      </a>
    </div>
  </div>

Mobile navigation Modal dialog

            
  <div
    class="modal gu-mobile_navigation__dialog"
    id="gu-mobile_navigation_dialog-"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog" role="document">
      <a href="#" class="gu-mobile_navigation__dialog__close" data-dismiss="modal">
        <i class="fal fa-times"></i>
      </a>

      <div class="gu-mobile_navigation__dialog__join">
        <a href="#sign_up_modal" class="btn--large btn--primary" data-toggle="modal"> Get Started </a>
      </div>

      <ul class="list-unstyled gu-mobile_navigation__dialog__menu">
        <li><a href="./index.html">Index</a></li>
        <li>
          <a data-toggle="collapse" href="#curriculum_collapse_menu">
            Curriculum
            <span class="caret"></span>
          </a>
        </li>

        <li>
          <ul class="list-unstyled collapse" id="curriculum_collapse_menu">
            <li><a href="/curriculums">Curriculum</a></li>
            <li><a href="/curriculums?q%5Bfor_children_true%5D=1">Curriculum For Kids</a></li>
          </ul>
        </li>
        <li><a href="/pages/mentors">Mentors</a></li>
        <li><a href="/pages/cities">Cities</a></li>
        <li><a href="/pages/events">Events</a></li>
        <li><a href="/articles">Articles</a></li>
        <li><a href="/companies">Companies</a></li>
        <li><a href="/store">Store</a></li>
        <li>
          <a data-toggle="collapse" href="#mobile_collapse_more">
            More
            <span class="caret"></span>
          </a>
          <ul class="list-unstyled collapse" id="mobile_collapse_more">
            <li><a href="/upgrade">Membership</a></li>
            <li><a target="_blank" href="https://invest.geniusu.com/">Invest</a></li>
            <li><a href="/tbc/leaderboard">TBC Leaderboard</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

Bottom navbar (mobile) for CLEAR.

Display: none on (min-width: 768px)

To see the component, width of viewport should be 768px or less

Place gu-dimmed-clickable-area on the same level with gu-bottom-navbar inside body tag
1
              
  <div class="gu-dimmed-clickable-area"></div>

  <div class="gu-bottom-navbar ">
    <div class="gu-bottom-navbar__wrapper">
      <div class="gu-menu-row gu-d-flex gu-justify-around gu-align-center">
        <a href="#sk-navbar_clear">
          <div class="gu-menu-row__item">
            <object width="20px" height="16px" type="image/svg+xml" data="images/V1/icon-home.svg"></object>
            <span class="gu-link-span"></span>
          </div>
        </a>

        <a href="#sk-navbar_clear">
          <div class="gu-menu-row__item">
            <object width="20px" height="16px" type="image/svg+xml" data="images/V1/icon-bell.svg"></object>
            <span class="gu-link-span"></span>
          </div>
        </a>

        <div></div>

        <a href="#sk-navbar_clear">
          <div class="gu-menu-row__item">
            <object width="20px" height="16px" type="image/svg+xml" data="images/V1/icon-message.svg"></object>
            <span class="gu-link-span"></span>
          </div>
        </a>

        <a href="#sk-navbar_clear">
          <div class="gu-menu-row__item">
            <object width="20px" height="16px" type="image/svg+xml" data="images/V1/icon-dashboard.svg"></object>
            <span class="gu-link-span"></span>
          </div>
        </a>
      </div>

        <div class="gu-gem-button">
          <object class="gu-gem-svg" width="30px" type="image/svg+xml" data="images/V1/gem.svg"></object>
          <div class="gu-gem-button__cheeks">
            <div class="gu-gem-button__cheeks-left">1</div>
            <div class="gu-gem-button__cheeks-right"></div>
          </div>
          <span class="gu-link-span gu-gem-span-button"></span>

          <a href="#1" class="gu-gem-menu-item contacts">
            <object width="20px" height="20px" type="image/svg+xml" data="images/V1/icon-contacts.svg"></object>
            <span class="gu-link-span"></span>
          </a>
          <a href="#2" class="gu-gem-menu-item curriculum">
            <object width="20px" height="20px" type="image/svg+xml" data="images/V1/icon-curriculum.svg"></object>
            <span class="gu-link-span"></span>
          </a>
          <a href="#3" class="gu-gem-menu-item dollar">
            <object width="20px" height="20px" type="image/svg+xml" data="images/V1/icon-dollar.svg"></object>
            <span class="gu-link-span"></span>
          </a>
          <a href="#4" class="gu-gem-menu-item restore">
            <object width="20px" height="20px" type="image/svg+xml" data="images/V1/icon-restore.svg"></object>
            <span class="gu-link-span"></span>
          </a>
          <a href="#5" class="gu-gem-menu-item arrows">
            <object width="20px" height="20px" type="image/svg+xml" data="images/V1/icon-arrows.svg"></object>
            <span class="gu-link-span"></span>
          </a>
        </div>
    </div>
  </div>