Portfolio - Components

    • Home
    • Advanced Heading
View All Components

Component: Advanced Heading

Features

  1. choice of h1-h6
  2. choose position
  3. choose theme
  4. transform heading e.g. uppercase
  5. flexible with drag and drop

Notes

  1. allows flexibility
  2. loop content with field.html.twig

Watch Short Video

My Regular Heading

Transformed Heading

paragraph--advanced-heading.html.twig

 
{% set heading = paragraph.field_heading_type.value %}

{% set col = paragraph.field_text_color.value %}

{% set align = paragraph.field_text_alignment.value %}

{% set transform = paragraph.field_text_transform.value %}

{% set title = paragraph.field_heading_title.value %}


{% block paragraph %}

    {% block content %}

<div class="row">

{% for i in 1..6 %}

    {% if heading == "heading_" ~ i %}

        <h{{ i }} class="{{ col }} {{ align }} {{ transform }}">{{ title }}</h{{ i }}>

    {% endif %}

{% endfor %}

</div>

    {% endblock %}

{% endblock paragraph %}
field.html.twig

 
{% for item in items %}

{{ item.content }}

{% endfor %}