Exercise 3

Build the body text pattern

We need a pattern to print the body text found in the hero mockup. We are going to repeat the exact same steps as when we built the heading pattern.

1. Inside src/components/ create a new folder called body
2. Inside the body folder, create a new file called body.ui_patterns.yml
3. Copy the snippet below inside body.ui_patterns.yml (indentation is important)

Body Text Data

body.ui_patterns.yml

body:
  label: Body
  description: Body text
  fields:
    body:
      type: text
      label: Body
      description: Body content
      preview: Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  libraries:
    - body:
        css:
          component:
            body.css: {}

Body Text Markup

pattern-body.html.twig

<p class="body-text">
  {{ body }}
</p>

Body Text Styles

body.css

.body-text {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

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

  .body-text {
    font-size: 1.125rem;
    margin: 0 0 24px;
  }
}