<div class="c-icon-grid" data-bkg-theme="base">
<div class="o-container">
<h2 id="icon-grid-1678" class="c-icon-grid__title f-title--h3">Amenities</h2>
<ul class="c-icon-grid__grid o-row" aria-labelledby="icon-grid-1678">
<li class="c-icon-grid__card o-col o-col-xs-6 o-col-sm-4">
<span class="c-icon-grid__card-icon" aria-hidden="true"><svg width="38" height="48" viewbox="0 0 38 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 16.0046H30.9993V38.4491C30.9993 42.6219 27.6165 46.0046 23.4437 46.0046H8.55556C4.38274 46.0046 1 42.6219 1 38.4491V16.0046Z" class="u-ct-stroke" stroke-width="2" />
<path d="M31 35.7883C34.3137 35.7883 37 33.102 37 29.7883C37 26.4746 34.3137 23.7883 31 23.7883" class="u-ct-stroke" stroke-width="2" />
<path d="M10.0856 10C8.63813 8.61454 8.63813 6.56346 10.0856 5.17957C10.5818 4.70366 11.1926 4.34365 11.1926 3.08978C11.1926 1.83591 10.5834 1.47591 10.0856 1" class="u-ct-stroke" stroke-width="2" />
<path d="M15.986 10C14.5385 8.61454 14.5385 6.56346 15.986 5.17957C16.4822 4.70366 17.093 4.34365 17.093 3.08978C17.093 1.83591 16.4838 1.47591 15.986 1" class="u-ct-stroke" stroke-width="2" />
<path d="M21.8942 10C20.4467 8.61454 20.4467 6.56346 21.8942 5.17957C22.3904 4.70366 23.0012 4.34365 23.0012 3.08978C23.0012 1.83591 22.392 1.47591 21.8942 1" class="u-ct-stroke" stroke-width="2" />
</svg>
</span>
<h3 class="c-icon-grid__card-title f-title--h6">Cafe</h3>
<p class="c-icon-grid__card-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis.</p>
<div class="c-icon-grid__card-links">
</div>
</li>
<li class="c-icon-grid__card o-col o-col-xs-6 o-col-sm-4">
<span class="c-icon-grid__card-icon" aria-hidden="true"><svg width="40" height="44" viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 10H33L38 43H2L7 10Z" class="u-ct-stroke" stroke-width="2" />
<path d="M13 17.6154V8.53846C13 4.37508 16.134 1 20 1C23.866 1 27 4.37508 27 8.53846V17.6154" class="u-ct-stroke" stroke-width="2" />
</svg>
</span>
<h3 class="c-icon-grid__card-title f-title--h6">Shop</h3>
<p class="c-icon-grid__card-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis.</p>
<div class="c-icon-grid__card-links">
</div>
</li>
<li class="c-icon-grid__card o-col o-col-xs-6 o-col-sm-4">
<span class="c-icon-grid__card-icon" aria-hidden="true"><svg width="68" height="41" viewBox="0 0 68 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M63.1006 39.584H4.89941C2.74902 39.584 1 37.8619 1 35.7446C1 34.1883 1.94189 32.7979 3.40088 32.1994L26.6333 22.0527C28.6021 21.245 30.0376 21.0128 30.4712 18.9575L30.6118 18.2941C30.9458 16.7234 32.3696 15.584 34 15.584C35.6304 15.584 37.0542 16.7234 37.3882 18.2941L37.5288 18.9575C37.9624 21.0128 39.3979 21.245 41.3667 22.0527L64.5991 32.1994C66.0581 32.7979 67 34.1883 67 35.7446C67 37.8619 65.251 39.584 63.1006 39.584Z" class="u-ct-stroke" stroke-width="2" />
<path d="M34.0996 15.5801V11.5028C37.4746 9.93601 38.5996 8.21287 38.5996 5.853C38.5996 3.49313 36.9188 1.58008 34.2493 1.58008C30.7246 1.58008 29.5996 4.19131 29.5996 6.28029" class="u-ct-stroke" stroke-width="2" />
</svg>
</span>
<h3 class="c-icon-grid__card-title f-title--h6">Coat Room</h3>
<p class="c-icon-grid__card-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis.</p>
<div class="c-icon-grid__card-links">
</div>
</li>
<li class="c-icon-grid__card o-col o-col-xs-6 o-col-sm-4">
<span class="c-icon-grid__card-icon" aria-hidden="true"><svg width="37" height="46" viewbox="0 0 37 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="29.2227" cy="4.5" r="3.5" class="u-ct-stroke" stroke-width="2" />
<circle cx="12.5" cy="33.5" r="11.5" class="u-ct-stroke" stroke-width="2" />
<path d="M22 28H35L30.5682 42" class="u-ct-stroke" stroke-width="2" />
<path d="M15.8574 22.3994L23.9361 12.2144L16.1016 6L12.9677 9.95088" class="u-ct-stroke" stroke-width="2" />
</svg>
</span>
<h3 class="c-icon-grid__card-title f-title--h6">Accessibility</h3>
<p class="c-icon-grid__card-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis.</p>
<div class="c-icon-grid__card-links">
<a href="#" class="c-icon-grid__cta f-text--tag o-btn--expanding-arrow">
<span class="c-icon-grid__cta-icon" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
<span class="u-sr-only">Read more about
Accessibility</span>
</a>
</div>
</li>
<li class="c-icon-grid__card o-col o-col-xs-6 o-col-sm-4">
<span class="c-icon-grid__card-icon" aria-hidden="true"><svg width="53" height="38" viewBox="0 0 53 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.5 30C24.6332 30 23 31.6332 23 33.5C23 35.3668 24.6332 37 26.5 37C28.3668 37 30 35.3668 30 33.5C30 31.6332 28.3668 30 26.5 30Z" class="u-ct-stroke" stroke-width="2" />
<path d="M18.5859 24.7566C20.7798 22.5825 23.5215 21.4961 26.5377 21.4961C29.5539 21.4961 32.2956 22.5831 34.4894 24.7566" class="u-ct-stroke" stroke-width="2" />
<path d="M1 11.5976C7.85483 4.80401 16.9035 1 26.5 1C36.0965 1 45.1452 4.80401 52 11.3256" class="u-ct-stroke" stroke-width="2" />
<path d="M44.8069 18.6086C39.8714 13.4455 33.2905 11 26.4357 11C19.5809 11 13 13.717 8.06445 18.608" class="u-ct-stroke" stroke-width="2" />
</svg>
</span>
<h3 class="c-icon-grid__card-title f-title--h6">Wifi</h3>
<p class="c-icon-grid__card-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis.</p>
<div class="c-icon-grid__card-links">
</div>
</li>
<li class="c-icon-grid__card o-col o-col-xs-6 o-col-sm-4">
<span class="c-icon-grid__card-icon" aria-hidden="true"><svg width="44" height="46" viewBox="0 0 44 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.6364 2L43 7.14286V44L29.6364 38.8571M29.6364 2V38.8571M29.6364 2L14.3636 7.14286M29.6364 38.8571L14.3636 44M14.3636 7.14286L1 2V38.8571L14.3636 44M14.3636 7.14286V44" class="u-ct-stroke" stroke-width="2" />
</svg>
</span>
<h3 class="c-icon-grid__card-title f-title--h6">Academy Map</h3>
<p class="c-icon-grid__card-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis.</p>
<div class="c-icon-grid__card-links">
<a href="" class="c-icon-grid__cta c-icon-grid__cta--download f-text--tag">
<span class="u-hover-drawline--thin">download english version</span>
<span class="c-icon-grid__cta-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M8 0L8 15" />
<path class="u-ct-stroke" d="M15 8L8 15L1 8" />
</svg>
</span>
</a>
<a href="#" class="c-icon-grid__cta c-icon-grid__cta--download f-text--tag">
<span class="u-hover-drawline--thin">download spanish version</span>
<span class="c-icon-grid__cta-icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M8 0L8 15" />
<path class="u-ct-stroke" d="M15 8L8 15L1 8" />
</svg>
</span>
</a>
</div>
</li>
</ul>
</div>
</div>
{% set panelColorTheme = panelColorTheme is defined ? panelColorTheme : 'base' %}
{% set hID = 'icon-grid-' ~ random(5000) %}
{% set idAttr = id is defined and id ? 'id="' ~ id ~ '"' : '' %}
<div {{ idAttr }} class="c-icon-grid" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container">
<h2 id="{{ hID }}" class="c-icon-grid__title f-title--h3">{{ title }}</h2>
<ul class="c-icon-grid__grid o-row" aria-labelledby="{{ hID }}">
{% for item in items %}
<li class="c-icon-grid__card o-col o-col-xs-6 o-col-sm-4">
<span class="c-icon-grid__card-icon" aria-hidden="true">{% include '03-icons/' ~ item.icon %}</span>
<h3 class="c-icon-grid__card-title f-title--h6">{{item.title}}</h3>
<p class="c-icon-grid__card-description f-text--small">{{item.description}}</p>
<div class="c-icon-grid__card-links">
{% if item.urlLink %}
<a href="{{item.urlLink}}" class="c-icon-grid__cta f-text--tag o-btn--expanding-arrow">
<span class="c-icon-grid__cta-icon" aria-hidden="true">{% include '03-icons/cta-expanding-arrow' %}</span>
<span class="u-sr-only">Read more about
{{item.title}}</span>
</a>
{% endif %}
{% if item.downloadLinks %}
{% for downloadLink in item.downloadLinks %}
<a href="{{ downloadLink.link }}" class="c-icon-grid__cta c-icon-grid__cta--download f-text--tag">
<span class="u-hover-drawline--thin">{{ downloadLink.title }}</span>
<span class="c-icon-grid__cta-icon" aria-hidden="true">{% include '03-icons/' ~ downloadLink.icon %}</span>
</a>
{% endfor %}
{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "Amenities",
"items": [
{
"title": "Cafe",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis.",
"icon": "mug"
},
{
"icon": "shopping-bag",
"title": "Shop",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis."
},
{
"icon": "hanger",
"title": "Coat Room",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis."
},
{
"icon": "Accessibility",
"title": "Accessibility",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis.",
"urlLink": "#"
},
{
"icon": "wifi",
"title": "Wifi",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis."
},
{
"icon": "map",
"title": "Academy Map",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor tellus. Nullam laoreet ex in egestas dignissim. Curabitur non mi nec justo semper finibus sit amet in turpis.",
"downloadLinks": [
{
"icon": "cta-arrow-down",
"title": "download english version",
"href": "#"
},
{
"icon": "cta-arrow-down",
"title": "download spanish version",
"link": "#"
}
]
}
]
}
.c-icon-grid {
margin: 6.4rem 0;
@include break($sm) {
margin: 8.2rem 0;
}
&[data-bkg-theme="light"] {
margin: 0;
padding: 6.4rem 0;
@include break($sm) {
margin: 0;
padding: 8.2rem 0;
}
}
}
.c-icon-grid__title {
margin-bottom: 4rem;
}
.c-icon-grid__card {
margin-bottom: 4rem;
&:last-child {
margin-bottom: 0;
}
}
.c-icon-grid__card-title {
margin: 1rem 0;
}
.c-icon-grid__card-description {
margin-bottom: 1.8rem;
}
.c-icon-grid__card-links {
margin-top: 2.8rem;
}
.c-icon-grid__cta {
display: flex;
align-items: center;
text-transform: uppercase;
margin-top: 1.6rem;
& + & {
margin-top: 1.8rem;
}
}
.c-icon-grid__cta--download {
.c-icon-grid__cta-icon {
padding-left: 1.2rem;
transition: transform 0.3s $ease-standard-cubic;
}
&:hover {
.c-icon-grid__cta-icon {
transform: translate3d(0, 0.2rem, 0)
}
}
}
No notes defined.