Welcome to the Concept3D Widget Library! This library is designed to provide you with a range of customizable and common widgets that you can easily integrate to display your events. Each widget includes the code you need to copy and paste directly into your website.

What You'll Need / What You'll Get

You'll need to be a Localist customer with one of the following packages to get additional widgets:

Branding Setup	Developer Theming
3 additional widgets from the Widget Library provided during implementation	Unlimited self-serve access to any of these Widgets

If you do not have either or are not sure, please reach out to support@concept3d.com or your Client Success Manager for help.

How to Use the Additional Widget Library

Browse the Library: Explore the different widget options available in our library. Each widget is designed to seamlessly integrate with your website.
Copy the Code: Once you find a widget that suits your needs, simply copy the provided code.
Paste and Customize: Paste the code into your site’s HTML. You can further customize the widget by adjusting the styling to fit your specific branding requirements.

To access your widgets, navigate to Content on the left side of your admin dashboard and select Widgets from the dropdown menu.

Additional Widget Options

Below are the additional widget templates we offer:

Widget 1
Widget 2
Widget 3
Widget 4
Widget 5
Widget 6
Widget 7
Widget 8
Widget 9
Widget 10
Widget 11
Widget 12
Widget 13
Widget 14
Widget 15

Widget 1

HTML

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events Listing</title> <!-- Added title element -->
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
{% unless settings.style == 'none' %}
<style>
.localist-widget .event-list {
list-style: none;
margin: 0;
padding: 0;
font-size: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
float: unset;
font-family: "Karla", helvetica, arial, sans-serif;
}
.localist-widget li.event-item {
transition-property: opacity;
transition-duration: .6s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
width: 100%;
display: flex;
margin-bottom: 20px !important;
}
.localist-widget li.event-item.transparent {
opacity: 0;
}
.localist-widget li.event-item a {
line-height: 1.125;
color: inherit;
display: inline-block;
max-width: calc(100% - 70px);
text-decoration: none;
}
.localist-widget .event-item a h4 {
margin-top: 0;
font-size: 1.125em;
font-weight: 500;
color: #127BA2;
margin-bottom: 0.125em !important;
}
.localist-widget .event-item .date_range,
.localist-widget .event-item .time_range {
color: #555;
font-size: 14px;
font-style: italic;
display: block;
font-weight: 500;
line-height: 1.25em;
}
.localist-widget time.event-date {
display: block;
margin-right: 20px;
position: relative;
width: 50px;
padding: 0 20px;
}
.localist-widget time.event-date:after {
background-color: #b3b3b3;
content: "";
position: absolute;
right: 0;
top: 0;
height: 46px;
width: 1px;
}
.localist-widget .event-month {
color: #000;
font-size: 18px;
text-align: center;
}
.localist-widget .event-day {
font-family: "Karla", helvetica, arial, sans-serif;
font-size: 38px;
text-align: center;
}
@media (min-width: 36em) and (max-width: 60em) {
.localist-widget li.event-item {
margin-bottom: 48px;
}
.localist-widget .event-list.two-col li.event-item {
width: 42.30769%;
float: left;
margin-right: 3.84615%;
margin-bottom: 48px;
}
.localist-widget .event-list.two-col li.event-item:nth-child(odd) {
margin-right: 8.57143%;
}
}
@media (min-width: 60em) {
.localist-widget li.event-item {
margin-bottom: 48px;
}
.localist-widget .event-list.two-col li.event-item {
width: 42.30769%;
float: left;
margin-right: 3.84615%;
margin-bottom: 48px;
}
.localist-widget .event-list.two-col li.event-item:nth-child(odd) {
margin-right: 8.57143%;
}
}
.localist-widget .event-list.dark time.event-date:after {
background-color: rgba(255, 255, 255, 0.2);
}
.localist-widget .event-list.dark .event-month {
color: #8b9c9f;
}
.localist-widget .event-list.dark a.event-name {
color: #fff;
}
.localist-widget .event-list.dark a.event-name:hover {
color: #006699;
text-decoration: none;
}
.localist-widget .event-list.dark a.event-name em {
color: #869699;
}
.localist-widget .event-item .venue {
margin: 0.125em 0;
display: block;
}
</style>
{% endunless %}
</head>
<body>
<div class="localist-widget">
<ol class="event-list two-col">
{% if events == empty %}
<li class="event-item">
<strong>{{ site.snippets.widget_nocontent }}</strong>
</li>
{% else %}
{% for event in events %}
<li class="event-item" itemscope itemtype="http://schema.org/Event">
<time class="event-date" itemprop="startDate">
<span class="event-month">{% event_time event date_format:'M' time_format:"" short_time_format:"" %}</span>
<span class="event-day">{% event_time event date_format:'j' time_format:"" short_time_format:"" %}</span>
</time>
<a href="{{ event.url }}">
<h4>{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name }}</h4>
{% if event.start_time %}
<span class="time_range">{% event_time event order:"time" time_format:settings.time_format short_time_format:settings.short_time_format minutes:yes %}{% if event.next_instance.end_time %} to {{ event.ends_at | date:site.format.time_long }}{% endif %}</span>
{% endif %}
{% if event.location_name %}
<span class="venue">{{ event.location_name }}</span>
{% endif %}
{% if show_date_ranges and event.has_many_future_instances %}
<span class="date_range">Through {{ event.last_instance.starts_at | date:settings.date_format }}</span>
{% endif %}
</a>
</li>
{% endfor %}
{% endif %}
</ol>
</div>
</body>
</html>

Widget 2

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Widget </title>
    <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap"
    rel="stylesheet">
    <style>
    /* ENTIRE LISTING */
    .localist-widget-horizontal div.Localist > li {
    float: left;
    margin-right: 20px;
    margin-left: 20px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    max-width: 200px;
    height: 230px;
    list-style: none;
    }

    .localist-widget-horizontal #lclst_widget_footer > a > img {
    display: none;
    }
  /* MONTH */
.localist-widget-horizontal .date > div.month {
background-color: #127BA2;
padding-top: 5px;
padding-bottom: 5px;
text-transform: uppercase;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}.   
/* DAY */

    .localist-widget-horizontal .date > div.day {
    background-color: #444444;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 30px;
    color: white;
    }
    /* CARD */

    .localist-widget-horizontal .date {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    color: white;
    font-family: "Karla", helvetica, arial, sans-serif;
    }
    /* TITLE */
    .localist-widget-horizontal div.Localist > li a > h4 {
    color: black;
    font-family: "Karla", helvetica, arial, sans-serif;
    font-size: 18px;
    width: 100%;
    margin-bottom: 15px;
    font-weight: normal;
    }

    .localist-widget-horizontal div.Localist > li a > h4:hover {
    color: #127BA2;
    }
 
    /* PLACE & TIME with improved contrast */
    .localist-widget-horizontal div.Localist > li > a > span.time,
    .localist-widget-horizontal div.Localist > li > a > span.venue {
    font-family: 'Raleway', sans-serif;
    color: #2b6b90; /* Darker blue to improve contrast */
    font-size: 14px;
    width: 100%;

    }
    .localist-widget-horizontal div.Localist > li > a > span.time:hover,
    .localist-widget-horizontal div.Localist > li > a > span.venue:hover
    {
    color: #127BA2;
    }
   /* LINKS */
    .localist-widget-horizontal div.Localist > li > a {
    text-decoration: none;
    }
    </style>
    </head>
    <body>
    <ul class="localist-widget-horizontal">
    {% unless settings.style == 'none' %}
    {% partial 'platform_styles' %}
    {% endunless %}
    {% if settings.expand_descriptions %}
    <script type="text/javascript">
    mc_$$ID$$_util = (function() {
    function getEl(el) {
    if ('tagName' in el) return el;
    return document.getElementById(el);
    }
    function hasClass(el, klass) {
    if (!el) return;
    var classes = el.className;
    return (classes.length > 0 && (classes == klass ||
    new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
    }
    return null;
    }
    function toggleVisibility(el) {
    var e;
    if (e = getEl(el)) {
    if (e.style.display == 'none') {
    e.style.display = '';
    } else {
    e.style.display = 'none';
    }
    }
    return {
    toggle: function (el) {
    toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
    }
    };
    })();
    </script>

    {% endif %}
    {% if current_user %}<!-- logged in -->{% endif %}
    <div class="Localist">
    {% for event in events %}
    <li>
    <div class="date">
    <div class="month">{% event_time event date_format:'M' time_format:""
    short_time_format:"" %}</div>
    <div class="day">{% event_time event date_format:'j' time_format:""
    short_time_format:"" %}</div>
    </div>
    <a href="{{ event.url }}">
    <h4>{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status]
    }}: {% endunless %}
    {{ event.name | truncate:50 }}
    </h4>

    {% if event.start_time %}<span class="time">{% event_time event date_format:'g'
    time_format:"" short_time_format:"" %}:{% event_time event date_format:'ia'
    time_format:"" short_time_format:"" %}</span>{% endif %}
    {% if event.location != blank %}<span class="venue">{{ event.location_name
    }}</span>{% endif %}
    </a>
    {% if settings.expand_descriptions %}<div class="lww" style="display:none">{%
    endif %}
    </li>
    {% endfor %}
    </div>
    </ul>
    </body>
    </html>

Widget 3

HTML

<!DOCTYPE html>
<html lang="en"> 
<style>
/* BODY */
ul.localist-widget-eds {
margin-left: 0;
padding-left: 2%;
}
.localist-widget-eds {
max-width: 850px;
}
.localist-widget-eds li {
list-style: none;
background-color: #ffffff;
text-decoration: none;
width: 100%;
height: auto;
padding-bottom: 0.8em;
margin: 0 10px 1em 0;
min-height: 4em;
}
.localist-widget-eds a {
    text-decoration: none;
}
/* MONTH & DATE SQUARE */
body>ul>li>div.localist-dateblock {
    border: 1px solid #CCCCCC;
}
.localist-widget-eds div.localist-day {
    color: #555555;
    background-color: #efefef;
    font-size: 1.4em;
    font-family: "Karla",helvetica,arial,sans-serif;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    padding-top: 10px;
    padding-bottom: 10px;
}
.localist-widget-eds div.localist-month {
    text-decoration: none;
    color: #ffffff;
    background-color: #127BA2;
    font-size: 1em;
  font-family: "Karla",helvetica,arial,sans-serif;
    font-weight: 600;
    text-transform: uppercase;
  text-align: center;
    padding-top: 2px;
  padding-bottom: 1px;
}
.localist-widget-eds div.localist-dateblock {
    width: 60px;
    min-height: 50px;
    border: none;
}
/* DETAILS */
.localist-widget-eds div.localist-secondblock {
    margin-top: -75px;
  margin-left: 75px;
    min-height: 44px;
    max-width: 20em;
  padding-top: 13px;
}
.localist-widget-eds div.localist-otherdetails {
color: #424242;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: normal;
text-decoration: none;
font-size: 13px;
width: auto;
margin: 6px 0 0;
max-width: 24em;
overflow: auto;
}
.localist-otherdetails>div {
    float: left;
    clear: right;
}
.localist-otherdetails>div:first-of-type {
    margin-right: 4%;
}
.localist-otherdetails i {
    color: #9e9e9e;
}
.fas .fa-map-marker-alt {
    padding-left: 2px;
}
.localist-time {
    display: inline-block;
}
.localist-venue {
    display: inline-block;
    margin-left: 0;
}
/* TITLE */
div.localist-secondblock>div.localist-title>h4 {
    margin: 0;
    text-decoration: none;
}
div.localist-title h4 a {
    color: #127BA2;
text-decoration: none;
    text-transform: none;
    font-family: "Karla",helvetica,arial,sans-serif;
    overflow: hidden;
  text-overflow: ellipsis;
    max-width: 20px;
    font-size: 16px;
    font-weight: 600;
}
.localist-widget-eds div.localist-titlespace {
    margin-bottom: 10px;
    background-color: #ffffff;
  text-align: center;
    font-size: 18px;
font-family: "Karla",helvetica,arial,sans-serif;
}
</style>
 <title>Widget 3</title> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<ul class="localist-widget-eds">
{% unless settings.style == 'none' %}
  {% partial 'platform_styles' %}
{% endunless %}

{% if settings.expand_descriptions %}
<script type="text/javascript">
    mc_$$ID$$_util = (function() {
      function getEl(el) {
      if('tagName' in el) return el;
        return document.getElementById(el);
      }

    function upTag(el, tag) {
        var e;
  if(e = getEl(el)) {
          while(e) {
  if(e.tagName.toLowerCase() == tag.toLowerCase()) return e;
    e = e.parentNode;
          }
  return null;
        } else {
          return null;
        }
      }
    function hasClass(el, klass) {
      if(!el) return;
        var classes = el.className;
  return (classes.length > 0 && (classes == klass ||
      new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}
      function downClass(el, tag, klass) {
        var e = getEl(el);
    if(!e) return null;
var els = e.getElementsByTagName(tag);
        var i = 0;
  for(i = 0; i < els.length; i++) {
          e = els[i];
    if(hasClass(e, klass)) return e;
}
      return null;
}
      function toggleVisibility(el) {
        var e;
if(e = getEl(el)) {
          if(e.style.display == 'none') {
            e.style.display = '';
      } else {
    e.style.display = 'none';
   }
  }
}
    return {
        toggle: function(el) {
          toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
  }
 };
    })();
  </script>
{% endif %}
{% if current_user %}<!-- logged in -->{% endif
{% for event in events %}
  <li>
<div class="localist-dateblock">
<div class="localist-month">{% event_time event date_format:'M' include_other_year:false order:'date' %} </div>
<div class="localist-day">{% event_time event date_format:'j' include_other_year:false order:'date' %} </div>
</div>
<div class="localist-secondblock">
<div class="localist-title">
<h4> 
<a class="cover" href="{{ event.url }}" target="_blank">{{ event.name }}</a></h4>
</div>
<div class="localist-otherdetails">
{% if event.start_time %}<div class="localist-time"><i class="far fa-clock"></i>
  {% event_time event time_format:'g:ia' order:'time' optional_minutes:false %}</div>{% endif %}
{% if event.place %}<div class="localist-venue"><i class="fas fa-map-marker-alt"></i>
  {{ event.location_name }}</div>{% endif %}
</div>
</div>
  </li>
{% endfor %}

<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->
</ul>

Widget 4

HTML

<!DOCTYPE html>
<html lang="en">
<title> Widget </title>
{% unless settings.style == 'none' %}
{% comment %}
#################################
START MAKE COLOR/FONT CHANGES HERE
you can change colors and fonts in this section rather than modifying CSS directly below
{% endcomment %}
{% assign link_color = '#444' %}
{% assign link_hover = '#444' %}
{% assign button_color = '#127ba2' %}
{% assign button_hover = '#ddd' %}
{% assign button_font_color = '#fff' %}
{% assign font_family = '"Karla",Helvetica,arial,sans-serif' %}
{% assign im_going_text = "I'm Interested" %}
{% comment %}
END MAKE COLOR/FONT CHANGES HERE
#################################
{% endcomment %}
<style type="text/css">
/* container for the widget */
.localist_widget_container {
width: 100%;
background-color: #fff;
overflow: hidden;
}
/* all links within an event item */
.localist_widget_container li a {
text-decoration: none;
color: {{ link_color }};
}
/* all hovered links within an event item */
.localist_widget_container li a:hover {
text-decoration: underline;
color: {{ link_hover }};
}
/* container for the list of event items */
.localist_widget_container ul.lw_event_list {
list-style: none;
padding: 0;
max-width: 960px;
}
/* container for each event item */
.localist_widget_container li.lw_event_item {
margin: 5px 0;
border: 1px solid #ddd;
font: 200 14px/20px {{ font_family }};
background: #fafafa;
overflow: hidden;
float: left;
max-width: 300px;
height: 425px;
}
/* container for event photo */
.localist_widget_container a.lw_event_item_image {
display: block;
float: none;
overflow: hidden;
max-width: none;
position: relative;
}
/* event photo (makes it center on the image if dimensions grow/shrink) */
.localist_widget_container a.lw_event_item_image img {
top: 50%;
left: 50%;
position: relative;
transform: translate(-50%, 0%);
}
/* container for non-image content */
.localist_widget_container div.lw_event_content {
padding: 10px 20px;
overflow: hidden;
vertical-align: text-top;
float: left;
}
/* event title */
.localist_widget_container div.lw_event_item_title {
color: #444;
font-family: "Karla", helvetica, arial, sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 20px;
text-align: center;
padding-bottom: 10px;
}
/* event description */
.localist_widget_container div.lw_event_item_description {
font-size: 12px;
}
/* container for event meta data */
.localist_widget_container .lw_event_meta {
width: 100%;
float: none;
overflow: hidden;
}
/* event location and time shared code */
.localist_widget_container div.lw_event_item_location,
.localist_widget_container div.lw_event_item_time {
font-size: 12px;
text-transform: uppercase;
margin-left: 15px;
}
/* event location overrides */
.localist_widget_container div.lw_event_item_location {
margin-top: 10px;
}
/* event date */
.localist_widget_container span.lw_event_item_date {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
position: absolute;
bottom: 0;
left: 0;
padding: 5px 0px;
width: 100%;
font-size: 12px;
text-transform: uppercase;
text-align: center;
}
/* event cta */
.localist_widget_container .action_button a {
display: block;
background: {{ button_color }};
color: {{ button_font_color }};
line-height: 40px;
text-decoration: none;
text-align: center;
margin-top: 10px;
max-width: none;
font-weight: bold;
}
/* event cta hover */
.localist_widget_container .action_button a:hover {
text-decoration: none;
background-color: {{ button_hover }};
}
.localist_widget_container .lw_view_all_cta a {
display: inline-block;
text-align: center;
font: 200 14px/20px {{ font_family }};
float: none;
width: 100%;
}
/* icons */
.localist_widget_container .pin, .localist_widget_container .pin:after {
position: absolute;
}
.localist_widget_container .pin {
width: 10px;
height: 10px;
border-radius: 50% 50% 50% 0;
background: #127BA2;
transform: rotate(-45deg);
float: left;
margin-top: 13px;
}
.localist_widget_container .pin:after {
content: "";
width: 4px;
height: 4px;
margin: 3px 0 0 3px;
background: #fff;
border-radius: 50%;
}
.localist_widget_container .clock {
float: left;
margin-top: 4px;
border: 2px solid #127ba2;
display: inline-block;
position: relative;
vertical-align: top;
border-radius: 100%;
height: 7px;
width: 7px;
}
.localist_widget_container .clock:after, .localist_widget_container .clock:before {
background: #127ba2;
border: 1px solid #127ba2;
content: '';
position: absolute;
border-left: none;
width: 0;
}
.localist_widget_container .clock:after {
height: 2px;
left: 3px;
top: 0;
}
.localist_widget_container .clock:before {
height: 3px;
left: 5px;
top: 1px;
transform: rotate(90deg);
}
</style>
{% endunless %}
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<div class="localist_widget_wrapper cardCarousel">
<div class="localist_widget_container">
<ul class="lw lw_event_list">
{% if events == empty %}
<li class="lw lw_event_item nocontent">
<div class="lw_event_item_title">{{ site.snippets.widget_nocontent }}</div>
</li>
{% else %}
{% for event in events %}
<li class="lw lw_event_item">
{% if settings.hide_images != true %}
<a class="lw_event_item_image" href="{{ event.url }}" {% if settings.target_blank %} target="_blank" {% endif %} {% if settings.expand_descriptions %} onclick="mc_$$ID$$_util.toggle(this); return false;" {% endif %}>
{% photo_for event size:square_300 width:150 height:150 %}
<span class="lw_event_item_date">
{% event_time event order:"date" date_format:settings.date_format time_format:settings.time_format short_time_format:settings.short_time_format %}
{% if show_date_ranges and event.has_many_future_instances %}
- {{ event.last_instance.starts_at | date:settings.date_format }}
{% endif %}
</span>
</a>
{% endif %}
<div class="lw_event_content">
<div class="lw_event_item_title">
<a href="{{ event.url }}" {% if settings.target_blank %} target="_blank" {% endif %} {% if settings.expand_descriptions %} onclick="mc_$$ID$$_util.toggle(this); return false;" {% endif %}>
{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name | truncate: 30 }}
</a>
</div>
{% if settings.expand_descriptions %}<div class="lww" style="display:none">{% endif %}
{% unless settings.hide_descriptions %}
<div class="lw_event_item_description">
{% item_description event %}
{% if settings.show_keywords %}
<br/>{{ event.keywords | join:", " }}
{% endif %}
</div>
{% endunless %}
{% if settings.expand_descriptions %}</div>{% endif %}
<div class="lw_event_meta">
{% if event.event_type == 'event' %}
{% if event.place != empty and event.location_name != blank %}
<div class="pin"></div>
<div class="lw_event_item_location">
{% if event.place %}
<a href="{{ event.place.url }}" {% if settings.target_blank %} target="_blank" {% endif %}>{{ event.place.visible_name }}</a>
{% else %}
<a href="{{ event.url }}" {% if settings.target_blank %} target="_blank" {% endif %}>{{ event.location_name }}</a>
{% endif %}
</div>
{% endif %}
{% endif %}
{% if settings.show_times %}
{% if event.start_time %}
<div class="clock"></div>
<div class="lw_event_item_time">
{% event_time event order:"time" time_format:settings.time_format short_time_format:settings.short_time_format %}
</div>
{% endif %}
{% endif %}
&nbsp;
</div>
<div class="lw_event_meta">
<div class="action_button">
<a href="{{ event.url }}" aria-label="View details about {{ event.name }}" {% if settings.target_blank %} target="_blank" {% endif %}>{{ im_going_text }}</a>
</div>
</div>
</div>
</li>
{% endfor %}
{% endif %}
{% if settings.show_view_all_cta %}
<li class="lw lw_view_all_cta"><a href="{% relative_calendar_url %}">View all events...</a></li>
{% endif %}
</ul>
</div>
</div>

Widget 5

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Widget</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
ul.localist-widget-customer {
padding: 0;
margin: 0;
line-height: initial;
}
body > ul > li > div.infoblock > h4 {
margin-top: 15px;
margin-bottom: 10px;
}
.localist-widget-customer .lwd {
margin-right: auto;
margin-left: auto;
width: 100%;
height: auto;
}
.localist-widget-customer li {
list-style: none;
float: left;
width: 300px;
margin-left: 15px;
margin-right: 15px;
min-height: 376px;
margin-bottom: 50px;
border: 1px solid #ccc;
height: 425px;
}
h4 {
color: #000;
text-decoration: none;
margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
font-family: "Karla", Helvetica, Arial, sans-serif;
font-weight: normal;
}
.localist-widget-customer a {
text-decoration: none;
}
@media only screen and (max-width: 479px) {
.localist-widget-customer li {
margin-right: 5px;
width: 100% !important;
}
}
span.day, span.month {
display: inline-block;
font-size: 15px;
font-family: "Karla", Helvetica, Arial, sans-serif;
}
div.date-label {
padding: 10px;
background-color: #127BA2;
text-align: center !important;
z-index: 1;
width: auto;
padding: 15px 0px;
color: #fff !important;
}
body > ul > li > div.date-label > span {
float: none;
color: #fff !important;
font-family: "Karla", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}
.lwd {
padding-top: 0px !important;
}
.lwi0 {
padding: 0px !important;
max-height: 500px;
}
body > ul > li > div.infoblock > time {
font-weight: 600;
color: #000;
font-family: "Karla", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: normal;
}
dd.event-location {
margin-left: 0px;
font-family: "Karla", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #000;
font-size: 16px;
}
div.infoblock {
padding: 0px 18px;
}
.localist-widget-customer li:hover {
background-color: #127BA2;
}
ul.localist-widget-customer li:hover .infoblock h4,
ul.localist-widget-customer li:hover .infoblock .event-location,
ul.localist-widget-customer li:hover .infoblock time {
color: white;
}
.lwn0 {
float: none !important;
font-size: 16px !important;
color: #fff !important;
text-transform: uppercase !important;
}
.lclst_widget_footer {
display: none;
}
</style>
</head>
<body>
<ul class="localist-widget-customer">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
{% if current_user %}<!-- logged in -->{% endif %}
{% for event in events %}
<li>
<a href="{{ event.url }}" {% if settings.target_blank %} target="_blank"{% endif %}>
<div class="date-label{% if event.is_past %} past-date{% endif %}">
<span class="lwn0">
{% event_time event order:"date" date_format:settings.date_format time_format:settings.time_format short_time_format:settings.short_time_format %}
{% if show_date_ranges and event.has_many_future_instances %}
- {{ event.last_instance.starts_at | date:settings.date_format }}
{% endif %}
</span>
</div>
<div class="lwd">
<span class="lwi0">{% photo_for event size:big_300 %}</span>
</div>
<div class="infoblock">
<h4>
{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}
{{ event.name | truncate:30 }}
</h4>
<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% event_time event order:"time" date_format:"l, F j" date_format_year:"l, F j, Y" time_format: "g:i a" short_time_format:"g:i a" separator:" <br> " %}
</time>
{% if event.place.visible_name != blank or event.location_name != blank %}
<dl>
<dt>Location:</dt>
<dd class="event-location">
{% if event.place.visible_name != blank %}
{{ event.place.visible_name }}
{% else %}
{{ event.location_name }}
{% endif %}
</dd>
</dl>
{% endif %}
</div>
</a>
</li>
{% endfor %}
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
</ul>
</body>
</html>

Widget 6

HTML

<style>
/* BODY */
ul.localist-widget-eds {margin-left: 0px;
}
.localist-widget-eds {max-width: 850px;
}
.localist-widget-eds li {
list-style: none;
float: left;
margin-left: 0px;
margin-right: 20px;
background-color: #ffffff;
margin-bottom: 15px;
width: 250px;
height: 100px;
text-decoration: none;
}
.localist-widget-eds a {text-decoration: none; }
/* MONTH & DATE SQUARE */
body > ul > li > div.localist-dateblock {border: 1px solid #C1C6B8; }
.localist-widget-eds div.localist-day {
color: #494949;
background-color: #ffffff;
font-size: 30px;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: normal;
text-align: center;
text-decoration: none;
margin-bottom: 5px;
line-height: 1;}

.localist-widget-eds div.localist-month {
text-decoration: none;
color: #494949;
background-color: #ffffff;
font-size: 18px;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: normal;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
}
.localist-widget-eds div.localist-dateblock {
width: 60px;
min-height: 50px;
border: 1px solid #C1C6B8;
}
/* DETAILS */
.localist-widget-eds div.localist-secondblock {
margin-top: -63px;
margin-left: 75px;
min-height: 44px;
}
.localist-widget-eds div.localist-otherdetails {
color: #494949;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 16px;
font-weight: normal;
width: 75%;
text-decoration: none;
margin-bottom: 2px;
}
/* TITLE */
div.localist-secondblock > div.localist-title > h4 {margin: 0px;
text-decoration: none;}
div.localist-title h4 a {
color: #3a90b0 !important;
text-decoration: none;
text-transform: none;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 18px;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
max-width: 20px;
}
.localist-widget-eds div.localist-titlespace {
margin-bottom: 10px;
background-color: #ffffff;
text-align: center;
font-size: 18px;
font-family: "Karla",helvetica,arial,sans-serif;
}
</style>
<html lang="en">
<title>Widget</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">


<ul class="localist-widget-eds">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el;
return document.getElementById(el);
}
function upTag(el, tag) {
var e;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e;
e = e.parentNode;
}
return null;
} else {
return null;
}
}
function hasClass(el, klass) {
if(!el) return;
var classes = el.className;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}
function downClass(el, tag, klass) {
var e = getEl(el);
if(!e) return null;
var els = e.getElementsByTagName(tag);
var i = 0;
for(i = 0; i < els.length; i++) {
e = els[i];
if(hasClass(e, klass)) return e;
}
return null;
}
function toggleVisibility(el) {
var e;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
}
return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
}
};
})();
</script>
{% endif %}
{% if current_user %}<!-- logged in -->{% endif %}
{% for event in events %}
<li>
<div class="localist-dateblock">
<div class="localist-month">{% event_time event date_format:'M' include_other_year:false order:'date' %} </div>
<div class="localist-day">{% event_time event date_format:'j' include_other_year:false order:'date' %} </div>
</div>
<div class="localist-secondblock">
<div class="localist-title">
<h4>
<a href="{{ event.url }}">{{ event.name | truncate:36 }}
</a></h4>
</div>
<div class="localist-otherdetails">
{% if event.start_time %}<span class="localist-time">{% event_time event time_format:'g:ia' order:'time' optional_minutes:false %}</span>{% endif %}
<div class="localist-venue">{{ event.location_name }}</div>
</div>
</div>
</li>
{% endfor %}
</ul>

Widget 7

HTML

<style>
ul.localist-widget-customer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14.0625rem, 1fr));
grid-gap: 1.25rem;
margin: 0;
padding: 0;
}
li.widget-event {
list-style-type: none !important;
position: relative;
display: flex;
flex-direction: column;
line-height: 1.25;
border: 1px solid #c8c8c8;
max-width: 20rem;
height: inherit;
}
div.widget-content {
padding: 20px !important;
height: 100%;
}
div.widget-content > div.title > h4 {
font-size: 1.266rem;
line-height: 1.3;
margin: 0 0 10px 0 !important;
}

div.title > h4 > a {
font-family: "Karla", helvetica, arial, sans-serif;
font-weight: 700 !important;
font-size: 18px !important;
text-decoration: none !important;
color: #127BA2;
}
div.title > h4 > a:hover {
text-decoration: underline !important;
}

div.des {
font-size: 16px !important;
font-weight: 400 !important;
color: #555 !important;
font-family: "Karla", helvetica, arial, sans-serif;
}
div.time {
font-size: 16px !important;
font-weight: 600 !important;
color: #555 !important;
font-family: "Karla", helvetica, arial, sans-serif;
margin-top: 16px !important;
border-top: 1px solid #c8c8c8;
padding-top: 0.8125rem;
}
div.place {
margin-top: 5px;
}
div.place > div > a {
text-decoration: underline;
font-family: "Karla", helvetica, arial, sans-serif;
font-size: 16px !important;
color: #127BA2;
}
div.place > div > a:hover {
text-decoration: underline;
}
div.place > div > i {
color: #d01c29 !important;
}
div.place > div > i:hover {
color: #A51417 !important;
}
div.widget-photo-space > span > a > img {
width: 100%;
height: auto;
}
.key span {
display: block;
line-height: 1;
}
.key .day {
font-size: 20px;
letter-spacing: -1px;
font-family: "Karla", helvetica, arial, sans-serif;
}
.key .month {
font-size: 14px;
letter-spacing: 1px;
font-family: "Karla", helvetica, arial, sans-serif;
}
.key {
background-color: #127BA2;
color: #fff;
display: block;
font-weight: 600;
position: absolute;
text-align: center;
text-transform: uppercase;
padding: 10px;
}
</style>
<html lang="en">
<title>Widget</title>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<ul class="localist-widget-customer">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if ('tagName' in el) return el;
return document.getElementById(el);
}
function upTag(el, tag) {
var e;
if (e = getEl(el)) {
while (e) {
if (e.tagName.toLowerCase() == tag.toLowerCase()) return e;
e = e.parentNode;
}
return null;
} else {
return null;
}
}
function hasClass(el, klass) {
if (!el) return;
var classes = el.className;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}

function downClass(el, tag, klass) {
var e = getEl(el);
if (!e) return null;
var els = e.getElementsByTagName(tag);
var i = 0;
for (i = 0; i < els.length; i++) {
e = els[i];
if (hasClass(e, klass)) return e;
}
return null;
}

function toggleVisibility(el) {
var e;
if (e = getEl(el)) {
if (e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
}

return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
}
};
})();
</script>
{% endif %}

{% if current_user %}<!-- logged in -->{% endif %}

{% for event in events %}
<li class="widget-event">
<div class="key">
<div class="key-container">
<span class="day">{{ event.starts_at | date: "%d" }}</span>
<span class="month">{{ event.starts_at | date: "%b" }}</span>
</div>
</div>
<div class="widget-photo-space">
<span class="widget-photo"><a href="{{ event.url }}">{% photo_for event size:big_300 %}</a></span>
</div>
<div class="widget-content">
<div class="title">
<h4><a href="{{ event.url }}">{{ event.name }}</a></h4>
</div>
<div class="des">{% item_description event length:130 %}</div>
<div class="time">
<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% event_time event order:"date,time" date_format:"l, F j" date_format_year:"l, F j, Y" time_format: "g:i a" short_time_format:"g:i a" separator:" | " %}
</time>
</div>
<div class="place">
{% if event.place != empty and event.location_name != blank %}
<div class="lw_event_item_location">
{% if event.place %}
<a href="{{ event.place.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.place.visible_name }}</a>
{% else %}
<a href="{{ event.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.location_name }}</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
</li>
{% endfor %}

<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->
</ul>

Widget 8

HTML

{% comment %}
#################################
START MAKE COLOR/FONT CHANGES HERE
you can change colors and fonts in this section rather than modifying CSS directly below
{% endcomment %}

{% assign date_color = '#127BA2' %}
{% assign card_hover = '127BA2' %}

{% assign font_family = '"Karla",helvetica,arial,sans-serif' %}
{% assign desc_font_family = '"Karla",helvetica,arial,sans-serif' %}

{% comment %}
END MAKE COLOR/FONT CHANGES HERE
#################################
{% endcomment %}

{% capture first_transition %}
  -webkit-transition: opacity .10s ease-out,left .5s ease-out;
  -moz-transition: opacity .10s ease-out,left .5s ease-out;
  transition: opacity .10s ease-out,left .5s ease-out;
{% endcapture %}

{% capture second_transition %}
  -webkit-transition: all .10s ease-out;
  -moz-transition: all .10s ease-out;
  transition: all .10s ease-out;
{% endcapture %}

{% capture second_transition %}
  -webkit-transition: all .10s ease-out;
  -moz-transition: all .10s ease-out;
  transition: all .10s ease-out;
{% endcapture %}

{% capture third_transition %}
  -webkit-transition: opacity .10s .10s ease-out,-webkit-transform .10s .10s ease-out,visibility .10s .10s ease-out;
  -moz-transition: opacity .10s .10s ease-out,-moz-transform .10s .10s ease-out,visibility .10s .10s ease-out;
  transition: opacity .10s .10s ease-out,transform .10s .10s ease-out,visibility .10s .10s ease-out;
{% endcapture %}

{% capture image_transform %}
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
{% endcapture %}

{% capture second_image_transform %}
  -webkit-transform: scale(1.75) translateX(-30%) translateY(16%);
  -moz-transform: scale(1.75) translateX(-30%) translateY(16%);
  -ms-transform: scale(1.75) translateX(-30%) translateY(16%);
  -o-transform: scale(1.75) translateX(-30%) translateY(16%);
  transform: scale(1.75) translateX(-30%) translateY(16%);
{% endcapture %}
<html lang="en">
<title>Widget</title>
<!-- begin code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">

.CardEvents {
  background:none;
}
.localist-widget-hl{
  max-width:1360px !important;
  width: 100% !important;
  clear:both;
  display:table;
}
.localist-widget-hl ol {
  margin: 0;
padding: 0;
  list-style: none;
  font-family: "Karla",helvetica,arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.localist-widget-hl .event-list {
  clear: both;
  position: relative;
  {{ first_transition }}
}

.localist-widget-hl li.event {
  {{ third_transition }}
}

.localist-widget-hl .event-list li {
    margin: 20px 1% !important;
    width: 31%;
    float: left;
    height: auto;
}

.localist-widget-hl .event-card {
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  background: transparent;
  color: #989694;
  font-size: .8125rem;
}

.localist-widget-hl .event-overview {
  {{ second_transition }}
}

.localist-widget-hl .event-details {
  background: {{ card_hover }};
  color: #fff;
  width: 100%;
  height: 100%;
  left: 0;
  opacity: 0;
  padding: 20px;
  position: absolute;
  top: 0;
  visibility: hidden;
  {{ second_transition }}
}

.localist-widget-hl dl {
  border: 0;
  font-family: "Karla",helvetica,arial,sans-serif;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

.localist-widget-hl .event-specs dt {
  background-position: center;
  background-repeat: no-repeat;
  clear: both;
  margin-right: 15px;
  overflow: hidden;
  text-indent: -9999px;
  width: 40px;
  float: left;
}

.localist-widget-hl .event-specs dt,.event-specs dd {
  padding: 14px 0 17px;
}

.localist-widget-hl .event-specs dd {
  border-top: 1px solid #002948;
  position: relative;
  margin: 0;
}

.localist-widget-hl .event-detail-title {
  display: block;
  line-height: 1.1875em;
  margin-bottom: 1.5em;
  font-size: 13px;
}

.localist-widget-hl .event-specs dd:before {
  position: absolute;
  top: 0;
  left: 40px;
  width: 1px;
  height: 100%;
  background: #002948;
  content: '';
}

.localist-widget-hl strong {
  font-weight: 700;
}

.localist-widget-hl .event-specs {
  border-bottom: 1px solid #002948;
  border-width: 1px 0;
  line-height: normal;
  overflow: hidden;
}

.localist-widget-hl .cover {
  height: 100%;
  left: 0;
  position: absolute;
  text-indent: -9999px;
  top: 0;
  width: 100%;
}

.localist-widget-hl .event-card header {
  overflow: hidden;
  position: relative;
}

.localist-widget-hl .event-card:hover .event-details {
  opacity: 1;
  visibility: visible;
}
.localist-widget-hl .event-list .event-overview .content {
  height: 7.615384615em;
  border: 1px solid #efefef;
  border-width: 0 1px;
  padding: 23px 20px 19px;
}

.localist-widget-hl .event-card:hover .event-title,.localist-widget-hl .event-card:hover .event-short-date,.localist-widget-hl .event-card:hover .content:before {
  opacity: 0;
  text-decoration: none;
  visibility: hidden;
}
.localist-widget-hl .event-card .content:before {
  bottom: 0;
  content: '';
  height: 17px;
  left: 1px;
  position: absolute;
  right: 1px;
}
.localist-widget-hl .event-card:hover .event-title,.localist-widget-hl .event-card:hover .event--date,.localist-widget-hl .event-card:hover .content:before {
  opacity: 0;
  text-decoration: none;
  visibility: hidden;
}

.localist-widget-hl .event-card .content p {
  overflow: hidden;
  margin: 0;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  line-height: 1.5em;
  font-family: "Karla",helvetica,arial,sans-serif;
}
.localist-widget-hl .event-title {
  background: rgba(0,0,0,0.5) left top !important;
  color: #fff !important;
  font-weight: 800 !important;
  overflow: hidden !important;
  padding: 7px 20px 5px !important;
  /*text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;*/
  z-index: 1;
  line-height: 1.875rem !important;
  font-size: .8125rem  !important;
  font-family: "Karla",helvetica,arial,sans-serif;
  margin: 0 !important;
  outline: 0 !important;
  vertical-align: baseline !important;
  border: 0 !important;
    text-transform: capitalize !important;
    margin: 0 !important;
  {{ second_transition }}
}
.localist-widget-hl .event-short-date {
  background: {{ date_color }};
  position: absolute;
  width: 2.777777778em;
  height: 2.777777778em;
  top: 0;
  left: 0;
  z-index: 1;
  padding: .333333333em 0 0;
  color: #fff;
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.111111111em;
  font-family: : "Karla",helvetica,arial,sans-serif;
  text-align: center;
  text-transform: uppercase;
  {{ second_transition }}
}
.event-title-short-date .event-title, .event-title-short-date .event-short-date, .event-title-short-date .event-title-location-time{
  position:static !important;
  float:left;
}
.event-title-short-date {
    background: #071B2E;
    color: #ffffff;
    width: 100%;
    float: right;
    padding: 10px;
    position: relative;
    margin: 0;
    clear: both;
    border-bottom: 5px solid #127BA2;
}
.event-title-short-date .event-title{
  width:100%;
  background:transparent !important;
  padding: 0 !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
}
.event-title-short-date .event-short-date{
  width: 60px !important;
  background: rgb(239, 239, 239) !important;
  color: #002949 !important;
  height: auto !important;
  padding: 8px 0 10px !important;
}
.event-title-short-date .event-title-location-time{
  width:75% !important;
  padding:0 0 0 15px;
}
.localist-widget-hl .event-card:hover .event-img {
  {{ second_image_transform }}
}
.localist-widget-hl .event-card .content:before {
  position: absolute;
  left: 1px;
  bottom: 0;
  right: 1px;
  content: '';
  height: 17px;
}
.localist-widget-hl .event-img {
  position: relative;
  width: auto;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  display: block;
  left: 50%;
  {{ image_transform }}
  {{ second_transition }}
}
.localist-widget-hl .event-card img {
    display: block;
    height: 230px!important;
    width: 100% !important;
    min-height: auto !important;
    min-width: auto !important;
    transform: inherit !important;
    -webkit-transition: inherit !important;
    position: static;
    object-fit: cover;
    object-position: 100% 0;
}
.localist-widget-hl .event-card:hover .event-title,.localist-widget-hl .event-card:hover .localist-widget-hl .event-short-date,.localist-widget-hl .event-card:hover .content:before {
  opacity: 0;
  text-decoration: none;
  visibility: hidden;
}
.localist-widget-hl .event-card .event-short-date {
  background: {{ date_color }};
}
.localist-widget-hl .event-card:hover header {
  overflow: visible;
}
.localist-widget-hl .event-card:hover {
  border-color: {{ card_hover }};
}
.localist-widget-hl .event-card:hover .event-overview {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.localist-widget-hl .event-list .event-card {
}
.localist-widget-hl .event-short-date abbr {
  display: block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2em;
  border: 0 none;
}
.localist-widget-hl * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.localist-widget-hl .pin {
  width: 17px;
  height: 17px;
  border-radius: 48% 50% 50% 0;
  transform: rotate(-45deg);
  float: left;
  margin-left: 10px;
  text-indent: initial;
  -webkit-backface-visibility: hidden;
}
.localist-widget-hl .pin:after {
  content: "";
  width: 6px;
  height: 6px;
  margin: 5px 0 0 6px;
  background: {{ card_hover }};
  border-radius: 50%;
  position: absolute;
}
.localist-widget-hl .clock {
  float: left;
  margin-top: 0;
  border: 2px solid #fff;
  display: inline-block;
  position: relative;
  vertical-align: top;
  border-radius: 100%;
  height: 18px;
  width: 18px;
  margin-left: 8px;
  -webkit-backface-visibility: hidden;
}
.localist-widget-hl .clock:before {
  height: 4px;
  left: 8px;
  top: 4px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  border: 1px solid #fff;
  content: '';
  position: absolute;
}
.localist-widget-hl .clock:after {
  height: 4px;
  left: 6px;
  top: 2px;
  border: 1px solid #fff;
  content: '';
  position: absolute;
}

/*Card*/

.localist-widget-hl{
  width:100%;
  margin:30px auto;
}
.localist-widget-hl .event-card header:first-child
{
               border:0 !important;
}
.localist-widget-hl .event-details {
   background: #071B2E;
   color:#fff !important;
   border-bottom: 5px solid #127BA2;
}
.localist-widget-hl .event-list .event-overview .content
{
               padding: 17px 17px 10px !important;
color:#000 !important;
}
.localist-widget-hl .event-card .content p {
               overflow:visible !important;
               line-height:24px !important;
               font-size:16px !important;
               font-family: "Karla",helvetica,arial,sans-serif;
}
.calendar-header .localist-widget-hl{
clear:both;
display:table;
z-index: 1;
position: relative;
}
.localist-widget-hl .event-list .event-overview .content{
    /*display: none;*/
}
.localist-widget-hl .event-detail-title {
font-size:16px !important;
}
.localist-widget-hl .event-specs{
font-size:13px !important;
}
.localist-widget-hl .event-short-date abbr{
text-decoration:none !important;
}
.localist-widget-hl .clock{
border: 2px solid #324f69 !important;
}
.localist-widget-hl .clock:before{
border: 1px solid #324f69 !important;
}
.localist-widget-hl .clock:after{
border: 1px solid #324f69 !important;
}
.localist-widget-hl .pin{
background: #324f69 !important;
}
.localist-widget-hl .pin:after {
   background: #fba504 !important;
}
span.start-time.location {
   display: none !important;
}
.calendar-header h2.f-primary-b.f-title-big {
   color: #fff;
   text-align: center;
   margin-bottom: 20px;
font-size:3.23077em !important;
}
.calendar-header h2.f-primary-b.f-title-big a{
   color: #fff;
text-decoration:none;
}
.b-calendar-link{
   color: #fff;
   display: table;
   margin: 0 auto 25px;
   font-size: 17px;
   padding: 10px 10px;
}
.b-calendar-link a {
   text-decoration: none;
   color: #eeb111;
       font-weight: 900;
}
.b-calendar-link a:hover {
   text-decoration: underline;
}
abbr.event-day {
    display: table;
    margin: 0 auto;
    font-size: 9px !important;
}
abbr.event-month {
    font-size: 13px !important;
}
abbr.event-date {
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: center;
    vertical-align: middle;
    position: relative;
    line-height: 0.9 !important;
}
/*End Card*/
@media only screen and (min-width: 90.063em){
.localist-widget-hl .event-list li {
    height:300px;
}
}

@media only screen and (max-width: 920px){
.localist-widget-hl .event-list li {
    height:auto;
}
}
@media only screen and (max-width: 800px){
.event-title-short-date .event-title-location-time {
    width: 70% !important;
    padding: 0 0 0 10px;
}
}
@media only screen and (max-width: 767px){
.localist-widget-hl .event-list li {
    height:auto;
}
}
@media only screen and (max-width: 700px){
.localist-widget-hl .event-list li {
    height:auto !important;
    width:48% !important;
}
}
@media only screen and (max-width: 500px){
.localist-widget-hl .event-list li {
    height:auto !important;
    width:85% !important;
    display:table;
    margin:20px auto 0 !important;
    float:none;
}
}
</style>

<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<script type="text/javascript">
$(document).ready(function(){
  /*if($(window).width()>500){
    var x = $('.event-title'), i=0;
    while(i<x.length){
      x[i].innerText = x[i].innerText.slice(0, 35);
      i++;
    }
    $('<i>&nbsp;...</i>').appendTo($('header .event-title'));
  }*/

  var j=0;
  var z = $('header .event-day');
  while(j<z.length){z[j].innerText = z[j].innerText.slice(0, 3);j++;}
});
</script>

<div class="localist-widget-hl CardEvents">

<ol class="event-list">
        {% if events == empty %}
        <li class="lw lw_event_item nocontent">
            <div class="lw_event_item_title">{{ site.snippets.widget_nocontent }}</div>
        </li>
        {% else %}
            {% for event in events %}
            <li class="event">
                <article class="event-card">
                    <div class="event-overview">
                        <header>
                            {% photo_for event size:big_300 width:250 height:250 class:'event-img' %}
                            <div class="event-title-short-date">
                              <time class="event-short-date" datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
                                <abbr class="event-day">{% event_time event order:"date" date_format:"l" short_time_format:"l" %}</abbr>
                                <abbr class="event-month" title="{% event_time event order:"date" date_format:"F" short_time_format:"F" %}">
                                    {% event_time event order:"date" date_format:"M" date_format_year:"M Y" short_time_format:"M" %}
                                </abbr>
                                <abbr class="event-date">{% event_time event order:"date" date_format:"d" date_format_year:"d" short_time_format:"d" %}</abbr>
                              </time>
                              <div class="event-title-location-time">
                                <h2 class="event-title">{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name | truncate:30 }}</h2>
                                {% if event.place.visible_name != blank or event.location_name != blank %}
                                    <div class="event-location">
                                        {% if event.place.visible_name != blank %}
                                        {{ event.place.visible_name }}
                                        {% else %}
                                        {{ event.location_name }}
                                    </div>
                                    {% endif %}
                                {% endif %}
                                <div class="event-date">
                                    <time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
                                        {% event_time event order:"time" date_format:"l, F j" date_format_year:"l, F j, Y" time_format: "g:i a" short_time_format:"g:i a" separator:" <br> " %}
                                    </time>
                                </div>
                              </div>
                            </div>
                          </header>
                    </div>
                    <div class="event-details">
                        <strong class="event-detail-title">{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name }}</strong>
                        <div class="content"><p>{% item_description event %}</p></div>
                    </div>
                    <a class="cover" href="{{ event.url }}" {% if settings.target_blank %} target="_blank"{% endif %}>{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name }}</a>
                    {% if event.location_name or event.place.visible_name or event.start_time %}
                        <span class="start-time location">
                            {% if event.start_time %}
                            {% event_time event order:"time" time_format:"h:i a" short_time_format:"h:i a" %}
                            {% if event.place.visible_name != blank or event.location_name != blank %} - {% endif %}
                            {% endif %}
                            {% if event.place.visible_name != blank or event.location_name != blank %}
                                {% if event.place.visible_name != blank %}
                                {{ event.place.visible_name }}
                                {% else %}
                                {{ event.location_name }}
                                {% endif %}
                            {% endif %}
                        </span>
                    {% endif %}

</article>
            </li>
            {% endfor %}
        {% endif %}
    </ol>
</div>

Widget 9

HTML

<style>
ul.localist-widget-customer {
padding: 0;
margin: 0;
line-height: initial; }

.localist-widget-customer div.secondblock {
padding: 0px 10px; }


.localist-widget-customer > li > div.titlespace > div > a > h4 {
margin-top: 15px;
margin-bottom: 10px; }

.localist-widget-customer div.day {color: #000000;
background-color: white;
padding: 10px;
font-size: 1em;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: bold;
margin-bottom: 2px;
text-align: center; }

.localist-widget-customer div.day {text-decoration: none !important;
font-family: "Karla",helvetica,arial,sans-serif !important;
}

.localist-widget-customer div.month {text-decoration: none !important;
font-size: 12px;
font-family: "Karla",helvetica,arial,sans-serif !important;
}

.localist-widget-customer div.month {color: #295135;
background-color: white;
padding: 5px;
font-size: 12px;
font-family: "Karla",helvetica,arial,sans-serif !important;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
}

.localist-widget-customer div.otherdetails {color: #295135;
font-family: "Karla",helvetica,arial,sans-serif !important;
font-size: 12px;
font-weight: bold; 
text-decoration: none;
margin-top: 5px;
padding: 0px 10px;
}

.localist-widget-customer div.dateblock {
width: 15%;
}

.localist-widget-customer div.des {
float: none; 
font-family: "Karla",helvetica,arial,sans-serif !important;
color: #000000;
font-size: 12px;
margin-bottom: 10px;
}

.localist-widget-customer .lwd {margin-right: auto;
margin-left: auto;
width: 100%;
height: 215px;
}

.localist-widget-customer li {list-style: none;
float: left;
width: 300px;
margin-left: 15px;
margin-right: 15px;
height: 422px;
min-height: 376px;
margin-bottom: 50px;
border: 1px solid #ccc;
font-family: "Karla",helvetica,arial,sans-serif;
}

body > ul > a > li > div.titlespace > div > h4 {color: #127ba2 !important;
text-decoration: none;
font-family: "Karla",helvetica,arial,sans-serif !important;
text-transform: uppercase; 
}

.localist-widget-customer div.titlespace {
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
font-size: 14px;
font-family: "Karla",helvetica,arial,sans-serif !important;
padding: 0px 10px;
}

.localist-widget-customer a {text-decoration: none; }

@media only screen and (max-width: 479px) {
.localist-widget-customer li {
margin-right: 5px;
width: 100% !important; }}

span.day {
display: block;
font-size: 1.2em;
line-height: 18px;
}

span.month {
font-size: 1em;
line-height: 14px;
}

div.date-label {
padding: 10px;
background-color: rgba(18, 123, 162, .7);
color: white;
text-align: center;
z-index: 1;
float: left;
position: absolute;
text-transform: uppercase;
font-family: "Karla",helvetica,arial,sans-serif !important;
}

.lwd {padding-top: 0px !important; }
.lwi0 {padding: 0px !important; }

.moredates {
padding-left: 10px !important;
text-decoration: underline;
font-size: 0.8em;
}

body > ul > a > li > div.secondblock > span {color: #595959 !important; }  

body > ul > a > li > div.secondblock > div.time {font-weight: 600;
color: #127BA2; }

</style>
 <title> Widget </title>
<html lang="en">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.typekit.net/pqq8aix.css">

<ul class="localist-widget-customer">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}

{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el;
return document.getElementById(el);
}

function upTag(el, tag) {
var e;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e;
e = e.parentNode;
}
return null;
} else {
return null;
}
}

function hasClass(el, klass) {
if(!el) return;
var classes = el.className;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}

function downClass(el, tag, klass) {
var e = getEl(el);
if(!e) return null;
var els = e.getElementsByTagName(tag);
var i = 0;
for(i = 0; i < els.length; i++) {
e = els[i];
if(hasClass(e, klass)) return e;
}
return null;
}

 function toggleVisibility(el) {
var e;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
}

 return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
}
};
})();
</script>
{% endif %}

{% if current_user %}<!-- logged in -->{% endif %}  

{% for event in events %}
 <li>
<a href="{{ event.url }}" {% if settings.target_blank %} target="_blank"{% endif %}>
<div class="date-label{% if event.is_past %} past-date{% endif %}">
<span class="day">{{ event.starts_at | date: "%d" }}</span>
<span class="month">{{ event.starts_at | date: "%b" }}</span>
</div>

<div class="lwd"><span class="lwi0"> {% photo_for event size:square_300 %}</span></div>  

<h4>
{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name | truncate:30 }}
</h4>
</div>
</div>
<div class="secondblock">
<div class="des">{% item_description event length:130 %}</div>
<div class="time">
<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% event_time event order:"date,time" date_format:"l, F j" date_format_year:"l, F j, Y" time_format: "g:i a" short_time_format:"g:i a" separator:" <br> " %}
</time>
</div>
<!--VIEW DATES THROUGH CTA FOR RECURRING EVENTS-->
<span class="moredates">
{% assign future_dates = event.future_dates %}
{% unless future_dates == blank %}
<p>More dates through {{ event.last_date | date:site.format.date_range }}</p>

 <div id="x-all-dates" style="display: none">
{% for instances in event.future_dates %}
<p class="dateright">
{% event_time instances[0] date:long separator:" at " minutes:yes %}
{% if instances[0].end_time %}
to {{ instances[0].ends_at | date:site.format.time_long }}
{% endif %}
</p>

 {% for instance in instances offset:1 %}
<p class="additional-date">
{% event_time instance order:'time,end' minutes:yes %}
</p>
{% endfor %}
{% endfor %}
</div>
{% endunless %}
</span>
</div>
<!--END VIEW DATES THROUGH CTA FOR RECURRING EVENTS-->
 </a> 
</li>
{% endfor %}

<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->

</ul>

Widget 10

HTML

<style>
.iconp, .icont {
width: 14px;
margin: 2px 5px 0 0;
}

li.widget-event {
background: #fff;
}

.month {
color: #333;
}

.day {
color: #127BA2;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 5rem;
font-weight: 900;
line-height: 0.9;
}

ul.localist-widget-customer {
display: grid;
grid-template-columns: repeat( auto-fill, minmax(20rem, 1fr) );
grid-gap: 1.25rem;
margin: 0;
padding: 0;
}

li.widget-event {
list-style-type: none !important;
position: relative;
display: flex;
flex-direction: column;
line-height: 1.25;
border: 1px solid #d7d7d7;
}

div.widget-content {
background: #fff;
padding-left: 0.75rem;
height: 100%;
margin-bottom: 6rem;
}

div.widget-content > div.title > h4 {
font-size: 1rem;
line-height: 1.3;
margin: 7px 0;
}

div.title > h4 > a {
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: 700 !important;
font-size: 1rem;
text-decoration: none !important;
color: #127BA2;
}

div.title > h4 > a:hover {
text-decoration: underline !important;
}

div.des {
font-size: 16px !important;
font-weight: 400 !important;
color: #555 !important;
font-family: "Karla",helvetica,arial,sans-serif;
}

div.time {
font-size: 16px !important;
color: #333333 !important;
font-family: "Karla",helvetica,arial,sans-serif;
}

div.place {
margin-top: 5px;
}

div.place > div > a {
text-decoration: none;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 16px !important;
color: #333;
}

div.place > div > a:hover {
text-decoration: none;
}

div.place > div > i {
color: #d01c29 !important;
}

div.place > div > i:hover {
color: #A51417 !important;
}

div.widget-photo-space > span > a > img {
width: 100%;
height: auto;
}

.key span {
display: block;
line-height: 1;
}

.key .day {
font-size: 5rem;
letter-spacing: -1px;
font-family: "Karla",helvetica,arial,sans-serif;
}

.key .month {
font-size: 1em;
letter-spacing: 1px;
font-family: "Karla",helvetica,arial,sans-serif;
text-transform: uppercase;
}

.key {
width: fit-content;
max-height: 121px;
margin: 1rem;
padding: 1rem 0;
border-right: none;
border-bottom: 1px solid #999;
text-align: left;
}

/* icons */
.pin:after {
position:absolute;
}

.pin {
width:12px;
height:12px;
border-radius:50% 50% 50% 0;
background:#333;
transform:rotate(-45deg);
float:left;
margin-top:2px;
margin-right:5px;
margin-left:2px;
position:relative;
}

.pin:after {
content:"";
width:6px;
height:6px;
margin:3px 0 0 3px;
background:#fff;
border-radius:50%;
}

.clock {
float:left;
margin-top:2px;
margin-right:5px;
border:2px solid #333;
display:inline-block;
position:relative;
vertical-align:top;
border-radius:100%;
height:12px;
width:12px;
}

.clock:after,.clock:before {
background:#ccc;
border:1px solid #333;
content:'';
position:absolute;
border-left:none;
width:0;
}

.clock:after{
height:5px;
left:5px;
top:0;
}

.clock:before{
height:6px;
left:9px;
top:2.3px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}

</style>
<!DOCTYPE html> 
<html lang="en">
<title>Widget</title>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<ul class="localist-widget-customer">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}

{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el !important;
return document.getElementById(el) !important;
}
 function upTag(el, tag) {
var e !important;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e !important;
e = e.parentNode !important;
}
return null !important;
} else {
return null !important;
  }
}

function hasClass(el, klass) {
if(!el) return !important;
var classes = el.className !important;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes))) !important;
}

function downClass(el, tag, klass) {
var e = getEl(el) !important;
if(!e) return null !important;
var els = e.getElementsByTagName(tag) !important;
var i = 0 !important;
for(i = 0 !important; i < els.length !important; i++) {
e = els[i] !important;
if(hasClass(e, klass)) return e !important;
}
return null !important;
}

 function toggleVisibility(el) {
var e !important;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '' !important;
} else {
e.style.display = 'none' !important;
}
}
}

 return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww')) !important;
}
} !important;
})() !important;
</script>
{% endif %}

{% if current_user %}<!-- logged in -->{% endif %}

{% for event in events %}
<li class="widget-event">

 <div class="widget-photo-space">
<span class="widget-photo"><a href="{{ event.url }}">{% photo_for event size:big_300 %}</a></span>
</div>
<div class="key">
<div class="key-container">
<span class="month">{{ event.starts_at | date: "F" }}</span><span class="day">{{ event.starts_at | date: "%d" }}</span> 
</div>
</div>
<div class="widget-content">

<div class="title">
<h4>
<a href="{{ event.url }}">{{ event.name }}</a>
</h4>
</div>

<div class="time">

<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% unless event.start_time == blank %}
<div class="clock"></div>
{% endunless %}
{% event_time event order:"time" time_format: "g:i" short_time_format:"g:i" separator:" - " %}
{% if event.next_instance.end_time %} - {{ event.ends_at | date:site.format.time_long }}{% endif %}
{% if event.start_time == blank %}
{% endif %}
</time>
</div>

<div class="place">
{% if event.place != empty and event.location_name != blank %}
<div class="pin"></div>
<div class="lw_event_item_location">
{% if event.place %}
<a href="{{ event.place.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.place.visible_name }}</a>
{% else %}
<a href="{{ event.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.location_name }}</a>
{% endif %}
</div>
{% endif %}
</div>
</li>
{% endfor %}

<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->

</ul>

Widget 11

HTML

<style>
.iconp, .icont {
width: 14px;
margin: 2px 5px 0 0;
}

li.widget-event {
background: #fff;
}

.month {
color: #333;
}

.day {
color: #127BA2;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 5rem;
font-weight: 900;
line-height: 0.9;
}

ul.localist-widget-customer {
display: grid;
grid-template-columns: repeat( auto-fill, minmax(20rem, 1fr) );
grid-gap: 1.25rem;
margin: 0;
padding: 0;
}

li.widget-event {
list-style-type: none !important;
position: relative;
display: flex;
flex-direction: column;
line-height: 1.25;
border: 1px solid #d7d7d7;
}

div.widget-content {
background: #fff;
padding-left: 0.75rem;
height: 100%;
margin-bottom: 6rem;
}

div.widget-content > div.title > h4 {
font-size: 1rem;
line-height: 1.3;
margin: 7px 0;
}

div.title > h4 > a {
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: 700 !important;
font-size: 1rem;
text-decoration: none !important;
color: #127BA2;
}

div.title > h4 > a:hover {
text-decoration: underline !important;
}

div.des {
font-size: 16px !important;
font-weight: 400 !important;
color: #555 !important;
font-family: "Karla",helvetica,arial,sans-serif;
}

div.time {
font-size: 16px !important;
color: #333333 !important;
font-family: "Karla",helvetica,arial,sans-serif;
}

div.place {
margin-top: 5px;
}

div.place > div > a {
text-decoration: none;
font-family: "Karla",helvetica,arial,sans-serif;
font-size: 16px !important;
color: #333;
}

div.place > div > a:hover {
text-decoration: none;
}

div.place > div > i {
color: #d01c29 !important;
}

div.place > div > i:hover {
color: #A51417 !important;
}

div.widget-photo-space > span > a > img {
width: 100%;
height: auto;
}

.key span {
display: block;
line-height: 1;
}

.key .day {
font-size: 5rem;
letter-spacing: -1px;
font-family: "Karla",helvetica,arial,sans-serif;
}

.key .month {
font-size: 1em;
letter-spacing: 1px;
font-family: "Karla",helvetica,arial,sans-serif;
text-transform: uppercase;
}

.key {
width: fit-content;
max-height: 121px;
margin: 1rem;
padding: 1rem 0;
border-right: none;
border-bottom: 1px solid #999;
text-align: left;
}

/* icons */
.pin:after {
position:absolute;
}

.pin {
width:12px;
height:12px;
border-radius:50% 50% 50% 0;
background:#333;
transform:rotate(-45deg);
float:left;
margin-top:2px;
margin-right:5px;
margin-left:2px;
position:relative;
}

.pin:after {
content:"";
width:6px;
height:6px;
margin:3px 0 0 3px;
background:#fff;
border-radius:50%;
}

.clock{
float:left;
margin-top:2px;
margin-right:5px;
border:2px solid #333;
display:inline-block;
position:relative;
vertical-align:top;
border-radius:100%;
height:12px;
width:12px;
}

.clock:after,.clock:before {
background:#ccc;
border:1px solid #333;
content:'';
position:absolute;
border-left:none;
width:0;
}

.clock:after{
height:5px;
left:5px;
top:0;
}

.clock:before{
height:6px;
left:9px;
top:2.3px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}

</style>
<!DOCTYPE html> 
<html lang="en">
<title>Widget</title>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<ul class="localist-widget-customer">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}

{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el !important;
return document.getElementById(el) !important;
}

function upTag(el, tag) {
var e !important;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e !important;
e = e.parentNode !important;
}
return null !important;
} else {
return null !important;
}
}

function hasClass(el, klass) {
if(!el) return !important;
var classes = el.className !important;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes))) !important;
}

function downClass(el, tag, klass) {
var e = getEl(el) !important;
if(!e) return null !important;
var els = e.getElementsByTagName(tag) !important;
var i = 0 !important;
for(i = 0 !important; i < els.length !important; i++) {
e = els[i] !important;
if(hasClass(e, klass)) return e !important;
}
return null !important;
}

function toggleVisibility(el) {
var e !important;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '' !important;
} else {
e.style.display = 'none' !important;
}
}
}

return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww')) !important;
}
} !important;
})() !important;
</script>
{% endif %}

{% if current_user %}<!-- logged in -->{% endif %}

{% for event in events %}
<li class="widget-event">

<div class="widget-photo-space">
<span class="widget-photo"><a href="{{ event.url }}">{% photo_for event size:big_300 %}</a></span>
</div>
<div class="key">
<div class="key-container">
<span class="month">{{ event.starts_at | date: "F" }}</span><span class="day">{{ event.starts_at | date: "%d" }}</span> 
</div>
</div>
<div class="widget-content">

<div class="title">
<h4>
<a href="{{ event.url }}">{{ event.name }}</a>
</h4>
</div>

<div class="time">

<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% unless event.start_time == blank %}
<div class="clock"></div>
{% endunless %}
{% event_time event order:"time" time_format: "g:i" short_time_format:"g:i" separator:" - " %}
{% if event.next_instance.end_time %} - {{ event.ends_at | date:site.format.time_long }}{% endif %}
{% if event.start_time == blank %}
{% endif %}
</time>
</div>

<div class="place">
{% if event.place != empty and event.location_name != blank %}
<div class="pin"></div>
<div class="lw_event_item_location">
{% if event.place %}
<a href="{{ event.place.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.place.visible_name }}</a>
{% else %}
<a href="{{ event.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.location_name }}</a>
{% endif %}
</div>
{% endif %}
</div>
</li>
{% endfor %}

<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->

</ul>

Widget 12

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Widget</title>
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
/* ENTIRE LISTING */
.localist-widget-horizontal {
list-style: none; /* Remove default list styling to avoid bullets */
padding: 0;
display: flex;
flex-wrap: wrap; /* Align items horizontally and wrap if needed */
justify-content: space-around; /* Space items evenly */
}

.localist-widget-horizontal li {
text-align: center;
margin: 20px; /* Space items consistently */
max-width: 200px;
height: auto;
list-style: none;
}

/* MONTH */
.localist-widget-horizontal .date > .month {
background-color: #127BA2;
padding-top: 5px;
padding-bottom: 5px;
text-transform: uppercase;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
 /* DAY */
.localist-widget-horizontal .date > .day {
background-color: #444444;
padding-top: 10px;
padding-bottom: 10px;
font-size: 30px;
}
/* CARD */
.localist-widget-horizontal .date {
margin-left: auto;
margin-right: auto;
width: 100px;
color: white;
font-family: "Karla", helvetica, arial, sans-serif;
}
 /* TITLE */
.localist-widget-horizontal li a > h4 {
color: black;
font-family: "Karla", helvetica, arial, sans-serif;
font-size: 18px;
margin-bottom: 10px;
font-weight: normal;
text-decoration: none; /* Remove underline */
}
.localist-widget-horizontal li a > h4:hover {
color: #127BA2;
}

/* PLACE & TIME */
.localist-widget-horizontal li > a > .time,
.localist-widget-horizontal li > a > .venue {
font-family: 'Raleway', sans-serif;
color: #25597d;
font-size: 14px;
display: block;
margin-top: 5px;
text-decoration: none; /* Remove underline */
}
 /* LINKS */
.localist-widget-horizontal li > a {
text-decoration: none; /* Remove underline for all links */
}
</style>
</head>
<body>
<ul class="localist-widget-horizontal">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
 {% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if ('tagName' in el) return el;
return document.getElementById(el);
}
function upTag(el, tag) {
var e;
if (e = getEl(el)) {
while (e) {
if (e.tagName.toLowerCase() == tag.toLowerCase()) return e;
e = e.parentNode;
}
return null;
} else {
return null;
}
}
function hasClass(el, klass) {
if (!el) return;
var classes = el.className;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}

function downClass(el, tag, klass) {
var e = getEl(el);
if (!e) return null;
var els = e.getElementsByTagName(tag);
var i = 0;
for (i = 0; i < els.length; i++) {
e = els[i];
if (hasClass(e, klass)) return e;
}
return null;
}

function toggleVisibility(el) {
var e;
if (e = getEl(el)) {
if (e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
}
 return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
}
};
})();
</script>
{% endif %}
 {% if current_user %}<!-- logged in -->{% endif %}
 {% for event in events %}
<li> <!-- Ensure <li> directly inside <ul> -->
<div class="Localist"> <!-- Keep <div> inside each <li> -->
<div class="date">
<div class="month">{% event_time event date_format:'M' time_format:"" short_time_format:"" %}</div>
<div class="day">{% event_time event date_format:'j' time_format:"" short_time_format:"" %}</div>
</div>
 <a href="{{ event.url }}">
<h4>{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}
{{ event.name | truncate:50 }}</h4>
{% if event.start_time %}
<span class="time">{% event_time event date_format:'g' time_format:"" short_time_format:"" %}:{% event_time event date_format:'ia' time_format:"" short_time_format:"" %}</span>
{% endif %}
{% if event.location != blank %}
<span class="venue">{{ event.location_name }}</span>
{% endif %}
</a>
{% if settings.expand_descriptions %}
<div class="lww" style="display:none"></div>
{% endif %}
 </div>
</li>
{% endfor %}
</ul>
</body>
</html>

Widget 13

HTML

<style>
/* BODY */

ul.localist-widget-eds {
margin-left: 0;
padding-left: 2%;
}

.localist-widget-eds {
max-width: 850px;
}

.localist-widget-eds li {
list-style: none;
background-color: #ffffff;
text-decoration: none;
width: 100%;
height: auto;
padding-bottom: 0.8em;
margin: 0 10px 1em 0;
min-height: 4em;
}

.localist-widget-eds a {
text-decoration: none;
}

/* MONTH & DATE SQUARE */

body>ul>li>div.localist-dateblock {
border: 1px solid #CCCCCC;
}

.localist-widget-eds div.localist-day {
color: #555555;
background-color: #efefef;
font-size: 1.4em;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: 600;
text-align: center;
text-decoration: none;
line-height: 1;
padding-top: 10px;
padding-bottom: 10px;
}

.localist-widget-eds div.localist-month {
text-decoration: none;
color: #ffffff;
background-color: #127BA2;
font-size: 1em;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: 600;
text-transform: uppercase;
text-align: center;
padding-top: 2px;
padding-bottom: 1px;
}

.localist-widget-eds div.localist-dateblock {
width: 60px;
min-height: 50px;
border: none;
}

/* DETAILS */

.localist-widget-eds div.localist-secondblock {
margin-top: -75px;
margin-left: 75px;
min-height: 44px;
max-width: 20em;
padding-top: 13px;
}

.localist-widget-eds div.localist-otherdetails {
color: #424242;
font-family: "Karla",helvetica,arial,sans-serif;
font-weight: normal;
text-decoration: none;
font-size: 13px;
width: auto;
margin: 6px 0 0;
max-width: 24em;
overflow: auto;
}

.localist-otherdetails>div {
float: left;
clear: right;
}

.localist-otherdetails>div:first-of-type {
margin-right: 4%;
}

.localist-otherdetails i {
color: #9e9e9e;
}

.fas .fa-map-marker-alt {
padding-left: 2px;
}

.localist-time {
display: inline-block;
}

.localist-venue {
display: inline-block;
margin-left: 0;
}

/* TITLE */

div.localist-secondblock>div.localist-title>h4 {
margin: 0;
text-decoration: none;
}

div.localist-title h4 a {
color: #127BA2;
text-decoration: none;
text-transform: none;
font-family: "Karla",helvetica,arial,sans-serif;
overflow: hidden;
text-overflow: ellipsis;
max-width: 20px;
font-size: 16px;
font-weight: 600;
}

.localist-widget-eds div.localist-titlespace {
margin-bottom: 10px;
background-color: #ffffff;
text-align: center;
font-size: 18px;
font-family: "Karla",helvetica,arial,sans-serif;
}
</style>
<html lang="en">
<title>Widget</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<ul class="localist-widget-eds">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}

{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el;
return document.getElementById(el);
}

 function upTag(el, tag) {
var e;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e;
e = e.parentNode;
}
return null;
} else {
return null;
}
}

function hasClass(el, klass) {
if(!el) return;
var classes = el.className;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}

 function downClass(el, tag, klass) {
var e = getEl(el);
if(!e) return null;
var els = e.getElementsByTagName(tag);
var i = 0;
for(i = 0; i < els.length; i++) {
e = els[i];
if(hasClass(e, klass)) return e;
}
return null;
}

function toggleVisibility(el) {
var e;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
}

return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
}
};
})();
</script>
{% endif %}

{% if current_user %}<!-- logged in -->{% endif %}

{% for event in events %}
<li>
<div class="localist-dateblock">
<div class="localist-month">{% event_time event date_format:'M' include_other_year:false order:'date' %} </div>
<div class="localist-day">{% event_time event date_format:'j' include_other_year:false order:'date' %} </div>
</div>

<div class="localist-secondblock">
<div class="localist-title">
<h4> 
<a class="cover" href="{{ event.url }}" target="_blank">{{ event.name }}</a></h4>
</div>
<div class="localist-otherdetails">
{% if event.start_time %}<div class="localist-time"><i class="far fa-clock"></i>
{% event_time event time_format:'g:ia' order:'time' optional_minutes:false %}</div>{% endif %}
{% if event.place %}<div class="localist-venue"><i class="fas fa-map-marker-alt"></i>
{{ event.location_name }}</div>{% endif %}
</div>
</div>
</li>
{% endfor %}

<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->

</ul>

Widget 14

HTML

{% unless settings.style == 'none' %}

{% comment %}
#################################
START MAKE COLOR/FONT CHANGES HERE
you can change colors and fonts in this section rather than modifying CSS directly below
{% endcomment %}

{% assign link_color = '#444' %}
{% assign link_hover = '#444' %}

{% assign button_color = '#127ba2' %}
{% assign button_hover = '#ddd' %}
{% assign button_font_color = '#fff' %}

 {% assign font_family = '"Karla",Helvetica,arial,sans-serif' %}

{% comment %}
END MAKE COLOR/FONT CHANGES HERE
#################################
{% endcomment %}

<style type="text/css">
/* container for the widget */
.localist_widget_container {
width: 100%;
background-color: #fff;
overflow: hidden;
}

/* all links within an event item */
.localist_widget_container li a {
text-decoration: none;
color: {{ link_color }};
}

/* all hovered links within an event item */
.localist_widget_container li a:hover {
text-decoration: underline;
color: {{ link_hover }};
}

/* container for the list of event items */
.localist_widget_container ul.lw_event_list {
list-style: none;
padding: 0;
max-width: 960px;
}

 /* container for each event item */
.localist_widget_container li.lw_event_item {
margin: 5px 0;
border: 1px solid #ddd;
font: 200 14px/20px {{ font_family }};
background: #fafafa;
overflow: hidden;
float: left;
max-width: 300px;
height: 425px;
}

/* container for event photo */
.localist_widget_container a.lw_event_item_image {
display: block;
float: none;
overflow: hidden;
max-width: none;
position:relative;
}

/* event photo (makes it center on the image if dimensions grow/shrink) */
.localist_widget_container a.lw_event_item_image img {
top: 50%;
left: 50%;
position:relative;
transform: translate(-50%, 0%)
}

/* container for non-image content */
.localist_widget_container div.lw_event_content {
padding: 10px 20px;
overflow: hidden;
vertical-align: text-top;
float: left;
}

/* event title */
.localist_widget_container div.lw_event_item_title {
color: #444;
font-family: "Karla"helvetica,arial,sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 20px;
text-align: center;
padding-bottom: 10px;
}

/* event description */
.localist_widget_container div.lw_event_item_description {
font-size: 12px;
}

 /* container for event meta data */
.localist_widget_container .lw_event_meta {
width: 100%;
float: none;
overflow: hidden;
}

/* event location and time shared code */
.localist_widget_container div.lw_event_item_location,
.localist_widget_container div.lw_event_item_time {
font-size: 12px;
text-transform: uppercase;
margin-left: 15px;
}

/* event location overrides */
.localist_widget_container div.lw_event_item_location {
margin-top: 10px;
}

/* event date */
.localist_widget_container span.lw_event_item_date {
background-color:rgba(0, 0, 0, 0.5);
color: #fff;
position:absolute;
bottom: 0;
left: 0;
padding: 5px 0px;
width: 100%;
font-size: 12px;
text-transform: uppercase;
text-align: center;
}

/* event cta */
.localist_widget_container .action_button a {
display: block;
background: {{ button_color }};
color: {{ button_font_color }};
line-height: 40px;
text-decoration: none;
text-align: center;
margin-top: 10px;
max-width: none;
font-weight: bold;
}

/* event cta hover */
.localist_widget_container .action_button a:hover {
text-decoration: none;
background-color: {{ button_hover }};
}

 .localist_widget_container .lw_view_all_cta a {
display: inline-block;
text-align: center;
font: 200 14px/20px {{ font_family }};
float: none;
width: 100%;
}

/* icons */
.localist_widget_container .pin,.localist_widget_container .pin:after {
position:absolute
}
.localist_widget_container .pin {
width:10px;
height:10px;
border-radius:50% 50% 50% 0;
background:#127BA2;
transform:rotate(-45deg);
float:left;
margin-top:13px
}
.localist_widget_container .pin:after {
content:"";
width:4px;
height:4px;
margin:3px 0 0 3px;
background:#fff;
border-radius:50%;
}
.localist_widget_container .clock {
float:left;
margin-top:4px;
border:2px solid #127ba2;
display:inline-block;
position:relative;
vertical-align:top;
border-radius:100%;
height:7px;
width:7px
}
.localist_widget_container .clock:after,.localist_widget_container .clock:before {
background:#127ba2;
border:1px solid #127ba2;
content:'';
position:absolute;
border-left:none;
width:0
}
.localist_widget_container .clock:after {
height:2px;
left:3px;
top:0
}
.localist_widget_container .clock:before {
height:3px;
left:5px;
top:1px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}

 </style>
<html lang="en">
<title>Widget</title>
{% endunless %}

<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

{% if settings.expand_descriptions %}
<script type="text/javascript">
mc_$$ID$$_util = (function() {
function getEl(el) {
if('tagName' in el) return el;
return document.getElementById(el);
}

 function upTag(el, tag) {
var e;
if(e = getEl(el)) {
while(e) {
if(e.tagName.toLowerCase() == tag.toLowerCase()) return e;
e = e.parentNode;
}
return null;
} else {
return null;
}
}

function hasClass(el, klass) {
if(!el) return;
var classes = el.className;
return (classes.length > 0 && (classes == klass ||
new RegExp("(^|\\s)" + klass + "(\\s|$)").test(classes)));
}

function downClass(el, tag, klass) {
var e = getEl(el);
if(!e) return null;
var els = e.getElementsByTagName(tag);
var i = 0;
for(i = 0; i < els.length; i++) {
e = els[i];
if(hasClass(e, klass)) return e;
}
return null;
}

function toggleVisibility(el) {
var e;
if(e = getEl(el)) {
if(e.style.display == 'none') {
e.style.display = '';
} else {
e.style.display = 'none';
}
}
}

return {
toggle: function(el) {
toggleVisibility(downClass(upTag(el, 'li'), 'div', 'lww'));
}
};
})();
</script>
{% endif % }

{% if current_user %}<!-- logged in -->{% endif %}

<div class="localist_widget_wrapper cardCarousel">
<div class="localist_widget_container">
<ul class="lw lw_event_list">
{% if events == empty %}
<li class="lw lw_event_item nocontent">
<div class="lw_event_item_title">{{ site.snippets.widget_nocontent }}</div>
</li>
{% else %}
{% for event in events %}
{{ event_knowledge_graph_tag }}

 <li class="lw lw_event_item">

 {% if settings.hide_images != true %}
<a class="lw_event_item_image" href="{{ event.url }}"{% if settings.target_blank %} target="_blank"{% endif %}{% if settings.expand_descriptions %} onclick="mc_$$ID$$_util.toggle(this); return false;"{% endif %}>
{% photo_for event size:square_300 width:150 height:150 %}
<span class="lw_event_item_date">
{% event_time event order:"date" date_format:settings.date_format time_format:settings.time_format short_time_format:settings.short_time_format %}

{% if show_date_ranges and event.has_many_future_instances %}
- {{ event.last_instance.starts_at | date:settings.date_format }}
{% endif %}
</span>
</a>
{% endif %}

<div class="lw_event_content">
<div class="lw_event_item_title">
<a href="{{ event.url }}"{% if settings.target_blank %} target="_blank"{% endif %}{% if settings.expand_descriptions %} onclick="mc_$$ID$$_util.toggle(this); return false;"{% endif %}>{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name | truncate: 30 }}</a>
</div>

 {% if settings.expand_descriptions %}<div class=lww style="display:none">{% endif %}

{% unless settings.hide_descriptions %}
<div class="lw_event_item_description">
{% item_description event %}
{% if settings.show_keywords %}
<br/>{{ event.keywords | join:", " }}
{% endif %}
</div>
{% endunless %}

 {% if settings.expand_descriptions %}</div>{% endif %}

<div class="lw_event_meta">
{% if event.event_type == 'event' %}
{% if event.place != empty and event.location_name != blank %}
<div class="pin"></div>
<div class="lw_event_item_location">
{% if event.place %}
<a href="{{ event.place.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.place.visible_name }}</a>
{% else %}
<a href="{{ event.url }}"{% if settings.target_blank %} target="_blank"{% endif %}>{{ event.location_name }}</a>
{% endif %}
</div>
{% endif %}
{% endif %}

{% if settings.show_times %}
{% if event.start_time %}
<div class="clock"></div>
<div class="lw_event_item_time">
{% event_time event order:"time" time_format:settings.time_format short_time_format:settings.short_time_format %}
</div>
{% endif %}
{% endif %}
&nbsp;
</div>

{% if settings.expand_descriptions %}<div class=lww style="display:none">{% endif %}
<div class="lw_event_meta">
<div class="action_button">
<a href="{{ event.url }}" aria-label="View details about {{ event.name }}" {% if settings.target_blank %} target="_blank"{% endif %}>{{ im_going_text }}</a>
</div>
</div>
{% if settings.expand_descriptions %}</div>{% endif %}

</div>
</li>
{% endfor %}

{% endif %}
{% if settings.show_view_all_cta %}
<p class="lw lw_view_all_cta"><a href="{% relative_calendar_url %}">View all events...</a></p>
{% endif %} 
</ul>
</div>
</div>

Widget 15

HTML

<style> 
ul.localist-widget-customer {
 padding: 0;
 margin: 0; 
 line-height: 
 initial; } 

body > ul > a > li > div.infoblock > h4 {  
  margin-top: 15px; 
  margin-bottom: 10px; } 
 
 .localist-widget-customer .lwd { 
   margin-right: auto;
   margin-left: auto;
   width: 100%;  
   height: auto; } 

.localist-widget-customer li {
  list-style: none;
  float: left; 
  width: 300px;
  margin-left: 15px;
  margin-right: 15px;
  min-height: 376px;
  margin-bottom: 50px;
  border: 1px solid #ccc; 
  height: 425px; 
} 

h4 { 
 color: #000;
 text-decoration: none; 
 margin-top: 10px;
 margin-bottom: 10px; 
 font-size: 20px; 
 font-family: "Karla",helvetica,arial,sans-serif;
 font-weight: normal; 
}

.localist-widget-customer a { 
  text-decoration: none; 
} 

@media only screen and (max-width: 479px) { 
.localist-widget-customer li { 
 margin-right: 5px;
 width: 100% !important; 
}} 

span.day, span.month {
 display: 
 inline-block; 
 font-size: 15px;
 font-family: "Karla",helvetica,arial,sans-serif; 
} 

div.date-label { 
 padding: 10px; 
 background-color: #127BA2; 
 text-align: center !important;
 z-index: 1; 
 width: auto; 
 padding: 15px 0px; color: 
 #fff !important; 
} 

body > ul > a > li > div.date-label > span { 
 float: none; 
 color: #fff !important; 
 font-family: "Karla",helvetica,arial,sans-serif; 
 text-transform: uppercase; 
 font-size: 15px; 
 font-weight: bold; 
}

 .lwd { padding-top: 0px !important; 
} 

.lwi0 { padding: 0px !important; 
 max-height: 500px; 
} 

body > ul > a > li > div.infoblock > time { 
 font-weight: 600; 
 color: #000; 
 font-family: "Karla",helvetica,arial,sans-serif; 
 font-size: 16px; 
 font-weight: normal;
 } 

dd.event-location {
 margin-left: 0px; 
font-family: "Karla",helvetica,arial,sans-serif; 
font-weight: normal; 
color: #000; 
font-size: 16px;
 } 

div.infoblock {
 padding: 0px 18px; 
}

.localist-widget-customer li:hover {
  background-color: #127BA2; 
}

 ul.localist-widget-customer li:hover .infoblock h4, ul.localist-widget-customer li:hover .infoblock .event-location, ul.localist-widget-customer li:hover .infoblock time { 
color: white;
 } 

.lwn0 { 
 float: none !important; 
 font-size: 16px !important; 
 color: #fff !important; 
 text-transform: uppercase !important; 
} 

.lclst_widget_footer { 
 display: none; 
} 

</style> 
<html lang="en">
<title>Widget</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> <ul class="localist-widget-customer">
{% unless settings.style == 'none' %}
{% partial 'platform_styles' %}
{% endunless %}
{% if current_user %}<!-- logged in -->{% endif %}

{% for event in events %}
<li>
<a href="{{ event.url }}" {% if settings.target_blank %} target="_blank"{% endif %}>
<div class="date-label{% if event.is_past %} past-date{% endif %}">
<span class="lwn0"> 
{% event_time event order:"date" date_format:settings.date_format time_format:settings.time_format short_time_format:settings.short_time_format %}
{% if show_date_ranges and event.has_many_future_instances %}
- {{ event.last_instance.starts_at | date:settings.date_format }}
{% endif %}
</span>
</div>
<div class="lwd">
<span class="lwi0">{% photo_for event size:big_300 %}</span>
</div>
<div class="infoblock">
<h4>
{% unless event.status == 'live' %}{{ site.snippets.event_status[event.status] }}: {% endunless %}{{ event.name | truncate:30 }}
</h4>
<time datetime="{% event_time event order:"date" date_format:"Y-m-d" short_time_format:"Y-m-d" %}">
{% event_time event order:"time" date_format:"l, F j" date_format_year:"l, F j, Y" time_format: "g:i a" short_time_format:"g:i a" separator:" <br> " %}
</time>
{% if event.place.visible_name != blank or event.location_name != blank %}
<dl>
<dt>Location</dt> <!-- Added <dt> element for accessibility -->
<dd class="event-location">
{% if event.place.visible_name != blank %}
{{ event.place.visible_name }}
{% else %}
{{ event.location_name }}
{% endif %}
</dd>
</dl>
{% endif %}
</div>
</a>
</li>
{% endfor %}
<!--NO EVENTS DISCLAIMER-->
{% if events == empty %}
<p class="noevents">There are no upcoming events.</p>
{% endif %}
<!--END NO EVENTS DISCLAIMER-->
</ul>

How can we help?

Search

What You'll Need / What You'll Get

How to Use the Additional Widget Library

Additional Widget Options

Widget 1

Widget 2

Widget 4

Widget 5

Widget 6

Widget 7

Widget 8

Widget 9

Widget 10

Widget 11

Widget 12

Widget 13

Widget 14

Widget 15

How can we help?

Search

Localist Widget Library

What You'll Need / What You'll Get

How to Use the Additional Widget Library

Additional Widget Options

Widget 1

Widget 2

Widget 4

Widget 5

Widget 6

Widget 7

Widget 8

Widget 9

Widget 10

Widget 11

Widget 12

Widget 13

Widget 14

Widget 15

Related articles