--- title: "DateBullet | GoodBarber's Design System" description: "The DateBullet element shows when an event happens in GoodBarber apps: a compact date badge with the day and month, the starting time or a Now mention." canonical_url: "https://www.goodbarber.com/uxdesign/datebullet/" lang: sv --- # DateBullet | GoodBarber's Design System [Design System](https://se.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://se.goodbarber.com/uxdesign/](https://se.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://se.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Action](/uxdesign/action/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # DateBullet UI Elements The DateBullet shows when an event happens: the day and the month, at a glance. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/datebullet.5fb6f0c77dfd.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/datebullet.5fb6f0c77dfd.mp4) ## 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](/uxdesign/typography/), [background](/uxdesign/background/), [shape](/uxdesign/atom-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](/uxdesign/atom-font/) setting: a main font for the day, a secondary font for the month. Each can be customized on its own. ![The two levels: the day on the main font, the month on the secondary one](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-DateBullet-Anatomy-Structure.90c98db5f592.png) *The two levels: the day on the main font, the month on the secondary one* ## 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](/uxdesign/icons/) takes the place of the time. The hour and the mention "Now" are written with the secondary font, like the month. ![A start date, a starting time, the Now mention, and the All day icon](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-DateBullet-Properties-Contents.262df4836f78.png) *A start date, a starting time, the Now mention, and the All day icon* ### 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. ![Medium in a list, Big in a headline cell](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-DateBullet-Properties-Sizes.71ef9e4f7cc2.png) *Medium in a list, Big in a headline cell* ### Shape The [Shape](/uxdesign/atom-shape/) atom applies to the bullet, from Sharp to Round. Because the bullet is a square, Round makes it a full circle. ![Sharp, Rounded and Round: a full circle](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-DateBullet-Properties-Shape.c4c39a7e53a5.png) *Sharp, Rounded and Round: a full circle* ### Border and shadow The [Border](/uxdesign/atom-border/) and [Shadow](/uxdesign/atom-shadow/) atoms apply to the bullet as well, both off by default. ![By default, with a border, and with a shadow](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-DateBullet-Properties-BorderShadow.f17dee576601.png) *By default, with a border, and with a shadow* ### Color By default, the bullet wears the [colors](/uxdesign/atom-color/) of the app's buttons: their background color for its own [background](/uxdesign/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. ![The bullet on the button's colors, then customized](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-DateBullet-Properties-Colors.47d869ca95d0.png) *The bullet on the button's colors, then customized* ## 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](/uxdesign/media/), in the bottom-left corner. ![The DateBullet in a list, next to the text, and in the bottom-left corner of the media](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-DateBullet-Layout-Placement.3023f756eac7.png) *The DateBullet in a list, next to the text, and in the bottom-left corner of the media* ## 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. ![A day too large for its bullet: the content is cut](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-DateBullet-Behavior-Clipping.91d50c9aefdf.png) *A day too large for its bullet: the content is cut*