<%= pb_rails("flex", props: { justify: "evenly" }) do %>
    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "xs"}) do %>
            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                <%= pb_rails("body", props: {
                    text: "Conversation started",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
                <%= pb_rails("body", props: {
                    text: "Trip #12422",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
                <%= pb_rails("body", props: {
                    text: "Refund issue #12422",
                    color: "light"
                }) %>
            <% end %>
        <% end %>
    <% end %>

    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "sm"}) do %>
            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                <%= pb_rails("body", props: {
                    text: "Conversation started",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
                <%= pb_rails("body", props: {
                    text: "Trip #12422",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
                <%= pb_rails("body", props: {
                    text: "Refund issue #12422",
                    color: "light"
                }) %>
            <% end %>
        <% end %>
    <% end %>

    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "md"}) do %>
            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                <%= pb_rails("body", props: {
                    text: "Conversation started",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
                <%= pb_rails("body", props: {
                    text: "Trip #12422",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
                <%= pb_rails("body", props: {
                    text: "Refund issue #12422",
                    color: "light"
                }) %>
            <% end %>
        <% end %>
    <% end %>

    <%= pb_rails("flex/flex_item") do %>
        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "lg"}) do %>
            <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                <%= pb_rails("body", props: {
                    text: "Conversation started",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted"}) do %>
                <%= pb_rails("body", props: {
                    text: "Trip #12422",
                    color: "light"
                }) %>
            <% end %>
            <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
                <%= pb_rails("body", props: {
                    text: "Refund issue #12422",
                    color: "light"
                }) %>
            <% end %>
        <% end %>
    <% end %>
<% end %>