Items

Styles for listings

Summary

Items rather describe a complex list, similar to cards. Items are supposed to help, to list complex content such as article overviews, profile-searches and similar.

Markup

<div class="items v1">
        <div class="item">
            <div class="small image">
                <img src="/img/250px/example-01.jpg" alt="" title="">
            </div>
            <div class="content">
                <a class="header">Item Title</a>
                <div class="meta">
                    <span>Meta-Information</span>
                </div>
                <div class="description">
                    <p>...</p>
                </div>
                <div class="extra">
                    Additional information..
                </div>
            </div>
        </div>
    </div>
</div>

Examples

Item Title
Meta-Information

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Additional information
Item Title
Meta-Information

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Additional information

Divided

Example Image
Beauty and the Beast
Goetheplace

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Old Opera
Frankfurt
Example Image
Loriot
Open-air theater

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Limited
Example Image
Cats
Old Opera

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Boxed

Example Image
Beauty and the Beast
Goetheplace

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Old Opera
Frankfurt
Example Image
Loriot
Open-air theater

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Limited
Example Image
Cats
Old Opera

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Alignment

Hint

The alignment classes can be used on the wrapper .items.v1 for a global implementation, on the .image/.avatar or on .content.

Top Aligned Item
Meta-Information

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Additional Information
Middle Aligned Item
Meta-Information

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Additional Information
Bottom Aligned Item
Meta-Information

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Additional Information