← All elements
<div class="ce"><div class="mo">OCT</div><div class="dy">24</div><small>Friday</small></div>About this card
A date tile styled like a desk calendar page with a coloured header strip and ring holes.
How it works
A red month strip sits above a large day number in a white tile with a soft shadow. Two tiny pseudo-element dots imitate binder rings across the top edge.
Ways to customise it
- Change the month, day and weekday.
- Use another accent colour.
- Add the time below.
Good to know
Use a time element with a datetime attribute in a real page to expose the date to browsers and assistive tools.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.