Menu

Item

An item view presents large collections of site content for display

Download

Types

Items

A group of items.

Responsive Element

Item views are designed to be responsive with images stacking at mobile resolutions.

Header
Description
Additional Details
Header
Description
Additional Details

Content

Image and Content

A item can contain an image and a content group

Content A
Content B
Content C

Header

A item can contain a header

Metadata

A item can contain content metadata

You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
Arrowhead Valley Camp
$1200 1 Month
Buck's Homebrew Stayaway
$1000 2 Weeks
homebrew.
Astrology Camp
$1600 6 Weeks

Link

A item can contain contain links as images, headers, or inside content

To make the entire content of a item link, check out the link variation below
Stevie Feliciano

Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.

Veronika Ossi

Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.

Jenny Hess

Jenny is a student studying Media Management at the New School.

Description

A item can contain a description with a single or multiple paragraphs

Cute Dog

Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.

Many people also have their own barometers for what makes a cute dog.

Extra Content

A item can contain extra content meant to be formatted separately from the main content

Cute Dog
121 Votes

Rating

A item can contain icons signifying a 'like' or 'favorite' action

You can use the rating component to attach events to like and favorite icons
Veronika Ossi
Justen Kitsune

Variations

Divided

Items can be divided to better distinguish between grouped content

The following example uses ui for legibility only. This is not necessary for using ui items
12 Years a Slave
Union Square 14
IMAX
Additional Languages
My Neighbor Totoro
IFC Cinema
Buy tickets
Limited
Watchmen
IFC
Buy tickets

Relaxed

A group of items can relax its padding to provide more negative space

Link Item

A item can be formatted so that the entire contents link to another page

Floated Content

Any content element can be floated left or right

You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
Content A
Action
Content B
Action
Content C
Action

Dimmer Message
Dimmer sub-header