Logo Grid
This component has browser resizing triggers which may affect the interactions in the embedded demo above. Open the
preview in a new tab
.
<div class="logo-grid js-logo-grid">
<div class="logo-grid__inner">
<div class="hidden-xs">
<div class="logo-grid__rows js-rows">
<!-- Desktop Row 1 -->
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Logo 1-1 -->
<a href="#" class="logo-grid__item js-open" data-target="1-1">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Logo 1-1 -->
<!-- Logo 1-2 -->
<a href="#" class="logo-grid__item js-open" data-target="1-2">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Logo 1-2 -->
<!-- Logo 1-3 -->
<a href="#" class="logo-grid__item js-open" data-target="1-3">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Logo 1-3 -->
</div>
<!-- Desktop Row Panels -->
<!-- Logo 1-1 Panel -->
<div class="logo-grid__panel js-panel" data-panel="1-1">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">1-1 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Logo 1-1 Panel -->
<!-- Logo 1-2 Panel -->
<div class="logo-grid__panel js-panel" data-panel="1-2">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">1-2 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum nulla facilis, voluptatem ea quam exercitationem sint tempore? Eligendi, tempore vel.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum nulla facilis, voluptatem ea quam exercitationem sint tempore? Eligendi, tempore vel.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum nulla facilis, voluptatem ea quam exercitationem sint tempore? Eligendi, tempore vel.</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Logo 1-2 Panel -->
<!-- Logo 1-3 Panel -->
<div class="logo-grid__panel js-panel" data-panel="1-3">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">1-3 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Logo 1-3 Panel -->
<!-- /Desktop Row Panels -->
</div>
<!-- /Desktop Row 1 -->
<!-- Desktop Row 2 -->
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Logo 2-1 -->
<a href="#" class="logo-grid__item js-open" data-target="2-1">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Logo 2-1 -->
<!-- Logo 2-2 -->
<a href="#" class="logo-grid__item js-open" data-target="2-2">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Logo 2-2 -->
<!-- Logo 2-3 -->
<a href="#" class="logo-grid__item js-open" data-target="2-3">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Logo 2-3 -->
</div>
<!-- Desktop Row Panels -->
<!-- Logo 2-1 Panel -->
<div class="logo-grid__panel js-panel" data-panel="2-1">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">2-1 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Logo 2-1 Panel -->
<!-- Logo 2-2 Panel -->
<div class="logo-grid__panel js-panel" data-panel="2-2">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">2-2 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Logo 2-2 Panel -->
<!-- Logo 2-3 Panel -->
<div class="logo-grid__panel js-panel" data-panel="2-3">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">2-3 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Logo 2-3 Panel -->
<!-- /Desktop Row Panels -->
</div>
<!-- /Desktop Row 2 -->
<!-- Desktop Row 3 -->
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Logo 3-1 -->
<a href="#" class="logo-grid__item js-open" data-target="3-1">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Logo 3-1 -->
<!-- Logo 3-2 -->
<a href="#" class="logo-grid__item js-open" data-target="3-2">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Logo 3-2 -->
<!-- Logo 3-3 -->
<a href="#" class="logo-grid__item js-open" data-target="3-3">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Logo 3-3 -->
</div>
<!-- Desktop Row Panels -->
<!-- Logo 3-1 Panel -->
<div class="logo-grid__panel js-panel" data-panel="3-1">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">3-1 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Logo 3-1 Panel -->
<!-- Logo 3-2 Panel -->
<div class="logo-grid__panel js-panel" data-panel="3-2">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">3-2 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Logo 3-2 Panel -->
<!-- Logo 3-3 Panel -->
<div class="logo-grid__panel js-panel" data-panel="3-3">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">3-3 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Logo 3-3 Panel -->
<!-- /Desktop Row Panels -->
</div>
<!-- /Desktop Row 3 -->
</div>
</div>
<!-- Mobile Rows -->
<div class="visible-xs-block">
<div class="logo-grid__rows js-rows">
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Mobile Logo 1-1 -->
<a href="#" class="logo-grid__item js-open" data-target="1-1">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Mobile Logo 1-1 -->
<!-- Mobile Logo 1-1 Panel -->
<div class="logo-grid__panel js-panel" data-panel="1-1">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">1-1 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Mobile Logo 1-1 Panel -->
</div>
</div>
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Mobile Logo 1-2 -->
<a href="#" class="logo-grid__item js-open" data-target="1-2">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Mobile Logo 1-2 -->
<!-- Mobile Logo 1-2 Panel -->
<div class="logo-grid__panel js-panel" data-panel="1-2">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">1-2 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum nulla facilis, voluptatem ea quam exercitationem sint tempore? Eligendi, tempore vel.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum nulla facilis, voluptatem ea quam exercitationem sint tempore? Eligendi, tempore vel.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum nulla facilis, voluptatem ea quam exercitationem sint tempore? Eligendi, tempore vel.</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Mobile Logo 1-2 Panel -->
</div>
</div>
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Mobile Logo 1-3 -->
<a href="#" class="logo-grid__item js-open" data-target="1-3">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Mobile Logo 1-3 -->
<!-- Mobile Logo 1-3 Panel -->
<div class="logo-grid__panel js-panel" data-panel="1-3">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">1-3 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Mobile Logo 1-3 Panel -->
</div>
</div>
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Mobile Logo 2-1 -->
<a href="#" class="logo-grid__item js-open" data-target="2-1">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Mobile Logo 2-1 -->
<!-- Mobile Logo 2-1 Panel -->
<div class="logo-grid__panel js-panel" data-panel="2-1">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">2-1 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Mobile Logo 2-1 Panel -->
</div>
</div>
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Mobile Logo 2-2 -->
<a href="#" class="logo-grid__item js-open" data-target="2-2">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Mobile Logo 2-2 -->
<!-- Mobile Logo 2-2 Panel -->
<div class="logo-grid__panel js-panel" data-panel="2-2">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">2-2 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Mobile Logo 2-2 Panel -->
</div>
</div>
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Mobile Logo 2-3 -->
<a href="#" class="logo-grid__item js-open" data-target="2-3">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Mobile Logo 2-3 -->
<!-- Mobile Logo 2-3 Panel -->
<div class="logo-grid__panel js-panel" data-panel="2-3">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">2-3 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Mobile Logo 2-3 Panel -->
</div>
</div>
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Mobile Logo 3-1 -->
<a href="#" class="logo-grid__item js-open" data-target="3-1">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Mobile Logo 3-1 -->
<!-- Mobile Logo 3-1 Panel -->
<div class="logo-grid__panel js-panel" data-panel="3-1">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">3-1 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Mobile Logo 3-1 Panel -->
</div>
</div>
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Mobile Logo 3-2 -->
<a href="#" class="logo-grid__item js-open" data-target="3-2">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Mobile Logo 3-2 -->
<!-- Mobile Logo 3-2 Panel -->
<div class="logo-grid__panel js-panel" data-panel="3-2">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">3-2 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Mobile Logo 3-2 Panel -->
</div>
</div>
<div class="logo-grid__row js-row">
<div class="logo-grid__group">
<!-- Mobile Logo 3-3 -->
<a href="#" class="logo-grid__item js-open" data-target="3-3">
<img src="https://via.placeholder.com/144x144" alt="" class="logo-grid__img" />
</a>
<!-- /Mobile Logo 3-3 -->
<!-- Mobile Logo 3-3 Panel -->
<div class="logo-grid__panel js-panel" data-panel="3-3">
<div class="logo-grid__panel-grid">
<a href="#" class="logo-grid-close js-close">
<i class="fa fa-close"></i>
</a>
<div class="logo-grid__panel-body">
<h3 class="logo-grid__title">3-3 Title Lorem ipsum dolor sit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente non odio optio, sunt aspernatur a quod molestiae animi in aliquam molestias nulla voluptatum quos repudiandae pariatur vitae amet est voluptatibus!</p>
</div>
<div class="logo-grid__panel-sidebar">
<a href="#" class="btn btn-primary">
Primary Action
<i class="fa fa-long-arrow-right"></i>
</a>
<a href="#" class="btn btn-link">
Secondary Action
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- /Mobile Logo 3-3 Panel -->
</div>
</div>
</div>
</div>
<!-- /Mobile Rows -->
</div>
</div>
.logo-grid {
margin-bottom: 4rem;
background-color: $color-base-grey;
}
.logo-grid__inner {
max-width: 1140px;
margin: 0 auto;
padding: 1.2rem;
@media (min-width: $breakpoint-desktop) {
padding: 3.2rem 0;
}
}
.logo-grid__item {
background-color: $color-base-white;
border-top: 0.4rem solid $color-grey-dark;
padding: 1.2rem;
margin-bottom: 2.4rem;
@media (min-width: $breakpoint-tablet) {
height: 17.2rem;
}
&:hover {
border-color: $color-blue-medium;
}
&.is-active {
border-top-color: $color-base-blue;
}
}
.logo-grid__group {
display: flex;
flex-wrap: wrap;
@media (min-width: $breakpoint-tablet) {
margin-left: -2.4rem;
}
> .logo-grid__item {
flex: 1 0 100%;
@media (min-width: $breakpoint-tablet) {
flex: 0 0 calc(33.3333% - 2.4rem);
max-width: calc(33.3333% - 2.4rem);
margin-left: 2.4rem;
}
}
}
.logo-grid__img {
display: block;
max-width: 100%;
height: auto;
max-height: 14.4rem;
margin: 0 auto;
}
.logo-grid__panel {
position: relative;
display: none;
padding-bottom: 2.4rem;
.logo-grid-close {
position: absolute;
top: 0.8rem;
right: 0.8rem;
color: $color-base-blue;
}
.logo-grid__panel-grid {
display: grid;
@media (min-width: $breakpoint-tablet) {
gap: 2.4rem;
grid-template-columns: 4fr 1fr;
}
}
}
.logo-grid__panel-body {
background-color: $color-blue-dark;
color: $color-base-white;
padding: 1.6rem 2.4rem;
}
.logo-grid__panel-sidebar {
background-color: $color-base-white;
padding: 2.4rem;
display: flex;
gap: 2.4rem;
flex-direction: column;
justify-content: center;
align-items: center;
}
.logo-grid__title {
@include typeSubheader(true);
}
$(function () {
$(".js-logo-grid").each(function () {
const $component = $(this);
const $cards = $component.find(".js-open");
const $close = $component.find(".js-close");
// Expand cards
$cards.on("click", function (e) {
e.preventDefault();
const $activeCard = $(this);
const $target = $component.find("[data-panel=" + e.currentTarget.dataset.target + "]");
const $row = $activeCard.closest(".js-row");
if ($target.length && !$activeCard.hasClass("is-active")) {
$activeCard.addClass("is-active");
$target.slideDown();
// Close other panels in row
$row.find(".js-panel").not($target).find(".js-close").click();
}
});
// Collapse card panels
$close.on("click", function (e) {
e.preventDefault();
const panel = $(this).closest(".js-panel").data("panel");
$component.find("[data-target=" + panel + "]").removeClass("is-active");
$(this).closest(".js-panel").slideUp();
});
// Listen for resize events to close any open panels
var resizeTimeout;
window.addEventListener(
"resize",
function (event) {
if (resizeTimeout) {
window.cancelAnimationFrame(resizeTimeout);
}
resizeTimeout = window.requestAnimationFrame(function () {
$close.click();
});
},
false
);
});
});