Hero
The hero is made up of two reusable components:
This component also has multiple variations. Here's how someone would go about adding or removing a variation.
- Create a new SCSS stylesheet. (You can copy
hero-blue.scss
and use that as a starting point.) - Add a modifier that references the stylesheet to the
hero.scss
KSS modifiers list. - In your new stylesheet reference use
hero-[whatever color name you picked]
as the selector. - If you are adding a new layout option use
hero-box-[whatever layout name you picked]
instead. - At this point you should be able to modify your new color stylesheet and see it working in the style guide.
Now time to tie it into Drupal.
- Create a new library for your variant stylesheet. (Take a look at
hero-blue
for an example.) - Make sure that library depends on
h4h_theme/hero
. This ensures the base css is added. - Update the hero and hero with video paragraph style or layout field to add in your new option.
Deleting a unused style.
- Delete the SCSS stylesheet.
- Delete the Drupal library.
- Delete the value from the style or layout field on the paragraph.
.hero--video
If the hero image is a video, overlay a play button over the image.
.hero--no-image
If the image field is empty.
.kss-donate
Fake form to demonstrate the hero with a donate form.
.kss-donate.hero--no-image
Fake form to demonstrate the hero with a donate form, but with no image.
.hero-blue.scss
Blue color variation (Default).
.hero-dark-blue.scss
Dark blue color variation.
.hero-dark.scss
Dark color variation.
.hero-green.scss
Green color variation.
.hero-light.scss
Light color variation.
.hero-orange.scss
Orange color variation.
.hero-red.scss
Red color variation.
.hero-box-right.scss
Box right aligned variation (Default).
.hero-box-right-wide.scss
Box right aligned wide variation.
.hero-box-left.scss
Box left aligned variation.
.hero-box-left-wide.scss
Box left aligned wide variation.
.hero-box-top.scss
Box top aligned variation.
.hero-box-bottom.scss
Box bottom aligned variation.
.hero-box-side-left.scss
Box left side variation.
.hero-box-side-right.scss
Box right side variation.
{#
Note: We're extending `hero-vars` here because that's the only way we
can break out some of the code that's needed to make the
KSS modifications work.
#}
{% extends "@h4h_theme/hero/hero-vars.twig" %}
{% block component %}
{#
Dynamically attach the correct libraries.
Also note that we never attach the `hero` library which contains the
base hero styles. We always attach a color and layout variation
i.e. `hero-blue` which will make sure the `hero` library is added
as a dependency.
#}
{{ attach_library('h4h_theme/hero-' ~ style|default('blue')) }}
{{ attach_library('h4h_theme/hero-' ~ layout|default('box-right')) }}
{#
We want all classes to be prefixed with 'hero'.
Provide a default just in case.
#}
{% set style = 'hero-' ~ style|default('blue') %}
{% set layout = 'hero-' ~ layout|default('box-right') %}
<article class="hero {{ style }} {{ layout }} {{ modifier_class }}">
{# If there's a video the image is used as a placeholder. #}
{% if video %}
{%
include "@h4h_theme/video/video.twig" with {
video: video,
img: img
} only
%}
{% endif %}
{# If there's no video but there IS an image. #}
{% if not video and img %}
<div class="hero__img {{ style }}__img {{ layout }}__img">
{% if url %}
<a class="hero__img-link {{ style }}__img-link {{ layout }}__img-link" href="{{ url }}">{{ img }}</a>
{% else %}
{{ img }}
{% endif %}
</div>
{% endif %}
<div class="hero__content {{ style }}__content {{ layout }}__content">
<div class="hero__content-background {{ style }}__content-background {{ layout }}__content-background"></div>
<div class="hero__content-inner {{ style }}__content-inner {{ layout }}__content-inner">
{% if title %}
<h{{ heading_level }} class="hero__heading {{ style }}__heading {{ layout }}__heading">
{% if url %}
<a class="hero__link {{ style }}__link {{ layout }}__link" href="{{ url }}">{{ title }}</a>
{% else %}
{{ title }}
{% endif %}
</h{{ heading_level }}>
{% endif %}
{% if desc %}
<h{{ heading_level + 1 }} class="hero__desc {{ style }}__desc {{ layout }}__desc">{{ desc }}</h{{ heading_level + 1 }}>
{% endif %}
{# There can either be a donation form OR a call to action button. #}
{% if donate_form %}
{{ donate_form }}
{% elseif btn_text %}
<a href="{{ url }}" class="hero__btn {{ style }}__btn {{ layout }}__btn btn btn--primary">{{ btn_text }}</a>
{% endif %}
</div>
</div>
</article>
{% endblock %}