Portfolio - Components

    • Home
    • Vertical Buttons
View All Components

Component: Vertical Buttons

Features:

  1. apply theme colors
  2. add link and text

Notes:

  1. best used in sidebars
  2. create list keys like bg-primary e.g. Primary|bg-primary


 

Watch Short Video

Vertical Buttons

Link 1 explore
paragraph--vertical-buttons-repeater.html.twig

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


{% block paragraph %}

  <div class="col-md-12 col-lg-12 mb-5 mb-lg-0 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" style="animation-delay: 400ms;">

      <div class="card card-border card-border-bottom card-border-hover bg-color-light box-shadow-6 box-shadow-hover anim-hover-translate-top-10px transition-3ms">

        <div class="card-body p-3" style="background: {{ color }};">

    {% block content %}

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

    {% endblock %}

    	 </div>

		</div>

	</div>

{% endblock paragraph %}
paragraph--vertical-buttons.html.twig

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

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

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


{% block paragraph %}

    {% block content %}

	  <a href="{{ url }}" class="btn btn-modern btn-{{ theme }} rounded-0 w-100 mb-2">{{ title }}</a>

    {% endblock %}

{% endblock paragraph %}