<div class="faq">
<div class="faq__header">
<div class="container pt-8">
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol class="breadcrumb__list">
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link">Home</a>
</li>
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link" aria-current="page">Help Center</a>
</li>
</ol>
</nav>
<div class="row align-items-center justify-content-between">
<div class="col-12 col-md-8 col-lg-7 col-xl-5 pb-40">
<h1>Help Center</h1>
<h2 class="h3-style fw-400">Looking for answers? Read on for helpful information and our frequently asked questions regarding our services.</h2>
<div class="input-group my-20">
<label id="help-center-search-label" for="help-center-search" class="input-group__label sr-only">Search our help center topics</label>
<input id="help-center-search" type="search" class="input-group__input" placeholder="Search help center topics by keyword(s)..." required />
<button type="submit" class="input-group__submit" aria-label="Search" aria-describedby="#help-center-search-label">
<i class="fas fa-fw fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="faq__content mt-n32 pb-32">
<div class="container">
<div role="list" class="faq-grid">
<div role="listitem" class="faq-topic">
<a class="faq-topic__inner" href="../../#.html">
<div class="faq-topic__content">
<i class="faq-topic__icon icon fas fa-fw fa-truck-moving c-gray" aria-hidden="true"></i>
<h3 class="faq-topic__title">Delivery</h3>
<h4 class="faq-topic__subtitle">Learn more about our Platinum Delivery Service™, costs, timeframes, process and more.</h4>
<span class="faq-topic__readmore">View <i class="icon fas fa-xs fa-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
<div role="listitem" class="faq-topic">
<a class="faq-topic__inner" href="../../#.html">
<div class="faq-topic__content">
<i class="faq-topic__icon icon fas fa-fw fa-truck-couch c-gray" aria-hidden="true"></i>
<h3 class="faq-topic__title">Track Your Order</h3>
<h4 class="faq-topic__subtitle">View your delivery window after 1:30PM the day before your purchase is scheduled to be delivered.</h4>
<span class="faq-topic__readmore">View <i class="icon fas fa-xs fa-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
<div role="listitem" class="faq-topic">
<a class="faq-topic__inner" href="../../#.html">
<div class="faq-topic__content">
<i class="faq-topic__icon icon fas fa-fw fa-dolly c-gray" aria-hidden="true"></i>
<h3 class="faq-topic__title">Pick Up</h3>
<h4 class="faq-topic__subtitle">Learn more about self pick up, locations, timeframes, process and more.</h4>
<span class="faq-topic__readmore">View <i class="icon fas fa-xs fa-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
<div role="listitem" class="faq-topic">
<a class="faq-topic__inner" href="../../#.html">
<div class="faq-topic__content">
<i class="faq-topic__icon icon fas fa-fw fa-box c-gray" aria-hidden="true"></i>
<h3 class="faq-topic__title">Returns</h3>
<h4 class="faq-topic__subtitle">Learn more about returns, cancellations, exchanges, damaged items and more.</h4>
<span class="faq-topic__readmore">View <i class="icon fas fa-xs fa-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
<div role="listitem" class="faq-topic">
<a class="faq-topic__inner" href="../../#.html">
<div class="faq-topic__content">
<i class="faq-topic__icon icon fas fa-fw fa-certificate c-gray" aria-hidden="true"></i>
<h3 class="faq-topic__title">Warranty</h3>
<h4 class="faq-topic__subtitle">Learn more about furniture warranties, tv warranties, manufacture warranties and more.</h4>
<span class="faq-topic__readmore">View <i class="icon fas fa-xs fa-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
<div role="listitem" class="faq-topic">
<a class="faq-topic__inner" href="../../#.html">
<div class="faq-topic__content">
<i class="faq-topic__icon icon fas fa-fw fa-credit-card c-gray" aria-hidden="true"></i>
<h3 class="faq-topic__title">Gift Cards</h3>
<h4 class="faq-topic__subtitle">Learn more about gift cards and terms of use.</h4>
<span class="faq-topic__readmore">View <i class="icon fas fa-xs fa-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
<div role="listitem" class="faq-topic">
<a class="faq-topic__inner" href="../../#.html">
<div class="faq-topic__content">
<i class="faq-topic__icon icon fas fa-fw fa-gift c-gray" aria-hidden="true"></i>
<h3 class="faq-topic__title">Registry</h3>
<h4 class="faq-topic__subtitle">Learn more about our registry program.</h4>
<span class="faq-topic__readmore">View <i class="icon fas fa-xs fa-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
<div role="listitem" class="faq-topic">
<a class="faq-topic__inner" href="../../#.html">
<div class="faq-topic__content">
<i class="faq-topic__icon icon fas fa-fw fa-file-invoice-dollar c-gray" aria-hidden="true"></i>
<h3 class="faq-topic__title">Financing</h3>
<h4 class="faq-topic__subtitle">Learn more about financing, application process, terms and rules.</h4>
<span class="faq-topic__readmore">View <i class="icon fas fa-xs fa-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
<div role="listitem" class="faq-topic">
<a class="faq-topic__inner" href="../../#.html">
<div class="faq-topic__content">
<i class="faq-topic__icon icon fas fa-fw fa-vacuum c-gray" aria-hidden="true"></i>
<h3 class="faq-topic__title">Furniture Care</h3>
<h4 class="faq-topic__subtitle">Learn more about care for wood, leather, upholstered furniture and more.</h4>
<span class="faq-topic__readmore">View <i class="icon fas fa-xs fa-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="faq">
<div class="faq__header">
<div class="container pt-8">
{% render '@breadcrumb', breadcrumb, true %}
<div class="row align-items-center justify-content-between">
<div class="col-12 col-md-8 col-lg-7 col-xl-5 pb-40">
<h1>Help Center</h1>
<h2 class="h3-style fw-400">Looking for answers? Read on for helpful information and our frequently asked questions regarding our services.</h2>
<div class="input-group my-20">
<label id="help-center-search-label" for="help-center-search" class="input-group__label sr-only">Search our help center topics</label>
<input id="help-center-search" type="search" class="input-group__input" placeholder="Search help center topics by keyword(s)..." required/>
<button type="submit" class="input-group__submit" aria-label="Search" aria-describedby="#help-center-search-label">
<i class="fas fa-fw fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="faq__content mt-n32 pb-32">
<div class="container">
<div role="list" class="faq-grid">
{% for topic in topics %}
<div role="listitem" class="faq-topic">
<a class="faq-topic__inner" href="{{topic.href|path}}">
<div class="faq-topic__content">
{% if topic.icon %}
<i class="faq-topic__icon icon fas fa-fw fa-{{topic.icon}} c-gray" aria-hidden="true"></i>
{% endif %}
<h3 class="faq-topic__title">{{topic.title|safe}}</h3>
<h4 class="faq-topic__subtitle">{{topic.subtitle|safe}}</h4>
<span class="faq-topic__readmore">View <i class="icon fas fa-xs fa-chevron-right" aria-hidden="true"></i>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{
"breadcrumb": {
"links": [
{
"href": "#",
"text": "Home"
},
{
"href": "#",
"text": "Help Center"
}
]
},
"topics": [
{
"href": "#",
"icon": "truck-moving",
"title": "Delivery",
"subtitle": "Learn more about our Platinum Delivery Service™, costs, timeframes, process and more."
},
{
"href": "#",
"icon": "truck-couch",
"title": "Track Your Order",
"subtitle": "View your delivery window after 1:30PM the day before your purchase is scheduled to be delivered."
},
{
"href": "#",
"icon": "dolly",
"title": "Pick Up",
"subtitle": "Learn more about self pick up, locations, timeframes, process and more."
},
{
"href": "#",
"icon": "box",
"title": "Returns",
"subtitle": "Learn more about returns, cancellations, exchanges, damaged items and more."
},
{
"href": "#",
"icon": "certificate",
"title": "Warranty",
"subtitle": "Learn more about furniture warranties, tv warranties, manufacture warranties and more."
},
{
"href": "#",
"icon": "credit-card",
"title": "Gift Cards",
"subtitle": "Learn more about gift cards and terms of use."
},
{
"href": "#",
"icon": "gift",
"title": "Registry",
"subtitle": "Learn more about our registry program."
},
{
"href": "#",
"icon": "file-invoice-dollar",
"title": "Financing",
"subtitle": "Learn more about financing, application process, terms and rules."
},
{
"href": "#",
"icon": "vacuum",
"title": "Furniture Care",
"subtitle": "Learn more about care for wood, leather, upholstered furniture and more."
}
]
}
.faq {
$this: &;
&__header {
background: $color-sky-lighter;
position: relative;
z-index: 0;
}
&__content {
position: relative;
z-index: 1;
&__link {
line-height: 1;
// display: flex;
color: $color-primary-text;
text-decoration: none;
// padding-left: rem(32px);
&:hover,
&:focus {
color: $color-primary-red;
}
}
}
&__wysiwyg {
line-height: 1.45;
margin-block: rem(16px);
@include media-lg-up {
padding-right: rem(160px);
}
ul,
ol {
list-style: unset;
padding-left: rem(20px);
}
}
.accordion {
margin-bottom: rem(12px);
&__inner {}
&__item {
border-bottom: rem(1px) dashed $color-sky;
&__header {
background: none;
border-radius: 0;
color: $color-primary-blue;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 0 rem(8px);
h4 {
color: $color-primary-blue;
font-size: rem(18px);
font-weight: 600;
}
.icon {
color: $color-primary-blue;
position: relative;
transform: none;
top: unset;
right: unset;
margin-right: rem(8px);
}
&:hover,
&:focus,
&[aria-expanded=true] {
color: $color-primary-red;
h4,
.icon {
color: $color-primary-red;
}
}
&[aria-expanded=true] .icon {
transform: rotate(-180deg) translateY(2px);
}
}
&__content {
border: none;
font-size: rem(17px);
line-height: 1.45;
@include media-md-up {
padding-right: rem(80px);
}
@include media-xl-up {
padding-right: rem(160px);
}
}
}
& + #{$this}__heading,
& + #{$this}__wysiwyg {
margin-top: rem(32px);
}
}
}
.faq-grid {
$this: &;
display: flex;
flex-flow: row wrap;
align-items: stretch;
justify-content: center;
gap: rem(8px);
margin-block: rem(16px);
@include media-lg-up {
gap: rem(16px);
}
}
.faq-topic {
$this: &;
background: $color-white;
border: rem(1px) solid $color-gray-light;
border-radius: rem(8px);
box-shadow: 0 rem(-16px) rem(16px) rgba($color-black, .03);
flex: 1 1 auto;
position: relative;
top: 0;
transition: top 250ms ease-in-out;
@include media-md-up {
flex: 0 0 calc(50% - #{rem(11px)});
}
@include media-lg-up {
flex: 0 0 calc(33.337% - #{rem(11px)});
}
&__inner {
color: $color-primary-text;
display: flex;
flex-direction: column;
align-items: flex-start;
text-decoration: none;
height: 100%;
&:visited,
&:active {
color: $color-primary-text;
}
}
&__image {
border-radius: rem(6px);
flex: 0 0 auto;
overflow: hidden;
img {
display: block;
margin: 0;
padding: 0;
object-fit: cover;
}
}
&__content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
flex: 1 1 auto;
padding: rem(24px) rem(32px) rem(16px) rem(16px);
@include media-lg-up {
padding: rem(24px) rem(64px) rem(16px) rem(16px);
}
}
&__icon {
font-size: rem(36px);
margin: 0 rem(12px) rem(8px) 0;
padding: 0;
position: relative;
top: rem(3px);
transition: color 250ms linear;
}
&__title {
margin: 0;
padding: 0;
transition: color 250ms linear;
}
&__subtitle {
margin: 0 0 rem(8px) 0;
padding: 0;
position: relative;
}
&__readmore {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: auto;
padding-top: rem(16px);
position: relative;
width: 100%;
.icon {
position: relative;
top: rem(.75px);
}
&:before {
content: '';
display: block;
width: 100%;
height: rem(3px);
background: $color-primary-red;
position: absolute;
top: rem(-2px);
}
}
&:hover,
&:focus {
.icon,
#{$this}__title {
color: $color-primary-red;
transition: color 250ms linear;
}
}
}
No notes defined.