Home/Explore/

Timeline

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<div style="
    /* Used to position the left vertical line */
    position: relative;
">
    <!-- Left vertical line -->
    <div style="
        /* Border */
        border-right: 2px solid #aaa;

        /* Positioned at the left */
        left: 16px;
        position: absolute;
        top: 0px;

        /* Take full height */
        height: 100%;
    " />

    <!-- The timeline items container -->
    <ul style="
        /* Reset styles */
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    ">
        <!-- Each timeline item -->
        <li style="margin-bottom: 8px;">
            <!-- The circle and title -->
            <div style="
                /* Center the content horizontally */
                align-items: center;
                display: flex;
            ">
                <!-- The circle -->
                <div style="
                    /* Rounded border */
                    background-color: rgb(170, 170, 170);
                    border-radius: 9999px;

                    /* Size */
                    height: 32px;
                    width: 32px;
                " />

                <!-- The title -->
                <div style="
                    /* Take available width */
                    flex: 1;
                ">
                    ...
                </div>
            </div>

            <!-- The description -->
            <div style="
                /* Make it align with the title */
                margin-left: 48px;
            ">
                ...
            </div>
        </li>

        <!-- Repeat other items -->
        ...
    </ul>
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!