JHU SOE Component Library

Headlines 

<!-- Headlines -->
<div class="headlines_block">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="headlines_block_inner">
                <div class="headlines_header">
                    <h2 class="headlines_title">Headlines</h2>
                </div>
                <div class="headlines_body">
                    <ul class="headlines_list" aria-label="Headlines">
                        <li class="headlines_item">
                            <h3 class="headlines_item_title">
                                <a class="headlines_item_title_link" href="#">Facing Regional Shortages, U.S. Schools Now Employing 160,000 'Underqualified' Teachers</a>
                            </h3>
                            <p class="headlines_item_meta">The74 - <time class="headlines_item_date" datetime="2023-10-05 17:00:00">Oct 5</time></p>
                        </li>
                        <li class="headlines_item">
                            <h3 class="headlines_item_title">
                                <a class="headlines_item_title_link" href="#">Student absenteeism skyrocketed in the pandemic as test scores plunged</a>
                            </h3>
                            <p class="headlines_item_meta">Washington Post - <time class="headlines_item_date" datetime="2023-09-29 17:00:00">Sep 29</time></p>
                        </li>
                        <li class="headlines_item">
                            <h3 class="headlines_item_title">
                                <a class="headlines_item_title_link" href="#">Off-the-Shelf or Custom-Made? Why Some Districts Are Designing Their Own Curriculum</a>
                            </h3>
                            <p class="headlines_item_meta">EducationWeek - <time class="headlines_item_date" datetime="2023-09-29 17:00:00">Sep 29</time></p>
                        </li>
                        <li class="headlines_item">
                            <h3 class="headlines_item_title">
                                <a class="headlines_item_title_link" href="#">Reading and Math Scores Plummeted During Pandemic, New Data Show</a>
                            </h3>
                            <p class="headlines_item_meta">The Wall Street Journal - <time class="headlines_item_date" datetime="2023-09-15 17:00:00">Sep 15</time></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Headlines -->
 
{#
	{% include '@component-headlines' with {
		title: 'Title',
		items: [
			{
				title: "Item Title",
				source: {
					url: '#',
					label: 'Source Label'
				},
				date: '2023-10-05 17:00:00'
			}
		]
	} %}
#}

<!-- Headlines -->
<div class="headlines_block">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="headlines_block_inner">
				<div class="headlines_header">
					<h2 class="headlines_title">{{ title ?: 'Headlines' }}</h2>
				</div>
				<div class="headlines_body">
					<ul class="headlines_list" aria-label="{{ title ?: 'Headlines' }}">
						{% for item in items %}
							<li class="headlines_item">
								<h3 class="headlines_item_title">
									<a class="headlines_item_title_link" href="{{ item.source.url }}">{{ item.title }}</a>
								</h3>
								<p class="headlines_item_meta">{{ item.source.label }} - <time class="headlines_item_date" datetime="{{ item.date }}">{{ item.date|date('M j') }}</time></p>
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Headlines -->

No notes defined.