E3 Alliance Pattern Library

Call To Action Block Component 

<div class="cta cta--dark ">
        <div class="cta__container">
            <h3 class="cta__header">Call to Action</h3>
            <div class="cta__description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien.</div>
            <div class="cta__link">
                <a href="#" class="cta-button cta-button--light  ">
                    <span class="cta-button__title">
                        Learn More
                    </span>
                    <div class="cta-button__icon">
                        <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14.1875 6.9707L9.1875 11.9707C8.8125 12.377 8.15625 12.377 7.78125 11.9707C7.375 11.5957 7.375 10.9395 7.78125 10.5645L11.0625 7.25195H1.5C0.9375 7.25195 0.5 6.81445 0.5 6.25195C0.5 5.7207 0.9375 5.25195 1.5 5.25195H11.0625L7.78125 1.9707C7.375 1.5957 7.375 0.939453 7.78125 0.564453C8.15625 0.158203 8.8125 0.158203 9.1875 0.564453L14.1875 5.56445C14.5938 5.93945 14.5938 6.5957 14.1875 6.9707Z" fill="#ACEB8A" />
                        </svg>
                    </div>
                </a>
            </div>
        </div>
    </div>
 
{% include 'partials/call-to-action/call-to-action.twig' with {
    'cta' : component.cta
}%}
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "component": {
    "cta": {
      "link": "#",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget sapien.",
      "linkText": "Learn More",
      "header": "Call to Action",
      "background": "dark",
      "type": "internal"
    }
  }
}
  • Handle: @call-to-action-block-component
  • Preview:
  • Filesystem Path: patterns/components/call-to-action-block-component/call-to-action-block-component.twig

No notes defined.