<header class="frame-header">
<h2 class="element-header">
Header
</h2>
<h3 class="element-subheader">Subheader</h3>
<p class="">
<time datetime="2021-01-29">
January 29, 2021
</time>
</p>
</header>
{% if header %}
{% set header_layout = header_layout|default(2) %}
{% set headerTag = 'h' ~ header_layout %}
{% set subHeaderTag = 'h' ~ (header_layout+1) %}
{# CSS Class - Default css class #}
{% set class_header = 'element-header' %}
{% set class_subHeader = 'element-subheader' %}
{# Header Style - Options: 0, 1, 2, 3, 4 ,5 #}
{% if header_style %}
{% set class_header = class_header ~ ' h' ~ header_style %}
{% set class_subHeader = class_subHeader ~ ' h' ~ (header_style+1) %}
{% endif %}
{# Header Position - Options: left, center, right #}
{% set positionClass = header_position ? ' text-' ~ header_position : '' %}
{% block main %}
<header class="frame-header">
<{{ headerTag }} class="{{ class_header }}{{ positionClass }}">
{% if header_link %}<a href="{{ header_link }}">{% endif %}
{{ header }}
{% if header_link %}</a>{% endif %}
</{{ headerTag }}>
{% if subheader %}
<{{ subHeaderTag }} class="{{ class_subHeader }}{{ positionClass }}">{{ subheader }}</{{ subHeaderTag }}>
{% endif %}
{% if date %}
<p class="{{ positionClass }}">
<time datetime="{{ date|date("Y-m-d") }}">
{{ date|date("F d, Y") }}
</time>
</p>
{% endif %}
</header>
{% endblock %}
{% endif %}
{
"header_position": null,
"header_layout": null,
"header_style": null,
"header_link": null,
"header": "Header",
"subheader": "Subheader",
"date": "now"
}
h1,
.h1 {
letter-spacing: $h1-font-size/10;
}
h2,
.h2 {
letter-spacing: $h2-font-size/10;
}
h3,
.h3 {
letter-spacing: $h3-font-size/10;
}
h4,
.h4 {
letter-spacing: $h4-font-size/10;
}
h5,
.h5 {
letter-spacing: $h5-font-size/10;
}
h6,
.h6 {
letter-spacing: $h6-font-size/10;
}
.header-color- {
&gray {
color: $body-color;
}
&green {
color: $green;
}
&orange {
color: $orange;
}
&white {
color: $white;
text-shadow: $text-shadow;
}
}
No notes defined.