Sidebar Form

This is the Sidebar Form component that displays elements for selecting date ranges.

Date Selection

This is the Date Selection component that displays elements for selecting date ranges within Slate Engagement.

Select Date Range

Program select box

This is the Program select box component that displays a drop-down for selecting Programs within Slate Engagement.

Select Program

Event Filters

This is the Event Filters component that displays nested checkboxes in a views exposed form.

Event Categories

Markup Details
                            <style>
  .kss-display-title {
    background: #ddd;
    font-size: 2.4rem;
    margin-bottom: 0;
    padding: 0.5rem 0 0 1rem
  }
  .kss-display-title:not(:first-of-type) {
    margin-top: 3rem;
  }
  .kss-display-separator {
    border: 2px solid;
    margin: 3rem 0;
  }
  .kss-display-description {
    background: #ddd;
    margin-bottom: 5rem;
    padding: 0 0 0.5rem 1rem
  }
</style>
<h2 class="kss-display-title">Date Selection</h2>
<p class="kss-display-description">This is the Date Selection component that displays elements for selecting date ranges within Slate Engagement.</p>
{%
  include '@components/sidebar-form/sidebar-form.twig' with {
    "sidebar_form": date_selection
  }
%}
<hr class="kss-display-separator">
<h2 class="kss-display-title">Program select box</h2>
<p class="kss-display-description">This is the Program select box component that displays a drop-down for selecting Programs within Slate Engagement.</p>
{%
  include '@components/sidebar-form/sidebar-form.twig' with {
    "sidebar_form": program_select_box
  }
%}
<hr class="kss-display-separator">
<h2 class="kss-display-title">Event Filters</h2>
<p class="kss-display-description">This is the Event Filters component that displays nested checkboxes in a views exposed form.</p>
{%
  include '@components/sidebar-form/sidebar-form.twig' with {
    "sidebar_form": event_categories
  }
%}