{% assign modifiers_link = site.data.links.by_id['modifiers-syntax'] %}

<section class="bd-easy section is-medium">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">
        <header class="bd-index-header bd-is-left">
          <h3 class="title is-3">
            <a href="{{ site.url }}{{ modifiers_link.path }}">
              So <strong>easy</strong> to learn
            </a>
          </h3>
          <h4 class="subtitle is-4">
            Get a design started within minutes
          </h4>
        </header>

        {% include elements/tw.html tweet_id="868829487072464897"
        modifier='bd-is-grey' drawing_id='crazy' drawing_width=108
        drawing_height=48 %}
      </div>

      <div class="column">
        <div class="block">
          <div class="field">
            <p class="control">
              <code>button</code>
            </p>
          </div>
          <a class="button">Button</a>
        </div>
        <div class="block">
          <div class="field">
            <p class="control">
              <code>button is-primary</code>
            </p>
          </div>
          <a class="button is-primary">Button</a>
        </div>
        <div class="block">
          <div class="field">
            <p class="control">
              <code>button is-primary is-large</code>
            </p>
          </div>
          <a class="button is-primary is-large">Button</a>
        </div>
        <div class="block">
          <div class="field">
            <p class="control">
              <code>button is-primary is-large is-loading</code>
            </p>
          </div>
          <a class="button is-primary is-large is-loading">Button</a>
        </div>
      </div>
    </div>

    {% include components/hero-buttons.html href=modifiers_link.path
    content="<span>Learn the <strong>modifiers syntax</strong></span
    >" %}
  </div>
</section>