Portfolio - Components

View All Components

Component: Boxes

Features:

  1. Image/Text/Styled List flexible content display
  2. Drag n drop placement
  3. Theme and border options
  4. 2/3/4 column options

Notes:

  1. Background image centered with CSS. Make subject exact center


 

Watch Short Video

My List

list subheading list subheading list subheading list subheading list subheading list subheading list subheading list subheading list subheading list subheading list subheading list subheading list subheading list subheading list subheading list subheading list subheading list subheading 

  • list item list item list item list item list item list item list item list item list item list item list item list item list item 

  • list item list item list item list item list item list item list item list item list item list item list item list item list item 

  • list item list item list item list item list item list item list item list item list item list item list item list item list item 

  • list item list item list item list item list item list item list item list item list item list item list item list item list item 

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu laoreet dui, vitae semper enim. Pellentesque in consectetur velit. Sed pulvinar justo ac magna ornare varius. Integer convallis malesuada erat vel bibendum. Morbi id odio vitae nunc auctor tincidunt eu nec ex. Duis lacus lorem, porttitor id nibh quis, egestas varius lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu laoreet dui, vitae semper enim. Pellentesque in consectetur velit. Sed pulvinar justo ac magna ornare varius. Integer convallis malesuada erat vel bibendum. Morbi id odio vitae nunc auctor tincidunt eu nec ex. Duis lacus lorem, porttitor id nibh quis, egestas varius lectus. 

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu laoreet dui, vitae semper enim. Pellentesque in consectetur velit. Sed pulvinar justo ac magna ornare varius.

Integer convallis malesuada erat vel bibendum. Morbi id odio vitae nunc auctor tincidunt eu nec ex. Duis lacus lorem, porttitor id nibh quis, egestas varius lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

paragraph--boxes.html.twig

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

{% set cols = paragraph_parent.field_box_columns.value %}

{% set border = paragraph.field_box_border.value %}

{% set imgPath = file_url(content.field_box_background_image['#items'].entity.uri.value) %}

{% set alt = content.field_box_background_image['#items'].alt %}

{% set text = content.field_box_text %}

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

{% set listIcon = paragraph.field_box_list_icon.value %}

{% set listType = paragraph.field_list_type.value %}

{% set ct = paragraph.field_show_content_type.value %}

{% set listStyle = paragraph.field_box_list_style.value %}

{% set listHeading = paragraph.field_box_list_heading.value %}

{% set listSubheading = content.field_box_list_subheading %}

{% set listItem = content.field_box_list_content %}


{% block paragraph %}

    {% block content %}

			<div class="col-md-{{ cols }} col-lg-{{ cols }} my-3 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" style="animation-delay: 200ms; min-height: 350px;">

				<div class="card border border-{{ theme }} {{ border }} p-1 w-100 h-100">

				{% if ct == "image" %}

				<div class="w-100 h-100" aria-label="{{ alt }}" style="background-image: url('{{ imgPath }}'); background-repeat: no-repeat; background-position: center center; background-size: auto;"></div>

				{% elseif ct == "text" or ct is empty %}

					<div class="p-3">{{ text }}</div>

				{% else %}

					<div class="boxList p-3">

						<h4 class="text-{{ theme }}">{{ listHeading }}</h4>

						{% if listSubheading %}<div class="my-2">{{ listSubheading }}</div>{% endif %}

						{% if listType == "ul" %}<ul class="list list-icons {{ listStyle }} pt-4">{% else %}<ol class="li-{{ theme }} list list-ordened {{ listStyle }} pt-4">{% endif %}

							{% for key, item in content.field_box_list_content %}

								{% if key|first != "#" %}

									{% if listType == "ul" %}

									<li><i class="bg-{{ theme }} text-white fas {{ listIcon }}"></i>{{ item }}</li>

									{% elseif listType == "ol" %}

									<li class="my-2">{{ item }}</li>

									{% endif %}


								{% endif %}

							{% endfor %}

						{% if listType == "ul" %}</ul>{% else %}</ol>{% endif %}

					</div>

				{% endif %}

				</div>

			</div>

    {% endblock %}

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

 
{% block paragraph %}

<div class="row mb-1 pb-1"><!--open card-->

      {% block content %}

        {{ content|without('field_box_style','field_box_columns') }}

      {% endblock %}

</div> <!-- close card -->

{% endblock paragraph %}