<div class="c-hero c-hero--full">
<div class="c-hero__top o-container">
<h1 class="c-hero__heading">[H1] Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery.</h1>
<div class="c-hero__uptitle">[H4] uptitle</div>
<div class="c-hero__caption">[H4] caption</div>
</div>
<div class="c-hero__bottom o-container">
<span class="c-arrow c-hero__button" role="presentation"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16">
<path d="M7 1v14m6-6l-6 6M1 9l6 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</div>
</div>
<div class="c-hero{% if variantModifier %} {{ variantModifier }}{% endif %}">
{%- if image %}
<style scoped>
.c-hero--with-image {
background-image: url('{{ image }}/320x580');
}
@media (min-width: 320px) {
.c-hero--with-image {
background-image: url('{{ image }}/640x640');
}
}
@media (min-width: 640px) {
.c-hero--with-image {
background-image: url('{{ image }}/800x600');
}
}
@media (min-width: 768px) {
.c-hero--with-image {
background-image: url('{{ image }}/1024x768');
}
}
@media (min-width: 1024px) {
.c-hero--with-image {
background-image: url('{{ image }}/1280x960');
}
}
@media (min-width: 1280px) {
.c-hero--with-image {
background-image: url('{{ image }}/1280x960');
}
}
</style>
{% endif -%}
<div class="c-hero__top o-container">
{% if title %}<h1 class="c-hero__heading">{{ heading }}</h1>
{% else %}<div class="c-hero__heading">{{ heading }}</div>{% endif %}
{% if uptitle %}
<div class="c-hero__uptitle">{{ uptitle }}</div>
{% endif %}
<div class="c-hero__caption">{{ caption }}</div>
</div>
{% if arrow -%}
<div class="c-hero__bottom o-container">
{% render '@arrow--down', { styleModifier: "c-hero__button" }, true %}
</div>
{%- endif %}
</div>
{
"uptitle": "[H4] uptitle",
"caption": "[H4] caption",
"heading": "[H1] Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery.",
"variantModifier": "c-hero--full",
"title": true,
"arrow": true
}
/* ======================================================================
# _components.hero.css
====================================================================== */
/* -----------------------------------
# Hero
----------------------------------- */
/***
* 1. Center vertically
*/
.c-hero {
--c-hero__nav-height: 6rem;
--c-hero__padding: 3rem;
@screen md {
--c-hero__padding: 4rem;
}
@screen lg {
--c-hero__padding: 5rem;
}
@screen xl {
--c-hero__padding: 6rem;
}
@screen 2xl {
--c-hero__padding: 7rem;
}
@apply
flex /* [1] */
items-center /* [1] */
flex-col
bg-cover
bg-center
bg-primary
;
padding-top: calc(var(--c-hero__nav-height) + var(--c-hero__padding));
padding-bottom: var(--c-hero__padding);
@media print {
padding-top: var(--c-hero__padding);
}
}
.c-hero--full {
@apply
min-h-screen
;
}
/***
* 2. If there's an image, an overlay is applied to darken it
*/
.c-hero--with-image {
@apply
relative /* [2] */
;
}
.c-hero--with-image::before {
content: "";
@apply
absolute
inset-0
bg-black
bg-opacity-50
z-10 /* [2] */
;
}
.c-hero--with-image > * {
@apply
relative
z-20 /* [2] */
;
}
/* -----------------------------------
# Container
----------------------------------- */
/***
* This is only used in the contained variants
*/
.c-hero__container {
@apply
flex
flex-col
;
}
/* -----------------------------------
# Top
----------------------------------- */
/***
* 1. Use the available space to push the button down
* 2. Center vertically
*/
.c-hero__top {
@apply
flex-grow /* [1] */
flex /* [2] */
flex-col /* [2] */
place-content-center /* [2] */
;
}
/* -----------------------------------
# Heading
----------------------------------- */
.c-hero__heading {
@extend %h1;
@apply
text-white
;
max-width: 25ch;
hyphens: auto;
}
@screen md {
.c-hero__heading {
hyphens: none;
}
}
/* -----------------------------------
# Caption
----------------------------------- */
.c-hero__caption {
@extend %h4;
order: -5;
@apply
mb-4
text-white
;
}
/* -----------------------------------
# Uptitle
----------------------------------- */
.c-hero__uptitle {
@extend %h4;
order: -10;
@apply
mb-1
text-white
;
}
/* -----------------------------------
# Buton
----------------------------------- */
.c-hero__button {
@extend .u-print-hidden;
@apply
mt-12
mx-auto;
}
@screen md {
.c-hero__button {
@apply
mx-0
;
}
}
No notes defined.