{% assign post = site.posts.first %}
<div class="section-highlight section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">

  <header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}></header>

  <div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
    <div class="mdl-card__supporting-text">
      <h4>{{ post.title }}</h4>
      {{ post.excerpt }}
    </div>
    <div class="mdl-card__actions">
      <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a>
    </div>
  </div>

  <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn-high">
    <i class="material-icons">more_vert</i>
  </button>
  <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn-high">
    <li class="mdl-menu__item">Facebook</li>
    <li class="mdl-menu__item">Twitter</li>
    <li class="mdl-menu__item">Google+</li>
  </ul>

</div>