Exercise 4

Build button pattern

The same way we built the heading pattern we are going to build a button pattern. The only difference between the heading and the button patterns is that the button has two fields, text and url.

Let's use the same steps as we did for the heading pattern using the code below.

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

Button Data

button.ui_patterns.yml

button:
  label: Button
  description: A button.
  fields:
    text:
      type: string
      label: Text
      preview: Read more
    url:
      type: string
      label: URL
      preview: https://mediacurrent.com
  libraries:
    - button:
        css:
          component:
            button.css: {}

Button Markup

pattern-button.html.twig

<div class="button">
  {{ link(text, url) }}
</div>

Button Styles

button.css

.button a {
  color: #fff;
  background-color: #1469a3;
  border-radius: 6px;
  display: inline-block;
  font-size: 1.25rem;
  font-weight: bold;
  margin: 12px 0;
  padding: 8px 24px;
  text-decoration: none;
  transition: background-color 250ms ease-in;
}

.button a:focus,
.button a:hover {
  color: #fff;
  background-color: #0086e0;
}