Panels - ViacomCBS UI Kit

PREVIEW

HTML
SCSS

<!-- LINKS PANEL -->
<div class="panel panel-links js-panel js-panel-[Unique ID] is-active" data-panel="[Unique ID]">
    <button class="panel__close js-close">
        <i class="fa fa-close"></i>
    </button>
    <div class="panel-links__container">
        <div class="panel-links__block panel-links__block--main">
            <div class="card-simple-group">
                <!-- Simple Card 1-1 -->
                <a href="#" class="card-simple">
                    <div class="card-simple__header">
                        <div class="card-simple__icon">
                            <i class="fa fa-external-link"></i>
                        </div>
                        <h3 class="card-simple__title">Simple Card 1-1</h3>
                    </div>
                    <div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
                </a>
                <!-- /Simple Card 1-1 -->

                <!-- Simple Card 1-2 -->
                <a href="#" class="card-simple">
                    <div class="card-simple__header">
                        <div class="card-simple__icon">
                            <i class="fa fa-external-link"></i>
                        </div>
                        <h3 class="card-simple__title">Simple Card 1-2</h3>
                    </div>
                    <div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
                </a>
                <!-- /Simple Card 1-2 -->

                <!-- Simple Card 1-3 -->
                <a href="#" class="card-simple">
                    <div class="card-simple__header">
                        <div class="card-simple__icon">
                            <i class="fa fa-external-link"></i>
                        </div>
                        <h3 class="card-simple__title">Simple Card 1-3</h3>
                    </div>
                    <div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
                </a>
                <!-- /Simple Card 1-3 -->

                <!-- Simple Card 1-4 -->
                <a href="#" class="card-simple">
                    <div class="card-simple__header">
                        <div class="card-simple__icon">
                            <i class="fa fa-external-link"></i>
                        </div>
                        <h3 class="card-simple__title">Simple Card 1-4</h3>
                    </div>
                    <div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
                </a>
                <!-- /Simple Card 1-4 -->
            </div>
        </div>
        <div class="panel-links__block panel-links__block--sidebar">
            <!-- Promo Card -->
            <!-- Promo Card - Dark -->
            <a href="#" class="promo-card">
                <div class="promo-card__media"></div>
                <div class="promo-card__body">
                    <div class="promo-card__title">Promo Card</div>
                    <div class="promo-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate doloribus placeat.</div>
                </div>

                <div class="promo-card__footer">
                    <button class="btn btn-primary">
                        Lorem ipsum
                        <i class="fa fa-long-arrow-right"></i>
                    </button>
                </div>
            </a>
            <!-- /Promo Card - Dark -->

            <!-- /Promo Card -->
        </div>
    </div>
</div>
<!-- /LINKS PANEL -->
<!-- INFO PANEL -->
<div class="panel panel-info panel-info- is-active" data-panel="[Unique ID]">
    <button class="panel__close js-close">
        <i class="fa fa-close"></i>
    </button>
    <div class="panel-info__intro">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum nostrum dicta optio voluptas porro illo tempore, quasi natus!</p>
    </div>
    <div class="panel-info__container">
        <div class="panel-info__block panel-info__block--small">
            <div class="panel-info__block-title">Lorem ipsum dolor:</div>
            <div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
        </div>
        <div class="panel-info__block panel-info__block--small">
            <div class="panel-info__block-title">Lorem ipsum dolor:</div>
            <div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
        </div>
        <div class="panel-info__block panel-info__block--large">
            <div class="panel-info__block-title">Lorem ipsum dolor:</div>
            <div class="panel-info__block-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsa!</div>
        </div>
    </div>
    <p>
        <a href="#">
            <b
                >Lorem Ipsum
                <i class="fa fa-long-arrow-right"></i>
            </b>
        </a>
    </p>
    <p>
        <a href="#">
            <b
                >Dolorum quibusdam dignissimos
                <i class="fa fa-long-arrow-right"></i>
            </b>
        </a>
    </p>
    <p>
        <a href="#">
            <b
                >Vol uptate ferfawef awe fawe fawef aefaw
                <i class="fa fa-long-arrow-right"></i>
            </b>
        </a>
    </p>
</div>
<!-- /INFO PANEL -->
<!-- COMPOUND PANEL -->
<div class="panel panel-compound js-panel js-panel-[Unique ID] is-active" data-panel="[Unique ID]">
    <button class="panel__close js-close">
        <i class="fa fa-close"></i>
    </button>
    <div class="panel-compound__wrap">
        <div class="panel-compound__header">
            <!-- Emergency Banner -->
            <div class="banner-notification banner-notification--alert js-banner is-active">
                <div class="banner-notification__inner">
                    <div class="banner-notification__body">
                        <span class="banner-notification__type-title"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </span>
                    </div>
                </div>
            </div>
            <!-- /Emergency Banner -->
        </div>
        <div class="panel-compound__body">
            <div class="panel-compound__main">
                <p>Panel - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora excepturi maiores iure nostrum vitae? Ipsum ullam ducimus veritatis fugit laborum placeat aliquid consequatur. Maiores impedit dignissimos laboriosam commodi, repudiandae eum?</p>
                <ul class="step-list">
                    <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates, distinctio esse assumenda at veritatis omnis. Voluptatum quia, debitis repellendus nam illum tenetur delectus omnis amet repudiandae hic enim iusto. Quis!</li>
                    <li>Laudantium facilis quod autem? Eum autem nulla neque asperiores? Nemo ab natus sint ipsa, provident cupiditate iusto repudiandae? Itaque voluptatem id quia recusandae est, fugiat necessitatibus atque vel consequuntur iure.</li>
                    <li>Soluta, iusto! Optio labore ex possimus? Veritatis delectus dicta hic, commodi ipsam, eligendi labore, sunt iure vel molestiae alias quas repellat? Quasi excepturi nulla nesciunt. Delectus explicabo totam officia labore.</li>
                </ul>
                <p>
                    <a href="#" class="btn btn-secondary btn-link"
                        >Lorem Ipsum
                        <i class="fa fa-long-arrow-right"></i>
                    </a>
                </p>
            </div>
            <div class="panel-compound__sidebar">
                <div>
                    <p>
                        <a href="#" class="btn btn-primary">Lorem Ipsum</a>
                    </p>
                    <br />
                    <p>
                        <b>Useful Resources</b>
                    </p>
                    <p>
                        <a href="#" class="btn btn-link"
                            >Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>
                    <p>
                        <a href="#" class="btn btn-link"
                            >Et magnam dolorum
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /COMPOUND PANEL -->
<!-- BASIC PANEL -->
<div class="panel panel-compound js-panel js-panel-[Unique ID] is-active" data-panel="[Unique ID]">
    <button class="panel__close js-close">
        <i class="fa fa-close"></i>
    </button>
    <div class="panel-compound__wrap">
        <div class="panel-compound__body">
            <div class="panel-compound__main">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse culpa cumque quos ducimus maiores explicabo voluptate, assumenda, mollitia rerum, neque excepturi eveniet harum sapiente repellendus non ullam animi reprehenderit fugit?</p>
                <p>Nesciunt modi, repellendus obcaecati porro expedita in, commodi temporibus illo cum, animi magnam minima omnis voluptatum. Veritatis corrupti, excepturi harum rem quo minima necessitatibus reprehenderit dignissimos ipsa, natus enim iure.</p>
                <p>Voluptatum modi non veritatis, nostrum obcaecati natus provident accusamus perspiciatis debitis et fuga consequuntur culpa explicabo cupiditate eligendi ex minus, quasi qui minima eius alias autem assumenda. Accusantium, a incidunt!</p>
            </div>
        </div>
    </div>
</div>
<!-- /BASIC PANEL -->

.panel {
  display: none;
  position: relative;
  padding: 4.8rem 2.4rem 2.4rem;
  background-color: $color-base-grey;
  margin: 0 0 1.6rem;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;

  &.is-active {
    display: block;
  }

  &.panel--white {
    background-color: $color-base-white;
  }
}

.panel__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  color: $color-base-blue;
  font-size: 2rem;
  border: 0;
}

/* Panel - Links Structure
 **************************/
.panel-links__container {
  display: flex;
  flex-direction: column;

  @media (min-width: $breakpoint-desktop) {
    flex-direction: row;
    margin-left: -2.4rem;

    > * {
      margin-left: 1.2rem;
    }
  }
}

.panel-links__block--main {
  flex: 2;
}

.panel-links__block--sidebar {
  flex: 1;
}

/* Panel - Informational Structure
 **********************************/
.panel-info-mobile {
  @media (min-width: $breakpoint-desktop) {
    display: none !important;
  }
}

.panel-info__container {
  margin: 0 0 2.4rem -3.2rem;

  @media (min-width: $breakpoint-desktop) {
    display: flex;
    flex-wrap: wrap;
  }

  > * {
    margin: 2.4rem 0 0 3.2rem;
  }
}

.panel-info__intro {
  margin-bottom: 1.2rem;
}

.panel-info__block {
  padding: 1.2rem;
  background-color: $color-base-white;

  &.panel-info__block--small {
    flex: 0 0 calc(25% - 3.2rem);
  }

  &.panel-info__block--large {
    flex: 0 0 calc(50% - 3.2rem);
  }
}

.panel-info__block-title {
  font-weight: bold;
}

/* Panel - Compound Structure
 **********************************/
.panel-compound__wrap {
  width: 83.3333%;
  margin: 0 auto;
}

.panel-compound__body {
  display: flex;
  flex-direction: column;

  @media (min-width: $breakpoint-tablet) {
    flex-direction: row;
  }
}

.panel-compound__main {
  flex: 1 0 66%;
  background-color: $color-blue-dark;
  color: $color-base-white;
  padding: 2rem;
}

.panel-compound__sidebar {
  flex: 1 0 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $color-base-white;
  padding: 2.4rem;
  text-align: center;
}