SIA Web Design Library

Call to Action: Blended in (no background, no spacing)

No notes defined.

<section class='c-cta c-cta--blend-in 
    '>
    <div class='c-cta__content-wrapper'>

        <h1 class='c-heading c-heading--blocky c-cta__heading'>
            Join us in Czechia
        </h1>

        <p>We are privileged to build awareness on social entrepreneurship, a pretty new discipline in Croatia. Through supporting the youth in creating and implementing sustainable solutions, hopefully great heritage for future generations will evolve.</p>

        <p class='c-cta__action'>
            <a class='c-button t-theme--null' href="#">Click here!</a>
        </p>
    </div>
</section>
 
<section class='{{ get_component_class( 'cta', display ) }} 
    {% if type %}
        c-cta--{{ type }}
    {% endif %}'>
    <div class='c-cta__content-wrapper'>
        {% if notice %}
            {% include get_template( 'notice', 'unit' ) with notice %}
            {% set notice = NULL %}
        {% endif %}

        {% if icon %}
            {% include '@unit/icon/icon.twig' with icon|merge( { display: { component: 'cta', modifiers: [ 'double' ] } } ) %}
        {% endif %}

        {% if heading %}
            {% include '@unit/heading/heading.twig' with heading|merge( { display: { component: 'cta', modifiers: [ 'blocky' ] } } ) %}
        {% endif %}

        {% if text %}
            <p>{{ text|raw }}</p>
        {% endif %}

        {% if socialLinks %}
            {% include get_template( 'social-links', 'unit' ) with socialLinks %}
        {% elseif formTemplate %}
            {% include '@unit/forms/' ~ formTemplate ~ '.twig' %}
        {% elseif rendered %}
            {{ rendered|raw }}
        {% elseif button %}
            <p class='c-cta__action'>
                {% include get_template( 'button', 'base' ) with button|merge( { display: { theme: NULL } } ) %}
            </p>
        {% elseif link %}
            <p class='c-cta__action'>
                {% include get_template( 'link', 'base' ) with link|merge( { display: { modifiers: [ 'forward', 'with-icon', 'with-icon--reversed' ] } } ) %}
            </p>
        {% endif %}
    </div>
</section>
 
{
  "supraheading": "SIA Summit 2020",
  "heading": {
    "text": "Join us in Czechia"
  },
  "text": "We are privileged to build awareness on social entrepreneurship, a pretty new discipline in Croatia. Through supporting the youth in creating and implementing sustainable solutions, hopefully great heritage for future generations will evolve.",
  "button": {
    "text": "Click here!",
    "url": "#"
  },
  "display": {
    "modifiers": [
      "blend-in"
    ]
  }
}