larva components: c-heading

Available Variants

prototype

Heading

c-heading README

This pattern is for major section headings. It has the following options:

  1. c_heading_is_primary_heading - default is false, but true will set this to an h1. Useful for category and tag templates.
  2. c_heading_outer - a wrapping div that exposes c_heading_outer_classes. Useful for adding borders or background colors to the heading.
c-heading Twig The markup file. 
{% if c_heading_outer %}
	<div class="c-heading__outer {{ c_heading_outer_classes }}">
{% endif %}

{% if c_heading_is_primary_heading %}
	<h1 id="{{ c_heading_id_attr }}" class="c-heading larva {{ modifier_class }} {{ c_heading_classes }}">
{% else %}
	<h2 id="{{ c_heading_id_attr }}" class="c-heading larva {{ modifier_class }} {{ c_heading_classes }}">
{% endif %}

	{% if c_heading_url %}
		<a href="{{ c_heading_url }}" class="{{ c_heading_link_classes }}">
	{% endif %}

		{{ c_heading_text }}

	{% if c_heading_url %}
		</a>
	{% endif %}

{% if c_heading_is_primary_heading %}
	</h1>
{% else %}
	</h2>
{% endif %}

{% if c_heading_outer %}
	</div>
{% endif %}
c-heading JSON The data object for this pattern. 
{
	"c_heading_classes": "",
	"c_heading_id_attr": "section-heading",
	"c_heading_text": "Heading",
	"c_heading_url": "",
	"c_heading_link_classes": "",
	"c_heading_outer": false,
	"c_heading_outer_classes": "",
	"c_heading_is_primary_heading": false
}