Chronoline

<style>
    .custom-marker {
        display: flex;
        width: 2rem;
        height: 2rem;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        border-radius: 50%;
        z-index: 1;
    }

    .p-chronoline-event-content,
    .p-chronoline-event-opposite {
        line-height: 1;
    }

    @media screen and (max-width: 960px) {
        .customized-chronoline .p-chronoline-event:nth-child(even) {
            flex-direction: row !important;
        }

        .customized-chronoline .p-chronoline-event:nth-child(even) .p-chronoline-event-content {
            text-align: left !important;
        }

        .customized-chronoline .p-chronoline-event-opposite {
            flex: 0;
        }

        .customized-chronoline .p-card {
            margin-top: 1rem;
        }
    }
</style>


<div class="card">
    <h:form>
        <p:messages showDetail="true">
            <p:autoUpdate/>
        </p:messages>

        <h5>Left Align</h5>
        <p:chronoline value="#{chronolineView.events}" var="event">
            <p:commandLink action="#{chronolineView.clickOnEvent(event)}" process="@this">
                <h6 class="mb-0">#{event.status}</h6>
            </p:commandLink>
        </p:chronoline>
    </h:form>
</div>

<div class="card">
    <h5>Right Align</h5>
    <p:chronoline value="#{chronolineView.events}" var="event" align="right">
        #{event.status}
    </p:chronoline>
</div>

<div class="card">
    <h5>Alternate Align</h5>
    <p:chronoline value="#{chronolineView.events}" var="event" align="alternate">
        #{event.status}
    </p:chronoline>
</div>

<div class="card">
    <h5>Opposite Content</h5>
    <p:chronoline value="#{chronolineView.events}" var="event">
        #{event.status}

        <f:facet name="opposite">
            <small class="text-secondary">#{event.date}</small>
        </f:facet>
    </p:chronoline>
</div>

<div class="card">
    <h:form>
        <h5>Customized</h5>
        <p:chronoline value="#{chronolineView.events}" var="event" align="alternate" styleClass="customized-chronoline">

            <p:card>
                <f:facet name="title">
                    #{event.status}
                </f:facet>
                <f:facet name="subtitle">
                    #{event.date}
                </f:facet>

                <p:graphicImage rendered="#{not empty event.image}" width="200" styleClass="shadow-1"
                            value="../../resources/demo/images/product/#{event.image}" alt="#{event.image}"/>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                <p:commandButton value="Read more" styleClass="p-button-flat"/>
            </p:card>

            <f:facet name="marker">
            <span class="custom-marker shadow-1" style="background-color: #{event.color}"><i class="#{event.icon}"/></span>
            </f:facet>
        </p:chronoline>

    </h:form>
</div>

<div class="card">
    <h5>Horizontal</h5>
    <h6>Top Align</h6>
    <p:chronoline value="#{chronolineView.events2}" var="event" layout="horizontal" align="top">
        #{event}
    </p:chronoline>

    <h6>Bottom Align</h6>
    <p:chronoline value="#{chronolineView.events2}" var="event" layout="horizontal" align="bottom">
        #{event}
    </p:chronoline>

    <h6>Alternate Align</h6>
    <p:chronoline value="#{chronolineView.events2}" var="event" layout="horizontal" align="alternate">
        #{event}
    </p:chronoline>
</div>