Listings includes items which have text, but can also have a heading, image, and icon. There’s also a “mode” option to determine whether the items appear small, large, or as cards.
Example Listings
Listing with Small Items
Here is the intro text. These items will be small and demonstrate different image and icon modes.
Default / Logo Mark
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Envelope
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
File - PDF
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Globe
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Pizza Slice
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Light Bulb
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Another Set of Small Items
No Icon But With Image
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
No Icon But With Image
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
No Icon But With Image
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Plain Text Only One
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Plain Text Only Two
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Plain Text Only Three
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Listings Row Sample with Large Items
Location Icon for this Heading
Fusce porttitor nibh ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc laoreet nisl ac lectus. Quisque eu velit eget odio iaculis dignissim. Cras cursus, eros a sagittis accumsan, felis leo facilisis magna, eu fermentum erat ligula a tellus.
Heading with Lock Icon
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Heading Text, Palette Icon
Nulla pretium lorem at diam. Proin sed metus eget eros auctor molestie. Morbi turpis diam, iaculis id, pharetra at, porttitor vitae, nibh. Aliquam id justo vitae nulla dignissim semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Listings Row Sample as Cards
Location Icon for this Heading
Fusce porttitor nibh ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc laoreet nisl ac lectus. Quisque eu velit eget odio iaculis dignissim. Cras cursus, eros a sagittis accumsan, felis leo facilisis magna, eu fermentum erat ligula a tellus.
Heading with Lock Icon
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Heading Text, Palette Icon
Nulla pretium lorem at diam. Proin sed metus eget eros auctor molestie. Morbi turpis diam, iaculis id, pharetra at, porttitor vitae, nibh. Aliquam id justo vitae nulla dignissim semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Listings Row Sample as Cards with Images
Location Icon for this Heading
Fusce porttitor nibh ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc laoreet nisl ac lectus. Quisque eu velit eget odio iaculis dignissim. Cras cursus, eros a sagittis accumsan, felis leo facilisis magna, eu fermentum erat ligula a tellus.
Heading with Lock Icon
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel lectus. Suspendisse urna magna, pretium et, tempor sit amet, luctus id, risus.
Heading Text, Palette Icon
Nulla pretium lorem at diam. Proin sed metus eget eros auctor molestie. Morbi turpis diam, iaculis id, pharetra at, porttitor vitae, nibh. Aliquam id justo vitae nulla dignissim semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.