datat.fi/_includes/page-intro.html

<header class="intro">
  {% if page.image %}
    {% assign intro_image = page.image.path | default: page.image | relative_url | escape %}
    <div class="intro-image">
      <img src="{{ intro_image }}" alt="{{ page.title }}">
    </div>
  {% endif %}

  <div class="inner">
    <div class="intro-text">
      <h1 id="page-title" class="intro-title">{{ page.alt_title | default: page.title | default: site.title | markdownify | strip_html }}</h1>
      {% if page.sub_title %}
        <p class="intro-subtitle">{{ page.sub_title | markdownify | strip_html }}</p>
      {% endif %}

      {% if page.date %}
        {% include author %}
        <p class="entry-meta">
          {% if author_name %}<span class="byline-item">{{ author_name | prepend: 'by ' }}</span>{% endif %}<span class="byline-item"><span class="icon">{% include icon-calendar.svg %}</span><time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time></span>{% if page.read_time %} <span class="byline-item"><span class="icon">{% include icon-stopwatch.svg %}</span>{% capture read_time %}{% include read-time.html %}{% endcapture %}{{ read_time | strip }}</span>{% endif %}
        </p>
      {% endif %}

      {% if page.introduction %}
        <div class="intro-more">
          {{ page.introduction | markdownify }}
        </div>
      {% endif %}

      {% if page.actions %}
        <ul class="intro-actions">
          {% for action in page.actions %}
            <li><a href="{{ action.url }}" class="btn">{% if action.icon %}<span class="icon">{% include {{ action.icon | prepend: 'icon-' | append: '.svg' }} %}</span>{% endif %}{{ action.label }}</a></li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  </div>
</header>