Portfolio - Components

View All Components

Component: Button

Features

  1. flex positioning with placement options
  2. choose color theme
  3. set links
  4. set rounding and optional icon

Notes

  1. Spacing set in parent paragraph. Valued retrieved in child using {% set paragraph_parent = paragraph.getParentEntity() %}

Watch Short Video

Link 1
Link 2
paragraph--button.html.twig

 
{% set paragraph_parent = paragraph.getParentEntity() %}

{% set spacing = paragraph_parent.field_button_spacing.0.value %}

{% set url = content.field_button_link[0]['#url'] %}

{% set link_title = content.field_button_link[0]['#title'] %}

{% set theme = paragraph.field_theme_color.value %}

{% set icon = paragraph.field_icon_code.value %}

{% set rnd = paragraph.field_rounding_level.value %}


{% block paragraph %}

    {% block content %}

    <div class="p-2{% if spacing == 'justify-expanded' %} flex-grow-1{% endif %}">

    <a href="{{ url }}" class="mb-1 mt-1 me-1 btn btn-{{ theme }} rounded-{{ rnd }}"><i class="{{ icon }}"></i> {{ link_title }}</a>

  </div>

    {% endblock %}

{% endblock paragraph %}
paragraph--button-repeater.html.twig

 
{% set spacing = paragraph.field_button_spacing.value %}


{% block paragraph %}

<div class="row">

  <div class="d-flex flex-wrap {{ spacing }} mb-3">

      {% block content %}

        {{ content|without('field_button_spacing') }}

      {% endblock %}

  </div>

</div>

{% endblock paragraph %}