TimelineItem

Use timeline item to display items on a vertical timeline, connected by badge elements.

Beta
Not reviewed for accessibility

On this page

Use 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::Beta::TimelineItem.new) do |component| %>
    <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "github") %>
    <% component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
    <% component.with_body { "Success!" } %>
  <% end %>
</div>

Edit this page on GitHub