Skip to content

TimelineItem

Table of contents
Table of contents

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

Examples

Default

github
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_inverse, color: :text_white, icon: :check) %>
<% component.body { "Success!" } %>
<% end %>
</div>

Arguments

NameTypeDefaultDescription
condensedBooleanfalseReduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
system_argumentsHashN/ASystem arguments

Slots

Avatar

Avatar to be rendered to the left of the Badge.

NameTypeDefaultDescription
kwargsHashN/AThe same arguments as Avatar.

Badge

Badge that will be connected to other TimelineItems.

NameTypeDefaultDescription
iconStringN/AName of Octicon to use.
system_argumentsHashN/ASystem arguments

Body

Body to be rendered to the left of the Badge.

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments