Skip to content
Components
AutoCompleteAutoCompleteItemAvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbsButtonButtonGroupButtonMarketingClipboardCopyCloseButtonCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingHiddenTextExpanderIconButtonImageImageCropLabelLayoutLinkLocalTimeMarkdownMenuOcticonOcticonSymbolsPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTabPanelsTextTimeAgoTimelineItemTruncateUnderlineNavUnderlinePanels
TimelineItem
BetaUse TimelineItem to display items on a vertical timeline, connected by badge elements.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
condensed | Boolean | false | Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits. |
system_arguments | Hash | N/A | System arguments |
Slots
Avatar
Avatar to be rendered to the left of the Badge.
| Name | Type | Default | Description |
|---|---|---|---|
kwargs | Hash | N/A | The same arguments as Avatar. |
Badge
Badge that will be connected to other TimelineItems.
| Name | Type | Default | Description |
|---|---|---|---|
icon | String | N/A | Name of Octicon to use. |
system_arguments | Hash | N/A | System arguments |
Body
Body to be rendered to the left of the Badge.
| Name | Type | Default | Description |
|---|---|---|---|
system_arguments | Hash | N/A | System arguments |
Examples
Default
Success!
<div style="padding-left: 60px"><%= render(Primer::TimelineItemComponent.new) do |component| %><% component.avatar(src: "https://github.com/github.png", alt: "github") %><% component.badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %><% component.body { "Success!" } %><% end %></div>