<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
<%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
<% item.label do %>
<%= pb_rails("timeline/label") do %>
<%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
<% end %>
<% end %>
<% item.step do %>
<%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
<% end %>
<% item.detail do %>
<%= pb_rails("title_detail", props: {
title: "Jackson Heights",
detail: "37-27 74th Street"
}) %>
<% end %>
<% end %>
<%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
<% item.step do %>
<%= pb_rails("timeline/step") do %>
<%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
<% end %>
<% end %>
<% item.detail do %>
<%= pb_rails("title_detail", props: {
title: "Greenpoint",
detail: "81 Gate St Brooklyn"
}) %>
<% end %>
<% end %>
<%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
<%= pb_rails("title_detail", props: {
title: "Society Hill",
detail: "72 E St Astoria"
}) %>
<% end %>
<% end %>
<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
<%= pb_rails("timeline/item") do |item| %>
<% item.label do %>
<%= pb_rails("timeline/label") do %>
<%= pb_rails("title", props: { text: "Any Kit", size: 4 }) %>
<% end %>
<% end %>
<% item.step do %>
<%= pb_rails("timeline/step", props: { icon: 'user', icon_color: 'royal' }) %>
<% end %>
<% item.detail do %>
<%= pb_rails("title_detail", props: {
title: "Jackson Heights",
detail: "37-27 74th Street"
}) %>
<% end %>
<% end %>
<%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1, line_style: "dotted" }) do |item| %>
<%= pb_rails("title_detail", props: {
title: "Society Hill",
detail: "72 E St Astoria"
}) %>
<% end %>
<%= pb_rails("timeline/item") do |item| %>
<% item.step do %>
<%= pb_rails("timeline/step") do %>
<%= pb_rails("pill", props: { text: "3" , variant: "success" }) %>
<% end %>
<% end %>
<% item.detail do %>
<%= pb_rails("title_detail", props: {
title: "Greenpoint",
detail: "81 Gate St Brooklyn"
}) %>
<% end %>
<% end %>
<% end %>