m.listing

Another core element to lay items out vertically. This can be used alongside layout, so items have spacing between both vertically and horizontally.

Block

.listing

Adds negative margin to the bottom of the element to negate the space between elements on the end.

Elements

    • .listing__item

    • Required

    Adds a margin to the bottom of the element to ensure spacing between items.

Modifiers

    • .listing--tiny

    • Enabled

    Vertical spacing below elements that is one quarter the gutter size.

    • .listing--small

    • Enabled

    Vertical spacing below elements that is one half the gutter size.

    • .listing--large

    • Enabled

    Vertical spacing below elements that is double the gutter size.

    • .listing--huge

    • Enabled

    Vertical spacing below elements that is quadruple the gutter size.

    • .listing--flush

    • Enabled

    Remove spacing between listing items.