Heading with Button

‹ Back

Line buttons up next to a heading with the following markup:

Projects

<div class="heading-with-button">
  <div class="heading-with-button--heading">
    <h2 class="heading-two">Projects</h2>
  </div>
  <div class="heading-with-button--button">
    <a href="#" class="button button__small">View all</a>
  </div>
</div>

You can add a description with this markup:

Projects

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, enim!

<div class="heading-with-button">
  <div class="heading-with-button--heading">
    <h2 class="heading-two">Projects</h2>
    <div class="heading-with-button--description">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, enim!</p>
    </div>
  </div>
  <div class="heading-with-button--button">
    <a href="#" class="button button__small">View all</a>
  </div>
</div>

You can add multiple buttons next to each other:

Projects

<div class="heading-with-button">
  <div class="heading-with-button--heading">
    <h2 class="heading-two">Projects</h2>
  </div>
  <div class="heading-with-button--button">
    <a href="#" class="button__confirm button__small">New</a>
    <a href="#" class="button button__small">Archive</a>
  </div>
</div>