Exercise 7

Building the Hero pattern

Using the same process when we built the heading pattern, we are going to build the hero pattern which is different than the heading pattern in that it has multiple fields.

1. Hero Data

1. In src/components/ create a new folder called hero
2. Inside the hero folder create a new file called hero.ui_patterns.yml
3. Paste the snippet below inside the new file

hero:
  label: Hero
  description: A simple hero pattern
  fields:
    heading:
      type: text
      label: Hero heading
      description: hero text
      preview:
        type: pattern_preview
        id: heading
    eyebrow:
      type: text
      label: Hero eyebrow
      description: hero eyebrow
      preview:
        type: pattern_preview
        id: eyebrow
    body:
      type: text
      label: Hero body
      description: Hero body text
      preview:
        type: pattern_preview
        id: body
    image:
      type: render
      label: Image
      description: Hero image
      preview:
        type: pattern_preview
        id: image
        width: 960
        attributes: {alt: "Person surfing on wave"}
    button:
      label: Button
      description: Hero button
      preview:
        type: pattern_preview
        id: button
  libraries:
    - hero:
        css:
          component:
            hero.css: {}

2. Hero Markup

1. Inside the hero folder create a new file called pattern-hero.html.twig
2. Paste the snippet below into the new file

<section class="hero">
  <div class="hero__image">
    {{ image }}
  </div>
  <div class="hero__content">
    {{ eyebrow }}
    {{ heading }}
    {{ body }}
    {{ button }}
  </div>
</section>

Hero Styles

hero.css

.hero {
  display: flex;
  padding: 30px 1px;
  position: relative;
}

.hero__image {
  box-shadow: 5px 5px 10px 0px #999;
  margin-left: -100%;
  order: 1;
  overflow: hidden;
  padding-top: 50%;
  position: relative;
  width: 100%;
}

.hero__image::before {
  background: linear-gradient(to right, rgba(255,255,255,1) 35%,rgba(255,255,255,.50) 75%,transparent 100%);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.hero__image img {
  display: block;
  height: 100%;
  opacity: 0.6;
  right: 0;
  max-width: none;
  position: absolute;
  top: 0;
  width: auto;
  z-index: 0;
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  order: 0;
  padding: 15px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.hero__content .eyebrow,
.hero__content .heading,
.hero__content .body-text,
.hero__content .button {
  margin-left: 5px;
}

.hero__content .eyebrow {
  margin: 0 0 30px;
}

@media screen and (min-width: 768px) {

  .hero__image {
    margin-left: -50%;
  }

  .hero__image img {
    opacity: 1;
  }

  .hero__content {
    padding: 15px 0;
    width: 50%;
  }
}