Heinz History Center Component Library

Call To Action Simple 

<!-- Call to Action -->
<div class="cta">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-lg-justify-center">
            <div class="cta_inner">
                <div class="cta_description">
                    <p>Praesent commodo cursus magna, vel <strong>scelerisque nisl consectetur</strong> et. Curabitur blandit <em>tempus porttitor</em>. Etiam porta sem malesuada <a href="#">magna mollis euismod</a>. Donec ullamcorper nulla non metus auct.</p>
                </div>
                <div class="cta_action">
                    <div class="cta_action_divider"></div>

                    <a href="#" class="cta_link" aria-label="Link Aria">
                        <span class="cta_link_inner">
                            <span class="cta_link_label">Link Label</span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Call to Action -->
 
{#
	{% include '@component-call-to-action' with {
		description: 'Description',
		link: {
			url: '#',
			label: 'Link',
			aria: 'aria',
			icon: ''
		}
	} %}
#}

<!-- Call to Action -->
<div class="cta">
	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-lg-justify-center">
			<div class="cta_inner">
				<div class="cta_description">
					<p>{{ description }}</p>
				</div>
				<div class="cta_action">
					<div class="cta_action_divider"></div>
					{% include '@partial-link' with {
						class: 'cta',
						title: link.label,
						url: link.url,
						icon: link.icon,
						aria: link.aria
					} %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Call to Action -->

No notes defined.