<div class="detail-page-header detail-page-header--">
<div class="detail-page-header__wrapper">
<div class="detail-page-header__content">
<div class="header-base header-base--light">
<div class="header-base__title">
<h1 class="header-base__title-header"></h1>
</div>
</div>
</div>
<div class="detail-page-header__cta">
<div class="detail-page-header__cta-content">
<a class="detail-page-header__cta-link" href="">
<div class="detail-page-header__cta-icon">
<svg viewBox="0 0 37 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.25 43.4688C30.9844 43.4688 31.7188 42.8262 31.7188 42V15.5625H24.375C22.7227 15.5625 21.4375 14.2773 21.4375 12.625V5.28125H6.75C5.92383 5.28125 5.28125 6.01562 5.28125 6.75V42C5.28125 42.8262 5.92383 43.4688 6.75 43.4688H30.25ZM0.875 6.75C0.875 3.53711 3.44531 0.875 6.75 0.875H21.8965C23.457 0.875 24.9258 1.51758 26.0273 2.61914L34.3809 10.9727C35.4824 12.0742 36.125 13.543 36.125 15.1035V42C36.125 45.3047 33.4629 47.875 30.25 47.875H6.75C3.44531 47.875 0.875 45.3047 0.875 42V6.75Z" fill="white" />
</svg>
</div>
<div class="detail-page-header__cta-text">Browse All </div>
</a>
</div>
</div>
</div>
</div>
<div class="detail-page-header detail-page-header--{{ post.postType }}">
<div class="detail-page-header__wrapper">
<div class="detail-page-header__content">
{% include "templates/header-base/header-base.twig" with {
breadcrumbs: customBreadcrumbs,
post: post,
background: background
} %}
</div>
<div class="detail-page-header__cta">
<div class="detail-page-header__cta-content">
<a class="detail-page-header__cta-link" href="{{ post.parentUrl }}">
<div class="detail-page-header__cta-icon">{% include "partials/post-type-icon/post-type-icon.twig" with {postType: post.postType}%}</div>
<div class="detail-page-header__cta-text">Browse All {{ post.postTypePlural }}</div>
</a>
</div>
</div>
</div>
</div>
/* No context defined. */
.detail-page-header
--backgroundColorFocus sapphire
--backgroundColorActive darkSapphire
&--focus-area
--backgroundColor greenAppleDK3
&--practice
--backgroundColor aquaDk
&--case-study
&--news
&--press-release
--backgroundColor grape
&__content
fluid(padding-bottom, 40px, 62px)
fluid(padding-top, 28px, 80px)
&__cta
background var(--backgroundColor)
transition all ease-out 0.3s
&:hover
&:focus
background var(--backgroundColorFocus)
&:active
background var(--backgroundColorActive)
&__cta-link
display flex
align-items center
text-decoration none
&__cta-content
@extends $contentContainer
padding-top 7px
padding-bottom 7px
&__cta-icon
display flex
svg
height 16px
fill white
&__cta-text
color white
font-size 16px
font-weight 600
line-height 1.65em
padding-left 8px
text-transform capitalize
No notes defined.