<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">Help Center</a>
                    </li>
                    <li class="breadcrumb__item">
                        <a href="#" class="breadcrumb__link" aria-current="page">Search Results</a>
                    </li>
                </ol>
            </nav>

            <div class="row justify-content-between">
                <div class="col-12 col-md-8 col-lg-7 col-xl-5 pb-40">
                    <h1>Help Center - Search Results</h1>
                    <h2 class="h3-style">7 result(s) matching keywords: delivery, foo, bar, baz</h2>
                    <div class="input-group mt-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 autocomplete="off" />
                        <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 py-32">
        <div class="container">

            <h3 class="h4-style">Delivery and 1 more result(s)</h3>
            <div class="faq">

                <div class="accordion accordion--faq">
                    <div class="accordion__inner">
                        <div class="accordion__item">
                            <div role="button" id="faq-item-question-1" class="accordion__item__header" aria-controls="faq-item-answer-1" aria-expanded="false" tabindex="0">
                                <i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
                                <h4>Why does AFW charge for delivery?</h4>
                            </div>
                            <div id="faq-item-answer-1" class="accordion__item__content" aria-labelledby="faq-item-question-1" style="display:none;">
                                <mark>Delivery</mark> is really never &ldquo;free.&rdquo; Trucks, drivers, fuel, insurance and maintenance all cost money. Free delivery means the delivery costs have been added to the price.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="accordion accordion--faq">
                    <div class="accordion__inner">
                        <div class="accordion__item">
                            <div role="button" id="faq-item-question-2" class="accordion__item__header" aria-controls="faq-item-answer-2" aria-expanded="false" tabindex="0">
                                <i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
                                <h4>What does the delivery charge include?</h4>
                            </div>
                            <div id="faq-item-answer-2" class="accordion__item__content" aria-labelledby="faq-item-question-2" style="display:none;">
                                Our Platinum <mark>Delivery</mark> service is the best in the business. Your furniture is unpacked, inspected, hardware and handles installed and all packing materials are recycled. Your furniture is placed in your home where right where you want it. There are no surprise charges for extra services like a flight of stairs.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="accordion accordion--faq">
                    <div class="accordion__inner">
                        <div class="accordion__item">
                            <div role="button" id="faq-item-question-3" class="accordion__item__header" aria-controls="faq-item-answer-3" aria-expanded="false" tabindex="0">
                                <i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
                                <h4>How much are your delivery charges?</h4>
                            </div>
                            <div id="faq-item-answer-3" class="accordion__item__content" aria-labelledby="faq-item-question-3" style="display:none;">
                                <mark>Delivery</mark> charges are determined by your zip code and the amount of your order and will show in your shopping cart. If you aren&rsquo;t logged in, you can get an estimate on the checkout screen.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="accordion accordion--faq">
                    <div class="accordion__inner">
                        <div class="accordion__item">
                            <div role="button" id="faq-item-question-4" class="accordion__item__header" aria-controls="faq-item-answer-4" aria-expanded="false" tabindex="0">
                                <i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
                                <h4>Something came up and I can&rsquo;t be home during my assigned window. Can I change my delivery window after I receive it?</h4>
                            </div>
                            <div id="faq-item-answer-4" class="accordion__item__content" aria-labelledby="faq-item-question-4" style="display:none;">
                                No. When you receive your <mark>delivery</mark> window, your order is already loaded on the truck and your stop is scheduled. The trucks are loaded in the order of the assigned delivery windows. If you need to change your scheduled delivery day, you must contact us before 10:00 am the day before your scheduled delivery. A $45 cancellation fee will be charged on cancellations made after 10:00 am on the day before your scheduled delivery and your delivery will need to be rescheduled.
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="hr">
                <hr />
            </div>

            <h3 class="h4-style">Pick Up and 0 more result(s)</h3>
            <div class="faq">

                <div class="accordion accordion--faq">
                    <div class="accordion__inner">
                        <div class="accordion__item">
                            <div role="button" id="faq-item-question-1" class="accordion__item__header" aria-controls="faq-item-answer-1" aria-expanded="false" tabindex="0">
                                <i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
                                <h4>Why does AFW charge for delivery?</h4>
                            </div>
                            <div id="faq-item-answer-1" class="accordion__item__content" aria-labelledby="faq-item-question-1" style="display:none;">
                                <mark>Delivery</mark> is really never &ldquo;free.&rdquo; Trucks, drivers, fuel, insurance and maintenance all cost money. Free delivery means the delivery costs have been added to the price.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="accordion accordion--faq">
                    <div class="accordion__inner">
                        <div class="accordion__item">
                            <div role="button" id="faq-item-question-2" class="accordion__item__header" aria-controls="faq-item-answer-2" aria-expanded="false" tabindex="0">
                                <i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
                                <h4>What does the delivery charge include?</h4>
                            </div>
                            <div id="faq-item-answer-2" class="accordion__item__content" aria-labelledby="faq-item-question-2" style="display:none;">
                                Our Platinum <mark>Delivery</mark> service is the best in the business. Your furniture is unpacked, inspected, hardware and handles installed and all packing materials are recycled. Your furniture is placed in your home where right where you want it. There are no surprise charges for extra services like a flight of stairs.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="accordion accordion--faq">
                    <div class="accordion__inner">
                        <div class="accordion__item">
                            <div role="button" id="faq-item-question-3" class="accordion__item__header" aria-controls="faq-item-answer-3" aria-expanded="false" tabindex="0">
                                <i class="icon fas fa-xs fa-chevron-down" aria-hidden="true"></i>
                                <h4>How much are your delivery charges?</h4>
                            </div>
                            <div id="faq-item-answer-3" class="accordion__item__content" aria-labelledby="faq-item-question-3" style="display:none;">
                                <mark>Delivery</mark> charges are determined by your zip code and the amount of your order and will show in your shopping cart. If you aren&rsquo;t logged in, you can get an estimate on the checkout screen.
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
<div class="faq">
	<div class="faq__header">
		<div class="container pt-8">
			{% render '@breadcrumb', breadcrumb, true %}
			<div class="row justify-content-between">
				<div class="col-12 col-md-8 col-lg-7 col-xl-5 pb-40">
					<h1>Help Center - Search Results</h1>
					<h2 class="h3-style">7 result(s) matching keywords: {% for word in keywords %}{{ word }}{% if not loop.last %}, {% endif %}{% endfor %}</h2>
					<div class="input-group mt-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 autocomplete="off"/>
						<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 py-32">
		<div class="container">
			{% for topic in results %}
				{% set size=topic.items|length %}
				{% set sizeRemainder=((topic.items|length) - 3)%}
				<h3 class="h4-style">{{ topic.topic }} and {{ sizeRemainder }} more result(s)</h3>
				{% render '@faq-list', topic %}
				{# {% for item in topic.items %}
				<a class="faq__content__link" href="/help-center#faq-question-{{loop.index}}">
					<h4 class="mb-0">{{ item.question|safe }}</h4>
					<p>{{ item.answer|safe|truncate(100, true, '...') }}</p>
				</a>
				{% endfor %} #}
				{% if not loop.last %}
				<div class="hr"><hr/></div>
				{% endif %}
			{% endfor %}
		</div>
	</div>
</div>
{
  "breadcrumb": {
    "links": [
      {
        "href": "#",
        "text": "Home"
      },
      {
        "href": "#",
        "text": "Help Center"
      },
      {
        "href": "#",
        "text": "Search Results"
      }
    ]
  },
  "topics": [
    {
      "href": "#",
      "icon": "truck-moving",
      "title": "Delivery",
      "subtitle": "Learn more about our Platinum Delivery Service&trade;, 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."
    }
  ],
  "keywords": [
    "delivery",
    "foo",
    "bar",
    "baz"
  ],
  "results": [
    {
      "topic": "Delivery",
      "items": [
        {
          "type": "question",
          "question": "Why does AFW charge for delivery?",
          "answer": "<mark>Delivery</mark> is really never &ldquo;free.&rdquo; Trucks, drivers, fuel, insurance and maintenance all cost money. Free delivery means the delivery costs have been added to the price."
        },
        {
          "type": "question",
          "question": "What does the delivery charge include?",
          "answer": "Our Platinum <mark>Delivery</mark> service is the best in the business. Your furniture is unpacked, inspected, hardware and handles installed and all packing materials are recycled. Your furniture is placed in your home where right where you want it. There are no surprise charges for extra services like a flight of stairs."
        },
        {
          "type": "question",
          "question": "How much are your delivery charges?",
          "answer": "<mark>Delivery</mark> charges are determined by your zip code and the amount of your order and will show in your shopping cart. If you aren&rsquo;t logged in, you can get an estimate on the checkout screen."
        },
        {
          "type": "question",
          "question": "Something came up and I can&rsquo;t be home during my assigned window. Can I change my delivery window after I receive it?",
          "answer": "No. When you receive your <mark>delivery</mark> window, your order is already loaded on the truck and your stop is scheduled. The trucks are loaded in the order of the assigned delivery windows. If you need to change your scheduled delivery day, you must contact us before 10:00 am the day before your scheduled delivery. A $45 cancellation fee will be charged on cancellations made after 10:00 am on the day before your scheduled delivery and your delivery will need to be rescheduled."
        }
      ]
    },
    {
      "topic": "Pick Up",
      "items": [
        {
          "type": "question",
          "question": "Why does AFW charge for delivery?",
          "answer": "<mark>Delivery</mark> is really never &ldquo;free.&rdquo; Trucks, drivers, fuel, insurance and maintenance all cost money. Free delivery means the delivery costs have been added to the price."
        },
        {
          "type": "question",
          "question": "What does the delivery charge include?",
          "answer": "Our Platinum <mark>Delivery</mark> service is the best in the business. Your furniture is unpacked, inspected, hardware and handles installed and all packing materials are recycled. Your furniture is placed in your home where right where you want it. There are no surprise charges for extra services like a flight of stairs."
        },
        {
          "type": "question",
          "question": "How much are your delivery charges?",
          "answer": "<mark>Delivery</mark> charges are determined by your zip code and the amount of your order and will show in your shopping cart. If you aren&rsquo;t logged in, you can get an estimate on the checkout screen."
        }
      ]
    }
  ]
}
  • Content:
    .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;
    		}
    	}
    }
    
  • URL: /components/raw/help-center/help-center.scss
  • Filesystem Path: source/patterns/templates/help-center/help-center.scss
  • Size: 4.3 KB

No notes defined.