Washington National Cathedral Component Library

Text Spotlight 

<div class="text_spotlight theme_red_blue">
    <div class="text_spotlight_header">
        <div class="fs-row">
            <div class="fs-cell fs-lg-8 fs-xl-6 fs-lg-justify-center">
                <div class="text_spotlight_header_inner">
                    <span class="text_spotlight_heading">Updates</span>
                    <h2 class="text_spotlight_title">Light in the Darkness: The Racial Justice Windows Project</h2>
                </div>
            </div>
        </div>
    </div>
    <div class="text_spotlight_body">
        <div class="fs-row">
            <div class="fs-cell fs-lg-10 fs-xxl-8 fs-lg-justify-center">
                <div class="text_spotlight_body_inner">
                    <span class="text_spotlight_copy">Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam.</span>

                    <a href="#" class="text_spotlight_footer_link">
                        <span class="text_spotlight_footer_link_inner">
                            <span class="text_spotlight_footer_link_label">Check For Updates and Announcements</span><span class="icon_nowrap text_spotlight_footer_link_icon" aria-hidden="true">&#xfeff;
                                <svg class="icon icon_arrow_right">
                                    <use href="/images/icons.svg#arrow_right" />
                                </svg>
                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="text_spotlight{% if theme %} theme_{{ theme }}{% endif %}">
	<div class="text_spotlight_header">
		<div class="fs-row">
			<div class="fs-cell fs-lg-8 fs-xl-6 fs-lg-justify-center">
				<div class="text_spotlight_header_inner">
					<span class="text_spotlight_heading">{{ heading }}</span>
					<h2 class="text_spotlight_title">{{ title }}</h2>
				</div>
			</div>
		</div>
	</div>
	<div class="text_spotlight_body">
		<div class="fs-row">
			<div class="fs-cell fs-lg-10 fs-xxl-8 fs-lg-justify-center">
				<div class="text_spotlight_body_inner">
					<span class="text_spotlight_copy{% if single_column %} single_column{% endif %}">{{ copy }}</span>
					{% if link %}
					{% include '@partial-link' with {
						title: link.label,
						url: link.url,
						class: 'text_spotlight_footer',
						js: false,
						icon: 'arrow_right',
						aria: '',
						nowrap: true
					} %}
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.