Skip to content

TimelineItem

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

Examples

Default

<div style="padding-left: 60px">
<%= render(Primer::TimelineItemComponent.new) do |component| %>
<% component.slot(:avatar, src: "https://github.com/github.png", alt: "github") %>
<% component.slot(:badge, bg: :green, color: :white, icon: :check) %>
<% component.slot(: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

avatar slot

NameTypeDefaultDescription
altStringnilAlt text for avatar image.
srcStringnilSrc attribute for avatar image.
sizeInteger40Image size.
squareBooleantrueWhether to round the edges of the image.
system_argumentsHashN/ASystem arguments

badge slot

NameTypeDefaultDescription
iconStringnilName of Octicon to use.
system_argumentsHashN/ASystem arguments

body slot

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments