hero-main.html

<!-- _includes/hero-main.html -->
<section class="hero main-page is-medium is-bold">
    <div class="hero-body">
        <div class="container">
            <div class="columns is-vcentered is-centered">
                <div class="column is-one-third has-text-centered">
                    <img class="hero-logo" src="{{ page.logo_mark }}">
                </div>
                <div class="column">
                    <h1 class="title">{{ page.title }}</h1>
                    {% if page.hero_buttons %}
                    <div class="buttons is-left">
                      {% for button in page.hero_buttons %}
                          <a href="{{ button.link | liquify }}" onclick="this.blur();" class="button hero-button is-medium {{ button.color }} {{ button.link_class }}">
                            <span class="icon is-small">
                                <i class="{{ button.icon }}"></i>
                            </span>
                            <span>{{ button.text }}</span>
                          </a>
                      {% endfor %}
                    </div>
                    {% endif %}
                    <hr>
                    <p class="subtitle is-5">{{ page.subtitle }}</p>
                </div>
            </div>
        </div>
    </div>
</section>