Menu
Item
UI Docs
Getting Started New in 2.9
Introduction
Integrations Build Tools Recipes Glossary
Usage
Theming Layouts
Globals
Reset Site
Elements
Button Container Divider Emoji Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step Text
Collections
Breadcrumb Form Grid Menu Message Table
Views
Ad Card Comment Feed Item Statistic
Modules
Accordion Calendar Checkbox Dimmer Dropdown Embed Flyout Modal Nag Popup Progress Rating Search Shape Sidebar Slider Sticky Tab Toast Transition
Behaviors
API Form Validation State Visibility

Item
An item view presents large collections of site content for display

Types

Items Flexbox

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

An item can contain an image

Content

An item can contain content

Content A
Content B
Content C

Header

An item can contain a header

12 Years a Slave
My Neighbor Totoro
Watchmen

Metadata

An 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
Astrology Camp
$1600 6 Weeks

Link

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

To make the entire content of an 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

An 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

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

Cute Dog
121 Votes

Rating

An 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

States

Disabled

An item can be disabled

Veronika Ossi

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

Variations

Stacking

A table can specify how it stacks items responsively

Header
Description
Additional Details
Header
Description
Additional Details

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

12 Years a Slave
My Neighbor Totoro
Watchmen
12 Years a Slave
My Neighbor Totoro
Watchmen

Link Item

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

Stevie Feliciano
Veronika Ossi
Jenny Hess

Vertical Alignment

Content can specify its vertical alignment

You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
Top Aligned
Middle Aligned
Bottom Aligned

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

Inverted

An item can be inverted to appear on a dark background

You need to make sure to set a dark background on your own or wrap your items in an inverted segment
Arrowhead Valley Camp
$1200 1 Month
Buck's Homebrew Stayaway
$1000 2 Weeks

Dimmer Message
Dimmer sub-header