Introduction

The DateBullet highlights a date, typically the start date or time of an event, in a compact, stylized format. It lives in event-related content, such as event widgets and sections, and presents temporal information in a consistent, visually distinct way.

It is a graphical representation of a date, generally split into two levels, the day and the month, so that users identify the timing of an event at a glance. It supports extensive customization: typography, background, shape, and icon color.

Anatomy

Two levels

The bullet stacks two levels of text: the day on top, the month underneath. Each level has its own font setting: a main font for the day, a secondary font for the month. Each can be customized on its own.

Properties

What it can display

The DateBullet can show the start date of an event, its starting time, or the mention "Now" once the event has started. For an event that lasts all day, an "All day" icon takes the place of the time. The hour and the mention "Now" are written with the secondary font, like the month.

Two sizes

The bullet comes in two predefined sizes. Medium is the default of most templates and lists. Big is generally used in headline cells, where the event deserves more visual emphasis.

Shape

The Shape atom applies to the bullet, from Sharp to Round. Because the bullet is a square, Round makes it a full circle.

Border and shadow

The Border and Shadow atoms apply to the bullet as well, both off by default.

Color

By default, the bullet wears the colors of the app's buttons: their background color for its own background, their text color for the day, the month and the icon. Every part of it can then be customized on its own: the fonts, the background, the icon color.

Layout

Placement

The DateBullet's place depends on the template: in a list, on the left of the cell, next to the text; in a headline cell, centered above the text; on the media, in the bottom-left corner.

Behavior

The size is fixed

The bullet does not grow with its content: its size is fixed. If the font chosen for the day is too large, the content is cut.