Date blocks
Why and how to use this component
Users need a way to quickly see an event’s date and status.\ The solution is a date block that allows users to easily visualize this information.
When to use this component
- for lists of events and agenda pages
Do not use this component
- in any other situation except listings
{#
Parameters:
- "variant" (string) (default: ''): display variant
- "week_day" (string) (default: ''): day(s) of the week of the event
- "day" (string) (default: ''): day number(s) of the event
- "month" (string) (default: ''): month(s) of the event
- "year" (string) (default: ''): year(s) of the event
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]
#}
{% include '@ecl/generic-component-date-block' %}
/* Default event */
{
"week_day": "Tue",
"day": "12",
"month": "Jan"
}
/* Ongoing event */
{
"variant": "ongoing",
"week_day": "Wed-Fri",
"day": "31-11",
"month": "May-Jun"
}
/* Cancelled event */
{
"variant": "cancelled",
"week_day": "Mon",
"day": "11",
"month": "Jan"
}
/* Past event */
{
"variant": "past",
"day": "2-4",
"month": "Feb",
"year": "2015"
}
<!-- Default event -->
<div class="ecl-date-block">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Tue</span>
<span class="ecl-date-block__day">12</span>
<span class="ecl-date-block__month">Jan</span>
</div>
</div>
<!-- Ongoing event -->
<div class="ecl-date-block ecl-date-block--ongoing">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Wed-Fri</span>
<span class="ecl-date-block__day">31-11</span>
<span class="ecl-date-block__month">May-Jun</span>
</div>
</div>
<!-- Cancelled event -->
<div class="ecl-date-block ecl-date-block--cancelled">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Mon</span>
<span class="ecl-date-block__day">11</span>
<span class="ecl-date-block__month">Jan</span>
</div>
</div>
<!-- Past event -->
<div class="ecl-date-block ecl-date-block--past">
<div class="ecl-date-block__body">
<span class="ecl-date-block__day">2-4</span>
<span class="ecl-date-block__month">Feb</span>
<span class="ecl-date-block__year">2015</span>
</div>
</div>
-
Content:
/* * Date block * @define date-block */ // Import base and generic @import '@ecl/eu-base/eu-base'; @import '@ecl/generic-component-date-block/generic-component-date-block'; // Use generic mixin @include exports('eu-component-date-block') { @include ecl-date-block(); }
- URL: /components/raw/eu-component-date-block/eu-component-date-block.scss
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-date-block/eu-component-date-block.scss
- Size: 276 Bytes
- Handle: @ecl/eu-component-date-block
- Tags: atom
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-component/eu-component-date-block/eu-component-date-block.twig