<div class="page_header">
<div class="page_header_checkered"></div>
<div class="page_header_inner">
<div class="breadcrumb">
<div class="fs-row">
<div class="fs-cell fs-lg-11 fs-lg-push-1">
<div class="breadcrumb_inner">
<nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
<div class="breadcrumb_nav_header">
<h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
</div>
<ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
<li class="breadcrumb_item breadcrumb_item_home">
<a class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_icon" aria-hidden="true">
<svg class="icon icon_home">
<use href="/images/icons.svg#home" />
</svg>
</span>
<span class="breadcrumb_pill_label">Home</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_divider">
<use href="/images/icons.svg#divider" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Navigation Level</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_divider">
<use href="/images/icons.svg#divider" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<a class="breadcrumb_pill breadcrumb_pill_link" href="#">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Parent Level</span>
</span>
</a>
<span class="breadcrumb_divider" aria-hidden="true">
<svg class="icon icon_divider">
<use href="/images/icons.svg#divider" />
</svg>
</span>
</li>
<li class="breadcrumb_item">
<span class="breadcrumb_pill">
<span class="breadcrumb_pill_inner">
<span class="breadcrumb_pill_label">Page Title</span>
</span>
</span>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
<div class="page_intro">
<div class="fs-row">
<div class="fs-cell fs-lg-8 fs-lg-push-1">
<div class="page_intro_inner">
<h1 class="page_title" itemprop="name">
News & Events
</h1>
<p class="page_description" itemprop="description">
See the latest news and events in road safety for Maryland.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page_content" id="skip_content" tabindex="-1">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-lg-justify-center"></div>
</div>
</div>
<div class="full_width_callouts">
<div class="news_related alternate_gray">
<div class="news_related_header">
<div class="fs-row">
<div class="fs-cell fs-lg-3">
<div class="news_related_header_inner">
<h2 class="news_related_title">
Featured News
</h2>
<div class="news_related_description">
<p>
Get the latest in road safety for Maryland. <a href="/"> See all posts.</a>
</p>
</div>
</div>
</div>
<div class="fs-cell fs-lg-9">
<ul class="news_related_items">
<li class="news_related_item">
<div class="news_item_feaure_icon_block">
</div>
<div class="news_item">
<figure class="news_item_figure">
<a class="news_item_figure_link" href="page-news-detail.html" aria-label="Read more about The Dangers of Speeding" tabindex="-1">
<span class="lazy_image_wrapper news_item_image_wrapper">
<img class="js-lazy js-lazyload news_item_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/mdot-zero-deaths-md/300x200/1" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/300x200/1 300w, https://images.fastspot.com/mdot-zero-deaths-md/500x334/1 500w, https://images.fastspot.com/mdot-zero-deaths-md/740x494/1 740w, https://images.fastspot.com/mdot-zero-deaths-md/980x654/1 980w" alt="">
</span>
<noscript>
<img class="news_item_image" src="https://images.fastspot.com/mdot-zero-deaths-md/980x654/1" srcset="https://images.fastspot.com/mdot-zero-deaths-md/980x654/1 980w, https://images.fastspot.com/mdot-zero-deaths-md/740x494/1 740w, https://images.fastspot.com/mdot-zero-deaths-md/500x334/1 500w, https://images.fastspot.com/mdot-zero-deaths-md/300x200/1 300w" sizes="100vw" alt="">
</noscript>
</a>
</figure>
<div class="news_item_wrapper">
<div class="news_item_header">
<div class="news_item_categories">
<div class="news_item_category_hint">Categories</div>
<ul class="news_item_category_list" aria-label="Categories">
<li class="news_item_category">
<a class="news_item_category_link" href="page-news-category.html">Aggressive Driving</a>
</li>
</ul>
</div>
<h2 class="news_item_title">
<a href="page-news-detail.html" class="news_item_title_link">
<span class="news_item_title_link_inner">
<span class="news_item_title_link_label">The Dangers of Speeding</span>
</span>
</a>
</h2>
</div>
<div class="news_item_body">
<div class="news_item_details">
<div class="news_item_detail news_item_date">
<span class="news_detail_label_title">Published:</span><br />
<span class="news_item_detail_hint">Published:</span>
<time class="news_item_detail_label" datetime="2019-01-01 17:00:00">
January 1, 2019
</time>
</div>
</div>
<div class="news_item_description">
<p>Description</p>
</div>
<div class="news_item_link">
<span class="news_item_link_button">
<a href="page-news-detail.html" class="cta_link">
<span class="cta_link_inner">
<span class="cta_link_label">Read This Article</span>
<span class="cta_link_icon" aria-hidden="true">
<span class="cta_link_icon_inner">
<span class="cta_link_icon_space"></span>
<svg class="icon icon_arrow_right">
<use xlink:href="/images/icons.svg#arrow_right"></use>
</svg>
</span>
</span>
</span>
</a>
</span>
</div>
</div>
</div>
</div>
<!-- END: News Item -->
</li>
<li class="news_related_item">
<div class="news_item_feaure_icon_block">
</div>
<div class="news_item">
<figure class="news_item_figure">
<a class="news_item_figure_link" href="page-news-detail.html" aria-label="Read more about Minimizing Your Blind Spots While Driving" tabindex="-1">
<span class="lazy_image_wrapper news_item_image_wrapper">
<img class="js-lazy js-lazyload news_item_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/mdot-zero-deaths-md/300x200/2" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/300x200/2 300w, https://images.fastspot.com/mdot-zero-deaths-md/500x334/2 500w, https://images.fastspot.com/mdot-zero-deaths-md/740x494/2 740w, https://images.fastspot.com/mdot-zero-deaths-md/980x654/2 980w" alt="">
</span>
<noscript>
<img class="news_item_image" src="https://images.fastspot.com/mdot-zero-deaths-md/980x654/2" srcset="https://images.fastspot.com/mdot-zero-deaths-md/980x654/2 980w, https://images.fastspot.com/mdot-zero-deaths-md/740x494/2 740w, https://images.fastspot.com/mdot-zero-deaths-md/500x334/2 500w, https://images.fastspot.com/mdot-zero-deaths-md/300x200/2 300w" sizes="100vw" alt="">
</noscript>
</a>
</figure>
<div class="news_item_wrapper">
<div class="news_item_header">
<div class="news_item_categories">
<div class="news_item_category_hint">Categories</div>
<ul class="news_item_category_list" aria-label="Categories">
<li class="news_item_category">
<a class="news_item_category_link" href="page-news-category.html">Driving Tips</a>
</li>
</ul>
</div>
<h2 class="news_item_title">
<a href="page-news-detail.html" class="news_item_title_link">
<span class="news_item_title_link_inner">
<span class="news_item_title_link_label">Minimizing Your Blind Spots While Driving</span>
</span>
</a>
</h2>
</div>
<div class="news_item_body">
<div class="news_item_details">
<div class="news_item_detail news_item_date">
<span class="news_detail_label_title">Published:</span><br />
<span class="news_item_detail_hint">Published:</span>
<time class="news_item_detail_label" datetime="2019-01-01 17:00:00">
January 1, 2019
</time>
</div>
</div>
<div class="news_item_description">
<p>Description</p>
</div>
<div class="news_item_link">
<span class="news_item_link_button">
<a href="page-news-detail.html" class="cta_link">
<span class="cta_link_inner">
<span class="cta_link_label">Read This Article</span>
<span class="cta_link_icon" aria-hidden="true">
<span class="cta_link_icon_inner">
<span class="cta_link_icon_space"></span>
<svg class="icon icon_arrow_right">
<use xlink:href="/images/icons.svg#arrow_right"></use>
</svg>
</span>
</span>
</span>
</a>
</span>
</div>
</div>
</div>
</div>
<!-- END: News Item -->
</li>
<li class="news_related_item">
<div class="news_item_feaure_icon_block">
</div>
<div class="news_item">
<figure class="news_item_figure">
<a class="news_item_figure_link" href="page-news-detail.html" aria-label="Read more about 8 Tips for Teen Commuters" tabindex="-1">
<span class="lazy_image_wrapper news_item_image_wrapper">
<img class="js-lazy js-lazyload news_item_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/mdot-zero-deaths-md/300x200/3" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/300x200/3 300w, https://images.fastspot.com/mdot-zero-deaths-md/500x334/3 500w, https://images.fastspot.com/mdot-zero-deaths-md/740x494/3 740w, https://images.fastspot.com/mdot-zero-deaths-md/980x654/3 980w" alt="">
</span>
<noscript>
<img class="news_item_image" src="https://images.fastspot.com/mdot-zero-deaths-md/980x654/3" srcset="https://images.fastspot.com/mdot-zero-deaths-md/980x654/3 980w, https://images.fastspot.com/mdot-zero-deaths-md/740x494/3 740w, https://images.fastspot.com/mdot-zero-deaths-md/500x334/3 500w, https://images.fastspot.com/mdot-zero-deaths-md/300x200/3 300w" sizes="100vw" alt="">
</noscript>
</a>
</figure>
<div class="news_item_wrapper">
<div class="news_item_header">
<div class="news_item_categories">
<div class="news_item_category_hint">Categories</div>
<ul class="news_item_category_list" aria-label="Categories">
<li class="news_item_category">
<a class="news_item_category_link" href="page-news-category.html">Driving Tips</a>
</li>
</ul>
</div>
<h2 class="news_item_title">
<a href="page-news-detail.html" class="news_item_title_link">
<span class="news_item_title_link_inner">
<span class="news_item_title_link_label">8 Tips for Teen Commuters</span>
</span>
</a>
</h2>
</div>
<div class="news_item_body">
<div class="news_item_details">
<div class="news_item_detail news_item_date">
<span class="news_detail_label_title">Published:</span><br />
<span class="news_item_detail_hint">Published:</span>
<time class="news_item_detail_label" datetime="2019-01-01 17:00:00">
January 1, 2019
</time>
</div>
</div>
<div class="news_item_description">
<p>Description</p>
</div>
<div class="news_item_link">
<span class="news_item_link_button">
<a href="page-news-detail.html" class="cta_link">
<span class="cta_link_inner">
<span class="cta_link_label">Read This Article</span>
<span class="cta_link_icon" aria-hidden="true">
<span class="cta_link_icon_inner">
<span class="cta_link_icon_space"></span>
<svg class="icon icon_arrow_right">
<use xlink:href="/images/icons.svg#arrow_right"></use>
</svg>
</span>
</span>
</span>
</a>
</span>
</div>
</div>
</div>
</div>
<!-- END: News Item -->
</li>
</ul>
</div>
</div>
</div>
<div class="news_related_body"></div>
</div>
<!-- END: Related News -->
<!-- Link Group -->
<div class="link_group alternate_white">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-lg-justify-center">
<div class="link_group_inner">
<div class="link_group_header">
<h2 class="link_group_title">Explore News By Category</h2>
</div>
<div class="link_group_description">
<p class="link_group_description_text"></p>
</div>
<ul class="link_group_list">
<li class="link_group_item">
<a class="link_group_link" href="#" target="_blank" itemprop="relatedLink">
<span class="link_group_link_inner">
<span class="link_group_link_label">Aggressive Driving</span>
<span class="link_group_link_icon">
<svg class="icon icon_arrow-right">
<use href="/images/icons.svg#arrow-right" />
</svg>
</span>
</span>
</a>
</li>
<li class="link_group_item">
<a class="link_group_link" href="#" target="_blank" itemprop="relatedLink">
<span class="link_group_link_inner">
<span class="link_group_link_label">Driving Tips</span>
<span class="link_group_link_icon">
<svg class="icon icon_arrow-right">
<use href="/images/icons.svg#arrow-right" />
</svg>
</span>
</span>
</a>
</li>
<li class="link_group_item">
<a class="link_group_link" href="#" target="_blank" itemprop="relatedLink">
<span class="link_group_link_inner">
<span class="link_group_link_label">Motorcycle Safety</span>
<span class="link_group_link_icon">
<svg class="icon icon_arrow-right">
<use href="/images/icons.svg#arrow-right" />
</svg>
</span>
</span>
</a>
</li>
<li class="link_group_item">
<a class="link_group_link" href="#" target="_blank" itemprop="relatedLink">
<span class="link_group_link_inner">
<span class="link_group_link_label">Distracted Driving</span>
<span class="link_group_link_icon">
<svg class="icon icon_arrow-right">
<use href="/images/icons.svg#arrow-right" />
</svg>
</span>
</span>
</a>
</li>
<li class="link_group_item">
<a class="link_group_link" href="#" target="_blank" itemprop="relatedLink">
<span class="link_group_link_inner">
<span class="link_group_link_label">Young Driver Safety</span>
<span class="link_group_link_icon">
<svg class="icon icon_arrow-right">
<use href="/images/icons.svg#arrow-right" />
</svg>
</span>
</span>
</a>
</li>
<li class="link_group_item">
<a class="link_group_link" href="#" target="_blank" itemprop="relatedLink">
<span class="link_group_link_inner">
<span class="link_group_link_label">View All Categories</span>
<span class="link_group_link_icon">
<svg class="icon icon_arrow-right">
<use href="/images/icons.svg#arrow-right" />
</svg>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Link Group -->
<!-- Related Events -->
<div class="event_related">
<div class="event_related_bg"></div>
<div class="event_related_body">
<div class="fs-row">
<div class="fs-cell fs-lg-10 fs-lg-push-1">
<div class="related_events_title_block">
<span class="related_event_title_label">
<span class="related_event_feature_icon">
<svg class="icon icon_calendar">
<use xlink:href="/images/icons.svg#calendar"></use>
</svg>
</span>
Related Event
</span>
<span class="related_event_title_link">
<a href="/">See All Events</a>
</span>
</div>
<div class="dashed_divider"></div>
<ul class="event_related_items">
<li class="event_related_item">
<!-- Event Item -->
<div class="event_item">
<figure class="event_figure">
<a class="event_figure_link" href="page-event-detail.html" aria-label="Read more about In Enim Justo Rhoncus Ut" tabindex="-1">
<span class="lazy_image_wrapper event_image_wrapper">
<img class="js-lazy js-lazyload event_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/mdot-zero-deaths-md/300x200/1" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/300x200/1 300w, https://images.fastspot.com/mdot-zero-deaths-md/500x334/1 500w, https://images.fastspot.com/mdot-zero-deaths-md/740x494/1 740w, https://images.fastspot.com/mdot-zero-deaths-md/980x654/1 980w" alt="">
</span>
<noscript>
<img class="event_image" src="https://images.fastspot.com/mdot-zero-deaths-md/980x654/1" srcset="https://images.fastspot.com/mdot-zero-deaths-md/980x654/1 980w, https://images.fastspot.com/mdot-zero-deaths-md/740x494/1 740w, https://images.fastspot.com/mdot-zero-deaths-md/500x334/1 500w, https://images.fastspot.com/mdot-zero-deaths-md/300x200/1 300w" sizes="100vw" alt="">
</noscript>
</a>
</figure>
<div class="event_wrapper">
<div class="event_header">
<h2 class="event_title">
<a href="page-event-detail.html" class="event_title_link">
<span class="event_title_link_inner">
<span class="event_title_link_label">In Enim Justo Rhoncus Ut</span>
</span>
</a>
</h2>
<div class="event_detail event_detail_category">
<span class="event_detail_hint">Categories:</span>
<ul class="event_detail_list" aria-label="Categories">
<li class="event_detail_item">
<a class="event_detail_link" href="page-event-category.html">
Category One
</a>
</li>
<li class="event_detail_item">
<a class="event_detail_link" href="page-event-category.html">
Category Two
</a>
</li>
</ul>
</div>
</div>
<div class="event_body">
<!-- Event Details -->
<div class="event_day_location_details">
<div class="event_detail">
<span class="event_detail_label_title">Day & Time</span><br />
<span class="event_detail_hint">Day and time</span>
<span class="event_detail_label">
<span class="event_detail_label_date">
Wednesday May 31, 2017
</span>
5:00 PM - 7:00 PM
</span>
</div>
<div class="event_detail event_details_categories">
<div class="event_detail event_detail_category">
<span class="event_detail_hint">Categories:</span>
<span class="event_detail_label_title">Category</span><br />
<ul class="event_detail_list" aria-label="Categories">
<li class="event_detail_item">
<a class="event_detail_link" href="page-event-category.html">
Category One
</a>
</li>
<li class="event_detail_item">
<a class="event_detail_link" href="page-event-category.html">
Category Two
</a>
</li>
</ul>
</div>
</div>
<div class="event_detail">
<div class="event_actions">
<div class="event_actions_header">
<h2 class="event_actions_title" id="event_actions_title">
<span class="event_actions_title_label">Event Actions</span>
</h2>
</div>
<div class="event_actions_body">
<ul class="event_actions_list" aria-labelledby="event_actions_title">
<li class="event_action">
<a href="#" class="event_action_link">
<span class="event_action_link_inner">
<span class="event_action_link_label">Register</span>
<span class="event_action_link_icon" aria-hidden="true">
<span class="event_action_link_icon_inner">
<span class="event_action_link_icon_space"></span>
<svg class="icon icon_arrow_right">
<use xlink:href="/images/icons.svg#arrow_right"></use>
</svg>
</span>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Event Details -->
<div class="event_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<!-- END: Event Item -->
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END: Related Events -->
<!-- Call to Action -->
<div class="cta has_image">
<figure class="cta_figure" aria-hidden="true">
<span class="lazy_image_wrapper cta_image_wrapper">
<picture class="cta_picture">
<source media="(min-width: 1220px)" srcset="../../../images/placeholder.png" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/1440x810/1">
<source media="(min-width: 980px)" srcset="../../../images/placeholder.png" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/1220x686/1">
<source media="(min-width: 740px)" srcset="../../../images/placeholder.png" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/980x552/1">
<source media="(min-width: 500px)" srcset="../../../images/placeholder.png" data-srcset="https://images.fastspot.com/mdot-zero-deaths-md/740x416/1">
<img class="js-lazy js-lazyload cta_image" src="../../../images/placeholder.png" data-src="https://images.fastspot.com/mdot-zero-deaths-md/740x740/1" alt="">
</picture>
</span>
<noscript>
<picture class="cta_picture">
<source media="(min-width: 1220px)" srcset="https://images.fastspot.com/mdot-zero-deaths-md/1440x810/1">
<source media="(min-width: 980px)" srcset="https://images.fastspot.com/mdot-zero-deaths-md/1220x686/1">
<source media="(min-width: 740px)" srcset="https://images.fastspot.com/mdot-zero-deaths-md/980x552/1">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/mdot-zero-deaths-md/740x416/1">
<img class="cta_image" src="https://images.fastspot.com/mdot-zero-deaths-md/740x740/1" alt="">
</picture>
</noscript>
</figure>
<div class="cta_wrapper">
<div class="fs-row">
<div class="fs-cell">
<div class="cta_inner cta_light_background">
<div class="cta_header">
<h2 class="cta_title">
<span class="cta_title_label"></span>
<span class="cta_highlighted_text">
Sign Up for our newsletter
</span>
</h2>
</div>
<div class="cta_body">
<div class="cta_description">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
<div class="cta_actions">
<div class="cta_footer">
<div class="cta_link_item">
<span class="cta_link_button">
<a href="#" class="cta_link" aria-label="Newsletter Signup">
<span class="cta_link_inner">
<span class="cta_link_label">Newsletter Signup</span>
<span class="cta_link_icon" aria-hidden="true">
<span class="cta_link_icon_inner">
<span class="cta_link_icon_space"></span>
<svg class="icon icon_arrow_right">
<use xlink:href="/images/icons.svg#arrow_right"></use>
</svg>
</span>
</span>
</span>
</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Call to Action -->
</div>
{% render '@partial-page-header'
with
{
page: {
title: 'News & Events',
description: 'See the latest news and events in road safety for Maryland.'
}
}
%}
<div class="page_content" id="skip_content" tabindex="-1">
<div class="fs-row">
<div class="fs-cell {{ cell }}"></div>
</div>
</div>
<div class="full_width_callouts">
{% include '@component-related-news' with {
title: 'Featured News',
description: 'Get the latest in road safety for Maryland. <a href="/"> See all posts.</a>',
bg_modifier: 'alternate_gray',
items: [
{
image: '1',
categories: ['Aggressive Driving'],
category_url: 'page-news-category.html',
title: 'The Dangers of Speeding',
url: 'page-news-detail.html'
},
{
image: '2',
categories: ['Driving Tips'],
category_url: 'page-news-category.html',
title: 'Minimizing Your Blind Spots While Driving',
url: 'page-news-detail.html'
},
{
image: '3',
categories: ['Driving Tips'],
category_url: 'page-news-category.html',
title: '8 Tips for Teen Commuters',
url: 'page-news-detail.html'
}
]
} %}
{% include '@component-link-group' with {
title: 'Explore News by Category',
bg_modifier: 'alternate_white',
items: [
{
title: 'Aggressive Driving',
url: '#',
icon: 'arrow-right'
},
{
title: 'Driving Tips',
url: '#',
icon: 'arrow-right'
},
{
title: 'Motorcycle Safety',
url: '#',
icon: 'arrow-right'
},
{
title: 'Distracted Driving',
url: '#',
icon: 'arrow-right'
},
{
title: 'Young Driver Safety',
url: '#',
icon: 'arrow-right'
},
{
title: 'View All Categories',
url: '#',
icon: 'arrow-right'
}
]
} %}
{% render '@component-related-events' %}
{% include '@component-call-to-action' with {
highlighted_text: 'Sign Up for our newsletter',
image: 1,
modifier: 'cta_light_background',
description: 'Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.',
link_title: 'Newsletter Signup',
link_url: '#',
link_icon: 'arrow_right',
aria: 'Newsletter Signup'
} %}
</div>
No notes defined.