Bulma - Centered Card

bulma-centered-card.markdown

Bulma - Centered Card

A Pen by Erik Goens on CodePen.

License.

index.html

<main role="main">
  <div class="card has-text-centered is-wide">
    <header class="card-header">
      Header info
    </header>
    <div class="card-content">
      <h1>
        Heading
      </h1>
      <p>
        First line.<br/>
        Second line.
      </p>
    </div>
    <footer class="card-footer">
      &copy; 2017 Footer info
    </footer>
  </div>
</main>

style.scss

html,
body {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.card.is-wide {
  width: 550px;
}

.card.has-text-centered {
  .card-header,
  .card-content,
  .card-footer {
    justify-content: center;
    align-items: center;
  }
  
  h1 {
    font-size: 1.75rem;
    font-weight: bold;
  }
}

.card-header {
  padding: 1.75rem 0;
}

.card-content {
  padding: 3.5rem 0;
}

.card-footer {
  padding: 1rem 0;
  border: none;
  font-size: .9rem;
  color: lighten(black, 50%);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.min.css" rel="stylesheet" />