SIA Web Design Library

Call to Action: Social

No notes defined.

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

        <h1 class='c-heading c-heading--blocky c-cta__heading'>
            Share the article
        </h1>

        <p>Lorem ipsum, at least as long as the title.</p>

        <div class='c-social-links'>
            <ul class='c-social-links__items u-list--unstyled u-list--inline'>
                <li class='c-social-links__items__item'>
                    <a class='c-link c-link--with-icon c-link--icon-only c-link--facebook c-social-links__link ' href="" itemprop="item" itemid="" title="Share on Facebook"><span itemprop="name">Facebook</span></a>
                </li>
                <li class='c-social-links__items__item'>
                    <a class='c-link c-link--with-icon c-link--icon-only c-link--linkedin c-social-links__link ' href="" itemprop="item" itemid=""><span itemprop="name">Linkedin</span></a>
                </li>
                <li class='c-social-links__items__item'>
                    <a class='c-link c-link--with-icon c-link--icon-only c-link--twitter c-social-links__link ' href="" itemprop="item" itemid=""><span itemprop="name">Twitter</span></a>
                </li>
            </ul>
        </div>
    </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": "Share the article"
  },
  "text": "Lorem ipsum, at least as long as the title.",
  "button": {
    "text": "Click here!",
    "url": "#"
  },
  "type": "sharing",
  "socialLinks": {
    "items": {
      "facebook": {
        "title": "Share on Facebook",
        "text": "Facebook",
        "url": "https://www.facebook.com/socialimpactaward"
      },
      "linkedin": {
        "text": "Linkedin",
        "url": "https://www.linkedin.com/company/socialimpactaward/"
      },
      "twitter": {
        "text": "Twitter",
        "url": "http://twitter.com/SIAtweets"
      }
    }
  }
}