CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Menu

Ctrl + X
Ctrl + C
Ctrl + V
<div style="
    display: flex;
    flex-direction: column;

    /* Border */
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 4px;
">
    <!-- Normal menu item -->
    <div style="
        /* Center the content horizontally */
        align-items: center;
        display: flex;
    ">
        ...
    </div>

    <!-- With hot key -->
    <div style="
        align-items: center;
        display: flex;
        /* Push the hot key to the right */
        justify-content: space-between;
    ">
        <!-- Label -->
        ...
        <!-- Hot key -->
        ...
    </div>

    <!-- With image and hot key -->
    <div style="
        align-items: center;
        display: flex;
        /* Push the hot key to the right */
        justify-content: space-between;
    ">
        <div style="
            align-items: center;
            display: flex;
        ">
            <!-- Image -->
            ...
            <!-- Label -->
            ...
        </div>

        <!-- Hot key -->
        ...
    </div>

    <!-- Divider -->
    <div style="
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        height: 1px;
    " />
</div>

Related patterns

Dot leader

Property list

Split navigation

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!