x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="flex flex-wrap gap-8 items-end"> <div class="midwest-calendar-date size-sm"> <div class="calendar-date-tile"> <div class="calendar-date-main"> <div class="calendar-date-day-area"> <span class="calendar-date-day">24</span> <span class="calendar-date-year">2026</span> </div> <span class="calendar-date-month">JUN</span> </div> </div> </div> <div class="midwest-calendar-date"> <div class="calendar-date-tile"> <div class="calendar-date-main"> <div class="calendar-date-day-area"> <span class="calendar-date-day">24</span> <span class="calendar-date-year">2026</span> </div> <span class="calendar-date-month">JUN</span> </div> </div> </div> <div class="midwest-calendar-date size-lg"> <div class="calendar-date-tile"> <div class="calendar-date-main"> <div class="calendar-date-day-area"> <span class="calendar-date-day">24</span> <span class="calendar-date-year">2026</span> </div> <span class="calendar-date-month">JUN</span> </div> </div> </div></div>1
2
3
4
5
<div class="flex flex-wrap gap-8 items-end"> <%= render Midwest::CalendarDateComponent.new(date: Date.new(2026, 6, 24), size: :sm) %> <%= render Midwest::CalendarDateComponent.new(date: Date.new(2026, 6, 24)) %> <%= render Midwest::CalendarDateComponent.new(date: Date.new(2026, 6, 24), size: :lg) %></div>Sizes
Small, default, and large size variants.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Calendar Date/sizes
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."