larva components: `c-title`

Available Variants

prototype

Title of a story

c-title README

c-title should be used for the titles of articles, usually contained within a river or other section element. It is an h3 and supports either text or markup for its content.

If a value for c_title_markup is present, it will display in place of c_title_text. This is so that i and em tags are supported.

This pattern also supports c_title_above_url which is an anchor tag, within the h3 but with a separate URL, as well as c_title_before_text which is a span within the same link as the main h3.

In the future, these should/could be refactored into something like c_title_pre, and should not have conditionals checking the data.

c-title Twig The markup file.

{% if c_title_tag_text %}
<{{ c_title_tag_text }} id="{{ c_title_id_attr }}" class="c-title {{ modifier_class }} {{ c_title_classes }}">
{% else %}
<h3 id="{{ c_title_id_attr }}" class="c-title {{ modifier_class }} {{ c_title_classes }}">
{% endif %}

	{% if c_title_above_url %}
		<a href="{{ c_title_above_url }}" class="{{ c_title_above_link_classes }}">
			{{ c_title_above_text }}
		</a>
	{% endif %}

	{% if c_title_url %}
		<a href="{{ c_title_url }}" class="c-title__link {{ c_title_link_classes }}"
		{% if c_title_url_target_blank %}
			target="_blank" rel="noopener noreferrer"
		{% endif %}
		{{ c_title_link_data_attr }}>
	{% endif %}

		{% if c_title_before_text %}
			<span class="c-title__before {{ c_title_before_classes }}">{{ c_title_before_text }}</span>
		{% endif %}

		{% if c_title_markup %}
			{{ c_title_markup|raw }}
		{% else %}
			{{ c_title_text }}
		{% endif %}

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

{% if c_title_tag_text %}
</{{ c_title_tag_text }}>
{% else %}
</h3>
{% endif %}

c-title JSON The data object for this pattern.

{
	"c_title_classes": "",
	"c_title_tag_text": "",
	"c_title_id_attr": "title-of-a-story",
	"c_title_text": "Title of a story",
	"c_title_markup": "",
	"c_title_link_classes": "",
	"c_title_url": "#"
}