Portfolio - Components

View All Components

Component: Cards

Features

  1. image blur used for image size uniformity
  2. customize buttons
  3. card number choice
  4. image top/bottom options
  5. 3 styles
  6. theme choice
  7. drag and drop

Notes

  1. paragraph--card-repeater.html.twig used to pass field values to paragraph--card.html.twig
  2. {% set paragraph_parent = paragraph.getParentEntity() %} used to pass parent field values to child

Watch Short Video

People

people

People

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula rutrum diam et hendrerit. Suspendisse venenatis purus non turpis rhoncus dapibus. Nulla ut congue sem, a fermentum est. Vestibulum at urna at turpis lobortis eleifend. Nullam dapibus erat et massa dapibus, vel ultrices ante aliquet. Ut vulputate gravida justo, aliquam faucibus lectus porta in. Duis eu risus eros. Sed lorem nibh, efficitur nec condimentum lacinia, tempus in massa. Aliquam sapien tellus, volutpat a accumsan nec, pellentesque sed odio. Proin nibh ex, blandit id nibh sed, consequat dignissim tellus. Suspendisse ut lacus a metus elementum vulputate.

explore

Notices

wall

Notices

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula rutrum diam et hendrerit. Suspendisse venenatis purus non turpis rhoncus dapibus. Nulla ut congue sem, a fermentum est. Vestibulum at urna at turpis lobortis eleifend. Nullam dapibus erat et massa dapibus, vel ultrices ante aliquet. Ut vulputate gravida justo, aliquam faucibus lectus porta in. Duis eu risus eros. Sed lorem nibh, efficitur nec condimentum lacinia, tempus in massa. Aliquam sapien tellus, volutpat a accumsan nec, pellentesque sed odio. Proin nibh ex, blandit id nibh sed, consequat dignissim tellus. Suspendisse ut lacus a metus elementum vulputate.

learn

Dog Walk

dog

Dog Walk

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vehicula rutrum diam et hendrerit. Suspendisse venenatis purus non turpis rhoncus dapibus. Nulla ut congue sem, a fermentum est. Vestibulum at urna at turpis lobortis eleifend. Nullam dapibus erat et massa dapibus, vel ultrices ante aliquet. Ut vulputate gravida justo, aliquam faucibus lectus porta in. Duis eu risus eros. Sed lorem nibh, efficitur nec condimentum lacinia, tempus in massa. Aliquam sapien tellus, volutpat a accumsan nec, pellentesque sed odio. Proin nibh ex, blandit id nibh sed, consequat dignissim tellus. Suspendisse ut lacus a metus elementum vulputate.

read more
paragraph--card-repeater.html.twig

 
{% block paragraph %}

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

      {% block content %}

        {{ content|without('field_card_style','field_card_cols') }}

      {% endblock %}

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

{% endblock paragraph %}
paragraph--card.html.twig

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

{% set style = paragraph_parent.field_card_style.value %}

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

{% set imgPos = paragraph.field_card_image_position.value %}

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

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

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

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

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

{% set text = content.field_card_text %}

{% set link = paragraph.field_card_link.value %}

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


{% block paragraph %}

    {% block content %}

			{% if style == 1 %}

			<div class="col-md-6 col-lg-{{ cols }} my-5 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" style="animation-delay: 200ms;">

					{% if title %}<h3>{{ title }}</h3>{% endif %}

					<div class="card border-{{ theme }} bg-color-light" style="border-bottom: 5px solid;">

					{% if (imgPath is not empty) and (imgPos == '1') %}

						<a href="{{ url }}">

						<div class="image-frame mb-3">

							<div class="blur" style="background-image: url('{{ imgPath }}'); z-index: 1;"></div>

							<img src="{{ imgPath }}" alt="{{ alt }}" decoding="async" loading="lazy" />

						</div>

						</a>

					{% endif %}

						<div class="card-body pt-3">

							<h4 class="card-title mb-1 text-4 font-weight-bold">{{ title }}</h4>

							{{ text }}

							{% if link is not empty %}

							<a href="{{ url }}" class="read-more text-color-{{ theme }} font-weight-semibold text-2">{{ linkTitle }} <i class="fas fa-angle-right position-relative top-1 ms-1"></i></a>

							{% endif %}

						</div>

					{% if (imgPath is not empty) and (imgPos == '2') %}

					{# use "order-first order-sm-1" for mobile display - image above text always #}

						<a class="order-first order-sm-1" href="{{ url }}">

						<div class="image-frame">

							<div class="blur" style="background-image: url('{{ imgPath }}'); z-index: 1;"></div>

							<img src="{{ imgPath }}" alt="{{ alt }}" decoding="async" loading="lazy" />

						</div>

						</a>

					{% endif %}

					</div>

				</div>


			{% elseif style == 2 %}


			<div class="col-md-6 col-lg-{{ cols }} mb-5 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" style="animation-delay: 200ms;">

				<div class="card">

					{% if (img is not empty) and (imgPos  == '1') %}

					<a href="{{ url }}">

					<div class="image-frame mb-3">

						<div class="blur" style="background-image: url('{{ imgPath }}'); z-index: 1;"></div>

					</div>

					</a>

				    {% endif %}

					<div class="card-body pt-0">

						<h4 class="card-title mb-1 text-4 font-weight-bold">{{ title }}</h4>

						<p class="card-text mb-2 pb-1">{{ text }}</p>

						{% if link is not empty %}

						<a href="{{ url }}" class="read-more text-color-{{ theme }} font-weight-semibold text-2">{{ linkTitle }}<i class="fas fa-angle-right position-relative top-1 ms-1"></i></a>

						{% endif %}

					</div>

						{% if (img is not empty) and (imgPos == '2') %}

					<a class="order-first order-sm-1" href="{{ url }}">

					<div class="image-frame">

						<div class="blur" style="background-image: url('{{ imgPath }}'); z-index: 1;"></div>

						<img width="350" height="350" src="{{ imgPath }}" alt="{{ alt }}" decoding="async" loading="lazy" />

					</div>

					</a>

				    {% endif %}

				</div>

			</div>


			{% elseif style == 3 %}


			<div class="col-lg-{{ cols }} mb-4 mb-lg-0">

				<div class="">

					<span class="thumb-info thumb-info-no-overlay thumb-info-show-hidden-content-hover">

					{% if (img is not empty) %}

						{% if link is not empty %}<a href="{{ url }}">{% endif %}

						<span class="thumb-info-wrapper overlay overlay-show overlay-gradient-bottom-content border-radius-0 rounded-top">

							<div class="image-frame">

								<div class="blur" style="background-image: url('{{ imgPath }}'); z-index: 1;"></div>

							</div>

						</span>

						{% if link is not empty %}</a>{% endif %}

					{% endif %}

						<span class="thumb-info-content">

							<span class="thumb-info-content-inner bg-light p-4">

								<h4 class="mb-2">{{ title }}</h4>

								<p class="line-height-7 mb-0">{{ text }}</p>

								{% if link is not empty %}

								<span class="thumb-info-content-inner-hidden p-absolute d-block w-100 py-3">

									<a href="{{ url }}" class="text-uppercase font-weight-semibold text-decoration-underline">{{ linkTitle }}</a>

									<a href="{{ url }}" class="btn btn-light btn-rounded box-shadow-7 btn-xl border-0 text-3 p-0 btn-with-arrow-solid p-absolute right-0 transform3dx-n100 bottom-7"><span class="p-static bg-transparent transform-none"><i class="fa-solid fa-arrow-right text-dark"></i></span></a>

								</span>

								{% endif %}

							</span>

						</span>

					</span>

				</div>

			</div>

			{% endif %}

    {% endblock %}

{% endblock paragraph %}