Portfolio - Components

    • Home
    • Call To Action
View All Components

Component: Call to Action

Features

  1. add theme
  2. adjust flex position
  3. adjust width

Notes

  1. paragraph--cta-repeater.html.twig used to pass values to paragraph--cta.html.twig with {% set paragraph_parent = paragraph.getParentEntity() %}
  2. Booststrap utility classes used: <div class="d-none d-lg-block">

Watch Short Video

Call to Action

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.

Apply

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.

Apply

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.

learn more

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.

learn more
paragraph--cta-repeater.html.twig

 
{% block paragraph %}

<div class="row">

  {% block content %}

    {{ content|without('field_cta_width','field_cta_position','field_color_scheme') }}

  {% endblock %}

</div>

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

 
<div class="row">

    {% block content %}

    {# show on phone / <lg #}

<div class="d-lg-none">

    <div class="d-flex {{ position }}">

    <section class="call-to-action featured featured-{{ color }} mb-5">

      <div class="col-sm-9 col-lg-9">

        <div class="call-to-action-content">

          {{ text }}

        </div>

      </div>

      <div class="col-sm-3 col-lg-3">

        <div class="call-to-action-btn">

          <a href="{{ url }}" target="_blank" class="btn btn-modern text-2 btn-{{ color }}">{{ title }}</a>

        </div>

      </div>

    </section>

  </div>

</div>

{# show on desktop / lg+ #}

<div class="d-none d-lg-block">

  <div class="d-flex {{ position }}">

    <section class="call-to-action featured featured-{{ color }} mb-5 w-{{ width }}">

    {% if url %}

      <div class="col-sm-9 col-lg-9">

        <div class="call-to-action-content mx-auto">

          {{ text }}

        </div>

      </div>

      <div class="col-sm-3 col-lg-3">

        <div class="call-to-action-btn mx-auto">

          <a href="{{ url }}" target="_blank" class="btn text-2 btn-{{ color }}">{{ title }}</a>

        </div>

      </div>

    {% else %}

     <div class="col-12">

        <div class="call-to-action-content mx-auto">

          {{ text }}

        </div>

      </div>

    {% endif %}

    </section>

  </div>

</div>

    {% endblock %}

</div>

{% endblock paragraph %}