Yelp Styleguide

The styleguide is a resource for designers, product managers, and developers, providing a common language around Yelp’s UI patterns. We use it to maintain modular front-end code and visual consistency across the web app. Learn about why and how we made the styleguide over on the Engineering Blog.

Typography

  • Header Level 1

    30px/36px 21px/27px 24px/30px
  • Header Level 2

    21px/27px
  • Header Level 2 Alternate

    21px/27px
  • Header Level 3

    16px/21px 18px/24px
  • Header Level 3 Alternate

    16px/21px 18px/24px
  • Header Level 4

    14px/18px
  • This is a paragraph. Morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

    14px/18px 16px/24px
  • 14px/18px 16px/24px
  • Small
    12px/18px 14px/18px
  • Subtle
    14px/18px 16px/24px

To enable yType in admin, add the .ytype class to any parent container.

Capitalization

Yelp uses a combination of sentence casing and Title Casing, depending on context.

Title casing means that every word is capitalized, except articles, coordinating conjunctions, and prepositions of four or fewer letters when they aren't the first word or last word.

Sentence casing means that the first word is capitalized, and the rest of the words are lowercase unless they are proper nouns or proper adjectives. Sentence casing should be the rule, not the exception.

Title case usage
  • Page titles
  • Business names (proper nouns)
  • Drop down menu items
  • Buttons
Sentence case usage
  • Headers
  • Labels
  • Qualifying text
  • Links
  • Normal text

Main Typography utilities

Occasionally, there is a need to distinguish some copy from our normal styles. In these cases, you should use one of the following utilities.

Utility Class Description Demo
.u-bullet-before

Adds a bullet before the text.

Hi Bulletted text
.u-bullet-after

Adds a bullet after the text.

Bulletted text Hi
.u-text-normal

Sets the text color to $normal-text (the default page one).

Normal text: #333333
.u-text-mid

Sets the text color to $mid-text.

Mid text: #666666
.u-text-subtle

Sets the text color to $subtle-text.

Subtle text: #999999
.u-text-large

Sets the text size to $ytype-h3.

Large text 16px/24px
.u-time-stamp

Time Stamp utility.

N.B. Don't use this utility class to get a small and $subtle-text effect, use <small class="u-text-subtle"><small> instead!

October 27, 1985
.u-legal-copy

Legal Copy utility.

N.B. Don't use this utility class to get a small and $mid-text effect, use <small class="u-text-mid"><small> instead!

You must agree to our Terms and Service
  • HR with text

    Generally used in the context of login or sharing, where you might want to use an external option, or the Yelp specific option. Use sparingly and only to differentiate obvious choices.

  • OR
  • <fieldset class="hr-line">
        <legend align="center">OR</legend>
    </fieldset>
    
  • Heading subtext

    Wrap a piece of any heading in <b> to create a sub heading.

  • New businesses San Francisco

    New businesses San Francisco

    New businesses San Francisco

  • <h3>New businesses <b>San Francisco</b></h3>
    <h2>New businesses <b>San Francisco</b></h2>
    <h1>New businesses <b>San Francisco</b></h1>
    
  • Pull quote

    Pull quotes are used to present key excerpts pulled out from the presented document. They should not be used with $yelpy-red text.

  • Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  • <div class="pull-quote">
        <p>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="pull-quote">
        <h3 class="alternate">Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</h3>
    </div>
    

Color

All colors a pulled from the global color palette.

Primary colors

$yelpy-red #d32323

$blue #0073bb

$black #333333

Backgrounds and borders

$background-color #f5f5f5

$medium-background-color #e6e6e6

$border-color #cccccc

$light-border-color #e6e6e6

$ad-border-color #ebc074

Text

$normal-text #333333

$mid-text #666666

$subtle-text #999999

$ghost-text #999999

$error-text #d32323

$elite-text #f15c00

$warning-text #333333

$link-color #0073bb

$green #41a700

Layout utilities

  • Arrange

    The arrange component is a utility for laying out elements side by side. Elements can either be only wide enough to contain its content or they can take up the remaining space in the row (with the .arrange_unit--fill modifier class). Inspired by SUIT CSS.

  • Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  • <div class="arrange">
        <div class="arrange_unit">
            ...
        </div>
        <div class="arrange_unit arrange_unit--fill">
            ...
        </div>
        <div class="arrange_unit">
            ...
        </div>
    </div>
    
  • Modifiers: vertical alignment

    .arrange--middle

    Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    .arrange--bottom

    Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    .arrange--baseline

    Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    Modifiers: gutters

    .arrange--6

    Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    .arrange--12

    Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    .arrange--30

    Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    Modifier: equal width units

    .arrange--equal

    Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    Nested example
    Test
    Test
  • Modifier: wrap cells

    Using inline-block arrange units can wrap.

    arrange--wrap is a replacement for inline-layout.

    A width has to be set on the unit in order for this modifier to work.

    Use the arrange--N-units modifier (1 < N < 7) to get standard units sizes.

  • Filler content
    Filler content
    Filler content
    Filler content
    Filler content
    Filler content
  • <div class="arrange arrange--12 arrange--wrap arrange--3-units">
            <div class="arrange_unit">
                <div class="sample-content sample-content--stylized">Filler content</div>
            </div>
            <div class="arrange_unit">
                <div class="sample-content sample-content--stylized">Filler content</div>
            </div>
            <div class="arrange_unit">
                <div class="sample-content sample-content--stylized">Filler content</div>
            </div>
            <div class="arrange_unit">
                <div class="sample-content sample-content--stylized">Filler content</div>
            </div>
            <div class="arrange_unit">
                <div class="sample-content sample-content--stylized">Filler content</div>
            </div>
            <div class="arrange_unit">
                <div class="sample-content sample-content--stylized">Filler content</div>
            </div>
    </div>
    
  • Add arrange--wrap-bordered to separate rows of arrange--wrap children.

  • Filler content
    Filler content
    Filler content
    Filler content
    Filler content
  • <div class="arrange arrange--12 arrange--wrap arrange--2-units arrange--wrap arrange--wrap-bordered">
            <div class="arrange_unit">
                <div class="sample-content sample-content--stylized">Filler content</div>
            </div>
            <div class="arrange_unit">
                <div class="sample-content sample-content--stylized">Filler content</div>
            </div>
            <div class="arrange_unit">
                <div class="sample-content sample-content--stylized">Filler content</div>
            </div>
            <div class="arrange_unit">
                <div class="sample-content sample-content--stylized">Filler content</div>
            </div>
            <div class="arrange_unit">
                <div class="sample-content sample-content--stylized">Filler content</div>
            </div>
    </div>
    
  • Modifier: grid

    Use arrange_unit--grid modifiers to create arrange_units with static widths. This is a replacement for the grid SCSS mixins. Valid grid modifiers are:

    • arrange_unit--grid-1-2
    • arrange_unit--grid-1-3, arrange_unit--grid-2-3
    • arrange_unit--grid-1-2, arrange_unit--grid-3-4
  • arrange_unit--grid-1-2
    arrange_unit--grid-1-2
    arrange_unit--grid-1-3
    arrange_unit--grid-2-3
    arrange_unit--grid-1-4
    arrange_unit--grid-3-4
  • <div class="arrange u-space-b2">
        <div class="arrange_unit arrange_unit--grid-1-2">
            <div class="sample-content sample-content--stylized">arrange_unit--grid-1-2</div>
        </div>
        <div class="arrange_unit arrange_unit--grid-1-2">
            <div class="sample-content sample-content--stylized u-bg-color-mid">arrange_unit--grid-1-2</div>
        </div>
    </div>
    
    <div class="arrange u-space-b2">
        <div class="arrange_unit arrange_unit--grid-1-3">
            <div class="sample-content sample-content--stylized">arrange_unit--grid-1-3</div>
        </div>
        <div class="arrange_unit arrange_unit--grid-2-3">
            <div class="sample-content sample-content--stylized u-bg-color-mid">arrange_unit--grid-2-3</div>
        </div>
    </div>
    
    <div class="arrange u-space-b2">
        <div class="arrange_unit arrange_unit--grid-1-4">
            <div class="sample-content sample-content--stylized">arrange_unit--grid-1-4</div>
        </div>
        <div class="arrange_unit arrange_unit--grid-3-4">
            <div class="sample-content sample-content--stylized u-bg-color-mid">arrange_unit--grid-3-4</div>
        </div>
    </div>
    

y-container

y-container is an all-in-one container for full-width page sections. Use it in the form of a contextmanager, like so:

#from yelp_styleguide.templates.lib.ycontainer import ycontainer

#with $ycontainer()
    hello, world!
#end with

The ycontainer partial takes two optional arguments:

classname string containing space-delimited additional classes to add to the y-container
background_image_url string containing the URL for a background image. Use in conjunction with y-container--photo-background

Modifiers

ycontainer takes a variety of modifiers that can be passed in via the optional classname parameter:

y-container--bordered Add a border to the bottom of this container
y-container--photo-background Sets up the y-container to be used with a background photo. Set a background photo by passing in background_image_url
y-container--space-n

Vertical spacing modifier. Adds n units of padding to the top and bottom of the container, where n is one of (3, 6, 9, ..., 27, 30).

You can also add y-container--md-space-n and y-container--sm-space-n to set the vertical spacing for medium and small sized viewports, respectively.

y-container--width-n Set the width of the inner content of the container to be n column units where 6 <= n <= 12 (based on a 12 column grid). The content container will be centered inside of the y-container, and will become full width in responsive viewports.
y-container--clouds For the y-container who believes it can fly.

We also provide a handful of named spacing modifiers for very common use cases:

y-container--standard-page Provides the spacing you would want for a standard single-section page.
y-container--shelf Provides spacing equivalent to a top-shelf. Gets smaller in responsive views.
y-container--hero Provides large spacing for hero sections, leaderboards, etc. You must define your own responsive behavior.

Examples

Here are a few ways you might want to use y-container:

#from yelp_styleguide.templates.lib.ycontainer import ycontainer


## Set a classname conditionally
#py classes = ['y-container--shelf', 'y-container--bordered']

#if $foo
    #py $classes.append('u-bg-color')
#end if

#with $ycontainer(classname=' '.join($classes))
    This container will be gray if $foo is truthy.
#end with


## Use a photo as background-image
#with $ycontainer(
    classname='y-container--space-9 y-container--photo-background',
    background_image_url='http://placekitten.com/g/200/300',
)
    This container has a photo background.
#end with
  • Media block

    We use CSS Flexbox with a display:table fallback for Internet Explorer 9 and 8, and the classic float-based media block for older versions.

  • cras justo odio, dapibus ac facilisis in, egestas eget quam cras mattis consectetur purus sit amet fermentum.
  • <div class="media-block">
        <div class="media-avatar">
            ...
        </div>
        <div class="media-story">
            ...
        </div>
    </div>
    
  • Variations

    Add .media-avatar--right to the .media-avatar div to move the avatar to the right of the story.

    cras justo odio, dapibus ac facilisis in, egestas eget quam cras mattis consectetur purus sit amet fermentum.

    Spacing variations

    When the avatar is 60x60 or larger, add .media-block--12 to increase the space between the avatar and story to 12px, .media-block--24 to increase it to 24px, etc.

    cras justo odio, dapibus ac facilisis in, egestas eget quam cras mattis consectetur purus sit amet fermentum.

    Media title

    Add a .media-title to the .media-story to distinguish the title from the rest of the story content.

    cras justo odio, dapibus ac facilisis in, egestas eget quam cras mattis consectetur purus sit amet fermentum.

ySection

deprecated use u-space-b3 (or other spacing utilities) instead.

Used to add consistent vertical spacing between sections.

Show pattern
  • ySection

    deprecated use u-space-b3 (or other spacing utilities) instead.

    Used to add consistent vertical spacing between sections.

  • .ysection
    .ysection.ysection--large for double spacing
    .ysection
  • <div class="ysection sample-content sample-content--stylized">
        .ysection
    </div>
    
    <div class="ysection ysection--large sample-content sample-content--stylized">
        .ysection.ysection--large for double spacing
    </div>
    
    <div class="ysection sample-content sample-content--stylized">
        .ysection
    </div>
    

Inline layout list

deprecated use arrange--wrap instead.

Inline list for laying out items (within a grid column). Defaults to 2 items per "line".

Show pattern
  • Inline layout list

    deprecated use arrange--wrap instead.

    Inline list for laying out items (within a grid column). Defaults to 2 items per "line".

    • Filler content
    • Filler content
    • Filler content
    • Filler content
    • Filler content
    • Filler content
  • <ul class="inline-layout clearfix">
        <li><div class="sample-content sample-content--stylized">Filler content</div></li>
        <li><div class="sample-content sample-content--stylized">Filler content</div></li>
        <li><div class="sample-content sample-content--stylized">Filler content</div></li>
        <li><div class="sample-content sample-content--stylized">Filler content</div></li>
        <li><div class="sample-content sample-content--stylized">Filler content</div></li>
        <li><div class="sample-content sample-content--stylized">Filler content</div></li>
    </ul>
    
  • .up-3 - 3 items per line (instead of 2). Supports up-3 through up-6.

    • Filler content
    • Filler content
    • Filler content
    • Filler content
    • Filler content
    • Filler content

Buttons

Basic buttons

These are the basic buttons that can be rendered using the $ybtn.ybutton helper method.

Small Medium (Default) Big
Secondary Button
(Default)
Primary Button
CTA Button
Green Button
Blue Button

Helper Method

The following example syntax should be used to generate a ybutton.

#import yelp_styleguide.ybutton as ybtn

$ybtn.ybutton(
    tag_name='button',
    ybtn_type=$ybtn.Type.PRIMARY,
    size=$ybtn.Size.BIG,
    content='Awesome Button',
)

Context Manager

Need a context manager instead?

#from yelp_styleguide.templates.lib.ybutton_block import ybutton_block

#with ybutton_block(tag_name='button', size=$ybtn.Size.BIG)
    $icon(24x24_review, color='currentColor') Write a Review
#end with

Parameters

These are the arguments that can be passed to the $ybtn.ybutton helper method.

Name Type Default Description
tag_name string -

The HTML tag to render the button as. Usually a button, in some cases a.

ybtn_type (optional) $ybtn.Type $ybtn.Type.SECONDARY

Type that the ybutton should display as.

Options:

  • $ybtn.Type.SECONDARY
  • $ybtn.Type.PRIMARY
  • $ybtn.Type.CTA
  • $ybtn.Type.GREEN
  • $ybtn.Type.BLUE
size (optional) $ybtn.Size $ybtn.Size.MEDIUM

Size that the ybutton should display as.

Options:

  • $ybtn.Size.SMALL
  • $ybtn.Size.MEDIUM
  • $ybtn.Size.BIG
content (optional) string None The text that you'd like to display inside your awesome new button.
classname (optional) string None A space seperated list of extra class names to render the button with.

Social buttons

Use these buttons for any social media actions.

Icon Only With Content
Facebook
Twitter
Google+
LINE
Github
RSS

Helper Method

The following example syntax should be used to generate a social ybutton.

Note the similarities to $ybtn.ybutton. The differences are:

  • No type param; there is a social_network parameter that takes a $ybtn.Network
  • Content is automagically prepended with the appropriate social icon
  • All social buttons are rendered in the medium size
#import yelp_styleguide.ybutton as ybtn

$ybtn.ybutton_social(
    tag_name='button',
    social_network=$ybtn.Network.TWITTER,
    content='Share on Twitter',
)

Parameters

These are the arguments that can be passed to the $ybtn.ybutton_social helper method.

Name Type Default Description
tag_name string -

The HTML tag to render the button as. Usually a button, in some cases a.

social_network $ybn.Network -

Social network that the ybutton is themed for.

Options:

  • $ybtn.Network.FACEBOOK
  • $ybtn.Network.TWITTER
  • $ybtn.Network.GOOGLE_PLUS
  • $ybtn.Network.LINE
  • $ybtn.Network.GITHUB
  • $ybtn.Network.RSS
content (optional) string None

The text that you'd like to display inside your awesome new button.

This is automagically prepended with the appropriate social icon.

Omit this parameter to render an icon-only button.

classname (optional) string None A space seperated list of extra class names to render the button with.

Button modifiers

Disabled

Pass disabled to the kwargs in order to render a button as disabled.

$ybtn.ybutton(
    tag_name='button',
    content='Disabled Button',
    disabled='disabled',
)

Hyperlink

Use an a tag, and pass a href value to the kwargs in order to render a button with a hyperlink.

Link to Yelp
$ybtn.ybutton(
    tag_name='a',
    content='Link to Yelp',
    href='http://www.yelp.com',
)

Full Width

Provide the extra class .ybtn--full.

$ybtn.ybutton(
    tag_name='button',
    content='Full Width Button',
    classname='ybtn--full',
)

Sibling

Place an element next to a ybutton with the class .ybtn-sibling.

I am next to a button!
$ybtn.ybutton(
    tag_name='button',
    content='Button',
)
<div class="ybtn-sibling">
    I am next to a button!
</div>

Deprecated button modifiers

Show pattern

Deprecated button modifiers

Deal Button

Provide the extra class .ybtn-deal.

$ybtn.ybutton(
    tag_name='button',
    content='Deal Button',
    classname='ybtn-deal',
)

Platform Button

Provide the extra class .ybtn-platform.

$ybtn.ybutton(
    tag_name='button',
    content='Platform Button',
    classname='ybtn-platform',
)

Giant Button

Provide the extra class .ybtn-giant.

$ybtn.ybutton(
    tag_name='button',
    content='Giant Button',
    classname='ybtn-giant',
)

Button group

A button group is a series of buttons laid out next to each other, joined together to create one continuous UI. No extra markup is necessary, just a container with the modifier classes.

Show pattern
  • Button group

    A button group is a series of buttons laid out next to each other, joined together to create one continuous UI. No extra markup is necessary, just a container with the modifier classes.

  • <span class="ybtn-group clearfix">
        $ybutton(...)
        $ybutton(...)
        $ybutton(...)
    </span>
    

Containers

  • Islands

    Islands are used to callout important content in the page.

  • No man is an island. But this element is.
  • <div class="island">
        No man is an island. But this element is.
    </div>
    
  • .island--light – A light weight version of the classic.

    No man is an island. But this element is.
  • .island--blue – A blue version of the classic.

    No man is an island. But this element is.
  • .island--city-scape – Use this island to prompt for more content such as add photos.

    No man is an island. But this element is.
  • Island with full width header. The header needs the .island_header class and it is a child element of .island.

    Monkey Island.
  • Stacked islands

    • Order food
    • Buy a deal
    • Buy a gift certificate
  • <ul class="island-stack island">
        <li class="island-item">Order food</li>
        <li class="island-item">Buy a deal</li>
        <li class="island-item">Buy a gift certificate</li>
    </ul>
    
  • .island--light – A light weight version of the classic.

    • Order food
    • Buy a deal
    • Buy a gift certificate

Ordered and unordered lists

Round bullets

.bullet-list-round

  • Uno
  • Dos
  • Tres
  • Catorce

Square bullets

.bullet-list-square

  • Uno
  • Dos
  • Tres
  • Catorce

Numeric

.numeric-list

  • Uno
  • Dos
  • Tres
  • Catorce

Alpha

.alpha-list

  • Uno
  • Dos
  • Tres
  • Catorce

Inline

.bullet-list-inline

  • Uno
  • Dos
  • Tres
  • Catorce

yList

Standard lists for rendering feeds and lists of content with proper spacing. Often contains media blocks.

.ylist

  • Filler content
  • Filler content
  • Filler content
  • Filler content

Bordered ylist

.ylist.ylist-bordered

  • Filler content
  • Filler content
  • Filler content
  • Filler content
  • Short definition list

    Short means they typically have shorter strings, and this treatment may not be ideal for longer content.

  • Takes Reservations
    Yes
    Wheelchair Accessible
    Definitely
    Ambience
    Hipster, Romantic
  • <div class="short-def-list">
        <dl>
            <dt><span>Takes Reservations</span></dt>
            <dd>Yes</dd>
        </dl>
        <dl>
            <dt><span>Wheelchair Accessible</span></dt>
            <dd>Definitely</dd>
        </dl>
        <dl>
            <dt><span>Ambience</span></dt>
            <dd>Hipster, Romantic</dd>
        </dl>
    </div>
    
  • Dotted definition list

    Note: Dots should not appear next to items with no dd.

  • Takes Reservations
    Yes
    Wheelchair Accessible
    Definitely
    Ambience
    Hipster, Romantic
    Key to life
  • <div class="def-list-dots">
        <dl>
            <dt><span>Takes Reservations</span></dt>
            <dd>Yes</dd>
        </dl>
        <dl>
            <dt><span>Wheelchair Accessible</span></dt>
            <dd>Definitely</dd>
        </dl>
        <dl>
            <dt><span>Ambience</span></dt>
            <dd>Hipster, Romantic</dd>
        </dl>
        <dl class="no-def-item">
            <dt>Key to life</dt>
        </dl>
    </div>
    
  • Toggle List

    This is an accordion-like component, where the visibility of each list element is toggled when clicked.

  • Lorem ipsum dolor sit amet, possim iudicabit accommodare id per, an mei congue labitur, at nemore vidisse vim. Et ignota dicunt blandit per, est ad dolor quaestio. Qui everti sensibus volutpat ut. Sit delenit incorrupte te. Et meis expetenda est, cu idque nominati referrentur quo.

    Est ea rebum altera suscipit, duo ne duis natum efficiantur. Regione urbanitas ex eum. Debet choro omnes eu qui, et vix mandamus pericula. Et pri autem impetus efficiantur, sale bonorum mentitum mei ex. Mel agam democritum ut, graece bonorum facilisi ex sit.

    Lorem ipsum dolor sit amet, possim iudicabit accommodare id per, an mei congue labitur, at nemore vidisse vim. Et ignota dicunt blandit per, est ad dolor quaestio. Qui everti sensibus volutpat ut. Sit delenit incorrupte te. Et meis expetenda est, cu idque nominati referrentur quo.

  • #py toggle_list_content = [
        ToggleListItemPresenter(
            'Section 1',
            '''Lorem ipsum dolor sit amet, possim iudicabit accommodare id per, an mei congue labitur, at nemore vidisse vim.
            Et ignota dicunt blandit per, est ad dolor quaestio. Qui everti sensibus volutpat ut. Sit delenit incorrupte te. Et meis expetenda est, cu idque nominati referrentur quo.'''
        ),
        ToggleListItemPresenter(
            'Section 2',
            '''Est ea rebum altera suscipit, duo ne duis natum efficiantur. Regione urbanitas ex eum. Debet choro omnes
            eu qui, et vix mandamus pericula. Et pri autem impetus efficiantur, sale bonorum mentitum mei ex. Mel agam democritum ut, graece bonorum facilisi ex sit.'''
        ),
        ToggleListItemPresenter(
            'Section 3',
            '''Lorem ipsum dolor sit amet, possim iudicabit accommodare id per, an mei congue labitur, at nemore vidisse vim.
            Et ignota dicunt blandit per, est ad dolor quaestio. Qui everti sensibus volutpat ut. Sit delenit incorrupte te. Et meis expetenda est, cu idque nominati referrentur quo.'''
        ),
    ]
    
    <div class="js-example-toggle-list">
        #for item in $toggle_list_content
            $yelp_styleguide.templates.lib.toggle_list.render_toggle_list_item(
                trigger_text=$item.title,
                toggle_content=$item.content,
                expanded=False,
            )
        #end for
    </div>
    

    <script>
    import { ToggleList } from 'yelp_styleguide/assets/js/toggle_list';
    
    new ToggleList($('.js-example-toggle-list'));
    
    </script>

Iconed list

An iconed list is a special kind of list where the bottom border appears only under the right-aligned content, rather than the icon associated with it. (See business page’s summary box.)

Show pattern
  • Iconed list

    An iconed list is a special kind of list where the bottom border appears only under the right-aligned content, rather than the icon associated with it. (See business page’s summary box.)

    • Open now
    • Open later
  • <ul class="iconed-list">
        <li class="iconed-list-item">
            <div class="iconed-list-avatar">
                ...
            </div>
            <div class="iconed-list-story">Open now</div>
        </li>
        ...
    </ul>
    
  • Beast Bird Fish
    Dog Finch Salmon
    Kangaroo Crow Gefilte
  • <table class="table">
        <thead>
            <tr>
                <th>Beast</th>
                <th>Bird</th>
                <th>Fish</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Dog</td>
                <td>Finch</td>
                <td>Salmon</td>
            </tr>
            <tr>
                <td>Kangaroo</td>
                <td>Crow</td>
                <td>Gefilte</td>
            </tr>
        </tbody>
    </table>
    
  • .table-bordered

    Beast Bird Fish
    Dog Finch Salmon
    Kangaroo Crow Gefilte
  • .table-striped

    Beast Bird Fish
    Dog Finch Salmon
    Kangaroo Crow Gefilte
  • .table-simple

    Beast Bird Fish
    Dog Finch Salmon
    Kangaroo Crow Gefilte
  • .table-analytics

    Beast Bird Fish
    Dog Finch Salmon
    Kangaroo Crow Gefilte
    This row is .selected Parrot Tuna
  • .table-analytics-simple

    Beast Bird Fish
    Dog Finch Salmon
    Kangaroo Crow Gefilte

Forms

  • Text inputs and textareas

    Notes on help text:
    • Inline - Only use the inline style to denote that a field is optional.
    • Block - Use the block style to give context or directions for a particular field. You can also include denote something as optional.
    • Placeholder - Use placeholder text to give an actual example of what you might write (do not include additional text, such as "ex:" or "e.g.").
  • Optional Optional. Yelper name or an email address.
  • <form class="yform">
        <label for="form-text">Label name</label>
        <span class="help-inline">Optional</span>
        <input id="form-text" name="form-text" type="text" placeholder="tacos, cheap dinner, Max's">
        <label for="form-textarea">Label name</label>
        <span class="help-block">Optional. Yelper name or an email address.</span>
        <textarea id="form-textarea" name="form-textarea" placeholder="Placeholder text"></textarea>
        <input type="text" disabled="disabled" placeholder="Disabled placeholder text">
    </form>
    
  • Checkboxes, radios, and selects

  • #import yelp_styleguide.templates.lib.yselect_block
    <form class="yform">
        <fieldset>
            <label class="radio-check"><input type="checkbox"> <span>Check please</span></label>
        </fieldset>
        <fieldset>
            <label class="radio-check"><input name="radio-example" type="radio"> <span>One Fish</span></label>
            <label class="radio-check"><input name="radio-example" type="radio"> <span>Two Fish</span></label>
        </fieldset>
        #with $yelp_styleguide.templates.lib.yselect_block.render()
            <select>
                <option value="1">Value 1</option>
                <option value="2">Value 2</option>
                <option value="3">Value 3</option>
            </select>
        #end with
    </form>
    
  • Error state

    Add error and warning states to your input by adding .input-error or .input-warning and related icons. Note that the markup for inputs and pseudo inputs differ.

  • Please provide a valid email address

    Do you have a more specific category? For example, "italian"

    Success (optional message)

    Lorem

    Please provide a valid email address

    Ipsum

    Do you have a more specific category? For example, "italian"

    Dolor

    Success (optional message)

  • <form class="yform">
        <input type="text" class="input-error" placeholder="Email">
        $icon(18x18_warning, color='error')
        <p class="text-error validator-feedback--inline">Please provide a valid email address</p>
    
        <input type="text" class="input-warning" placeholder="Categories">
        $icon(18x18_warning, color='warning')
        <p class="text-warning validator-feedback--inline">Do you have a more specific category? For example, "italian"</p>
    
        <input type="text" class="input-success" placeholder="Email" value="someone@example.com">
        $icon(18x18_checkmark_badged, color='success')
        <p class="text-success validator-feedback--inline">Success (optional message)</p>
    
        <div class="pseudo-input input-error">
            <span class="pseudo-input_text">Lorem</span>
            <span class="pseudo-input_field-holder">
                <input class="pseudo-input_field" placeholder="Email">
            </span>
            $icon(18x18_warning, color='error')
        </div>
        <p class="text-error validator-feedback--inline">Please provide a valid email address</p>
    
        <div class="pseudo-input input-warning">
            <span class="pseudo-input_text">Ipsum</span>
            <span class="pseudo-input_field-holder">
                <input class="pseudo-input_field" placeholder="Categories">
            </span>
            $icon(18x18_warning, color='warning')
        </div>
        <p class="text-warning validator-feedback--inline">Do you have a more specific category? For example, "italian"</p>
    
        <div class="pseudo-input input-success">
            <span class="pseudo-input_text">Dolor</span>
            <span class="pseudo-input_field-holder">
                <input class="pseudo-input_field" placeholder="Email" value="someone@example.com">
            </span>
            $icon(18x18_checkmark_badged, color='success')
        </div>
        <p class="text-success validator-feedback--inline">Success (optional message)</p>
    </form>
    
  • Form layouts with arrange

    Form elements can be structured on a page using arrange.

  • Optional
    Optional
    Optional
    Optional
    Optional
  • <form class="yform">
        <div class="arrange arrange--12">
            <div class="arrange_unit arrange_unit--fill">
                <label for="form-arrange-1-text-1">Label name</label>
                <span class="help-inline">Optional</span>
                <input id="form-arrange-1-text-1" name="form-arrange-1-text-1" type="text" placeholder="tacos, cheap dinner, Max's">
            </div>
            <div class="arrange_unit u-nowrap">
                <label for="form-arrange-1-text-2">Label name</label>
                <span class="help-inline">Optional</span>
                <input id="form-arrange-1-text-2" name="form-arrange-1-text-2" type="text" placeholder="tacos, cheap dinner, Max's">
            </div>
        </div>
    
        <div class="arrange arrange--12 arrange--equal">
            <div class="arrange_unit">
                <label for="form-arrange-2-text-1">Label name</label>
                <span class="help-inline">Optional</span>
                <input id="form-arrange-2-text-1" name="form-arrange-2-text-1" type="text" placeholder="tacos, cheap dinner, Max's">
            </div>
            <div class="arrange_unit">
                <label for="form-arrange-2-text-2">Label name</label>
                <span class="help-inline">Optional</span>
                <input id="form-arrange-2-text-2" name="form-arrange-2-text-2" type="text" placeholder="tacos, cheap dinner, Max's">
            </div>
            <div class="arrange_unit">
                <label for="form-arrange-2-text-3">Label name</label>
                <span class="help-inline">Optional</span>
                <input id="form-arrange-2-text-3" name="form-arrange-2-text-3" type="text" placeholder="tacos, cheap dinner, Max's">
            </div>
        </div>
    
        <div class="arrange arrange--12">
            <div class="arrange_unit arrange_unit--fill">
                <label class="pseudo-input">
                    <span class="pseudo-input_text">Hello</span>
                    <span class="pseudo-input_field-holder">
                        <input name="form-arrange-3" placeholder="tacos, cheap dinner, Max’s" value="" class="pseudo-input_field" type="text">
                    </span>
                </label>
            </div>
            <div class="arrange_unit">
                    $ybutton('button', content='Submit', ybtn_type='primary', size='small')
            </div>
        </div>
    
        <div class="arrange arrange--12">
            <div class="arrange_unit arrange_unit--fill">
                <label for="form-arrange-4-select">Label name</label>
                    #with $yelp_styleguide.templates.lib.yselect_block.render()
                        <select id="form-arrange-4-select" name="form-arrange-4-select">
                            <option value="1">Value 1</option>
                            <option value="2">Value 2</option>
                            <option value="3">Value 3</option>
                        </select>
                    #end with
            </div>
            <div class="arrange_unit u-nowrap">
                <fieldset>
                    <label class="radio-check" for="form-arrange-5-radio-1"><input id="form-arrange-5-radio-1" name="radio-example" type="radio"> <span>One Fish</span></label>
                    <label class="radio-check" for="form-arrange-5-radio-2"><input id="form-arrange-5-radio-2" name="radio-example" type="radio"> <span>Two Fish</span></label>
                    <label class="radio-check" for="form-arrange-5-radio-3"><input id="form-arrange-5-radio-3" name="radio-example" type="radio"> <span>Red Fish</span></label>
                    <label class="radio-check" for="form-arrange-5-radio-4"><input id="form-arrange-5-radio-4" name="radio-example" type="radio"> <span>Blue Fish</span></label>
                </fieldset>
            </div>
            <div class="arrange_unit">
                    $ybutton('button', content='Submit', ybtn_type='primary', size='small')
            </div>
        </div>
    </form>
    
  • Pseudo Inputs

    The pseudo input is an enhanced input field that allows one to add a custom descriptor inline with the input field. Additional JavaScript is required to toggle the .is-focused state on the pseudo input when .pseudo-input_field is focused.

  • <form class="yform">
        <label class="pseudo-input">
            <span class="pseudo-input_text">Find</span>
            <span class="pseudo-input_field-holder">
                <input placeholder="tacos, cheap dinner, Max’s" value="" class="pseudo-input_field" type="text">
            </span>
        </label>
    </form>
    <form class="yform">
        <label class="pseudo-input">
            <span class="pseudo-input_text">
                $icon(18x18_external_link, color='neutral-gray')
            </span>
            <span class="pseudo-input_field-holder">
                <input placeholder="tacos, cheap dinner, Max’s" value="" class="pseudo-input_field" type="text">
            </span>
        </label>
    </form>
    
  • Currency inputs

    This formats the input with a localized currency symbol.

  • <form class="yform">
            #with $yelp_styleguide.templates.lib.currency_input.currency_input('USD', $interface_locale)
                <input type="text" value="3.00" class="pseudo-input_field">
            #end with
            #with $yelp_styleguide.templates.lib.currency_input.currency_input('EUR', $interface_locale)
                <input type="text" value="3.00" class="pseudo-input_field">
            #end with
    </form>
    
  • Phone input

    This provides a dropdown for users to select a country code and input a national phone number.

  • <form class="yform">
            $yelp_styleguide.templates.lib.phone_input.render([1, 33, 49], '(123) 456-7890', 1)
    </form>
    
  • Inline search form

    Renders a continuous inline search form. Use render_post if you need to make a POST request.
    Both versions have corresponding context managers that allow you to add additional (typically hidden) form fields.

  • $yelp_styleguide.templates.lib.inline_search_form.render_get(SearchFormPresenter)

Radio lists

Radio buttons

A list of radio inputs disguised as buttons.

Radio links

A list of radio inputs disguised as links.

Inline form fields

Use arrange for layout instead.

Experimental feature for laying out fields inline, but supporting i18n friendly labels. Fields expand to accomodate length of label. Needs a better component name.

Show pattern
  • Inline form fields

    Use arrange for layout instead.

    Experimental feature for laying out fields inline, but supporting i18n friendly labels. Fields expand to accomodate length of label. Needs a better component name.

  • <form class="yform">
        <div class="inline-form-fields">
            <div class="field">
                <label>First Name</label>
                <input type="text">
            </div>
            <div class="field field-minimal">
                <label>Label name</label>
                <input type="text">
            </div>
        </div>
    </form>
    

Inline yform

Use arrange for layout instead.

Show pattern
  • Inline yform

    Use arrange for layout instead.

  • <form class="yform yform-inline">
        <div class="yform-input-field-wrap">
            <input type="text">
        </div>
        $ybutton(...)
    </form>
    

Nested icon labels

Use pseudo inputs instead.

Show pattern
  • Nested icon labels

    Use pseudo inputs instead.

  • <form class="yform">
        <div class="nested-icon-label">
            $icon(...)
            <input placeholder="http://yelp.com/biz/jacobs-pickle-san-francisco" type="text">
        </div>
    </form>
    

Placeholder shim

The placeholder attribute is not supported by ie9 or below. Use this class to display a text block above the input.

Show pattern
  • Placeholder shim

    The placeholder attribute is not supported by ie9 or below. Use this class to display a text block above the input.

  • <form class="yform">
        <label class="placeholder-sub">Email address</label>
        <input type="text" placeholder="Email address">
    </form>
    

Interactive

  • Hovercard

    Hovercard enables you to display related information with the hovered label or link.

  • Hover Over Me
  • <div class="js-container-of-links">
        <a class="js-target-link" href="javascript:;">Hover Over Me</a>
    </div>
    

    // Namespace imports
    import Basic from 'yelp_styleguide/assets/js/hovercard/basic';
    import Strategy from 'yelp_styleguide/assets/js/hovercard/strategy';
    
    ...
    var container = $('.js-container-of-links');
    if (!container.length) { return; }
    
    var exampleStrategy = new Strategy();
    
    var exampleHovercard = new Basic(null, exampleStrategy);
    exampleHovercard.children.innerContainer.setHTML("You can <b>see</b> me because you've hovered over me, <br/> you can also add <a href='#section-hovercard'>HTML tags</a> here!");
    exampleHovercard.bindToSelector('.js-target-link', container);
    
    $(document.body).append(exampleHovercard.container);
    ...
    
  • Modals

    Modals allow you to render content in a popup-like container over the page.

  • <div class="js-modal-demo-contents hidden">
        #with $yelp_styleguide.templates.lib.modal.modal_head()
            <h2>Particularly Scientific Information</h2>
        #end with
        #with $yelp_styleguide.templates.lib.modal.modal_body()
            <form class="yform">
                <label for="who">Who</label>
                <input id="who" type="text">
                <div class="modal_section u-bg-color">
                    Use <code>.modal_section</code> for full-width sections in a modal.
                </div>
                <label for="what">What</label>
                <input id="what" type="text">
                <label for="when">When</label>
                <input id="when" type="text">
            </form>
            <span class="subtle-text">
                * Science Optional
            </span>
            <div class="modal_section u-bg-color">
                A <code>.modal_section</code> will sit flush with the bottom of the modal if it is the last child.
            </div>
    
        #end with
    </div>
    
    ...
    import { Modal, Options, Size } from 'yelp_styleguide/assets/js/modal';
    
    var contents = $('.js-modal-demo-contents').clone().removeClass('hidden js-modal-demo-contents');
    var modal = new Modal(
        new Options(Size.medium)
    );
    modal.setContent(contents);
    modal.show();
    
  • Spinner

    Use a spinner to show that an action is currently in progress. After the action is complete the spinner is hidden. Make sure to set the container's position to relative, so that the spinner is positioned correctly in relation to its parent. .u-relative is a handy utility class to accomplish this.

  • import { LargeSpinner } from 'yelp_styleguide/assets/js/spinner';
    
    // Make sure to set the container's position to relative.
    var spinnerContainer = $('.js-styleguide-spinner-container');
    var spinner = new LargeSpinner(null);
    var spinnerButton = $('.js-spinner-show');
    
    spinner.hide();
    spinnerContainer.append(spinner.container);
    
    spinnerButton.on('click', function() {
        spinner.show();
        setTimeout(function() {
            spinner.hide();
        }, 5000);
    });
    
  • Alerts

    For things like application alerts, status messages, biz alerts, and announcements. Use the contextmanager to wrap your content in an alert. Pass in a bool for whether or not the alert is dismissible.

  • $yelp_styleguide.templates.lib.alert.alert_info - Just lettin’ you know.

    I have a bad feeling about this. That’s no moon, it’s a space station.
    ×
  • $yelp_styleguide.templates.lib.alert.alert_success - A successful thing happened.

    I have a bad feeling about this. That’s no moon, it’s a space station.
    ×
  • $yelp_styleguide.templates.lib.alert.alert_error - Something bad happened.

    I have a bad feeling about this. That’s no moon, it’s a space station.
    ×
  • $yelp_styleguide.templates.lib.alert.alert_warning - Like an info alert, but slightly scarier.

    I have a bad feeling about this. That’s no moon, it’s a space station.
    ×
  • #with $yelp_styleguide.templates.lib.alert.alert_info(is_dismissible=True)
        <b>I have a bad feeling about this.</b>
        That’s no moon, it’s a <a href="#">space station</a>.
    #end with
    
    #with $yelp_styleguide.templates.lib.alert.alert_success(is_dismissible=True)
        <b>I have a bad feeling about this.</b>
        That’s no moon, it’s a <a href="#">space station</a>.
    #end with
    
    #with $yelp_styleguide.templates.lib.alert.alert_error(is_dismissible=True)
        <b>I have a bad feeling about this.</b>
        That’s no moon, it’s a <a href="#">space station</a>.
    #end with
    
    #with $yelp_styleguide.templates.lib.alert.alert_warning(is_dismissible=True)
        <b>I have a bad feeling about this.</b>
        That’s no moon, it’s a <a href="#">space station</a>.
    #end with
    
  • Use site_alert_* for site-wide alerts. Should be shown above the header. Needs to be actionable or dismissible.

    I have a bad feeling about this. That’s no moon, it’s a space station.
    ×
  • #with $site_alert_info()
        <b>I have a bad feeling about this.</b>
        That’s no moon, it’s a <a href="#">space station</a>.
    #end with
    
  • Use section_alert_* for alerts that apply to a single section only (such as a form). The warning is optionally non-dismissible; all are dismissible by default.

    I have a bad feeling about this. That’s no moon, it’s a space station.
    ×
  • #with $section_alert_error()
        <b>I have a bad feeling about this.</b>
        That’s no moon, it’s a <a href="#">space station</a>.
    #end with
    
  • Progress bar

    Classic progress bar for reporting data.
  • Business Visibility

  • $yelp_styleguide.templates.lib.progress_bar.render(
        ProgressBarPresenter(
            percent=60,
            title='Business Visibility',
            subtitle=None,
        )
    )
    
  • render_empty()

  • .progress-bar--minimal

    I may be minimal, but I am strong! 33%

  • .progress-bar--media

  • Badges

    Badges help easily highlight new or unread items.

  • 42 Badge
  • <span class="ybadge">42</span>
    <span class="ybadge">Badge</span>
    
  • Notification badge

    Add .ybadge-notification to create notification badges, which would usually contain a number indicating the number of notifications available to the user.

    42 Notification badge
  • Large badge

    Add .ybadge-large to create large badges.

    42 42 Badge (large) Notification badge (large)
  • Offer pill

    Add .ybadge--offer-pill for a pill badge with capitalized text.

    42 Offer pill/badge 42 Offer pill/badge (large) 42 Offer pill/badge 42 Offer pill/badge

Yelp Objects

  • User Passports

    User Passports Components

  • Full Passport

    Includes avatar, profile link, city, stats and extra info (eg. elite badge)

    • 5 friends
    • 5 reviews
  • $yelp_styleguide.templates.lib.user.parts.render_medium_photo_passport(UserPresenter[, interface_locale])
  • Medium passport

    Includes avatar, profile link, city, stats without labels and extra info (eg. elite badge)

  • $yelp_styleguide.templates.lib.user.parts.render_medium_photo_passport_no_text_stats(UserPresenter)
  • Slim passport

    Includes small avatar, profile link, stats and extra info (eg. elite badge) without labels

    • Qype User darw…
    • 5
    • 5
  • $yelp_styleguide.templates.lib.user.parts.render_slim_photo_passport(UserPresenter)
  • Business Owner Passports

    Business Owner Passports Components

  • Standard passport

    Includes avatar, link to the business page and owner label.

    Darwin S.
    Owner
  • $yelp_styleguide.templates.lib.business_owner.passports.render_passport(BusinessOwnerPresenter)
  • Standard passport without Business Link

    Darwin S.
    Owner
  • ## BusinessOwnerPresenter.business_url == None $yelp_styleguide.templates.lib.business_owner.passports.render_passport(BusinessOwnerPresenter)
  • Slim passport

    Includes small avatar, link to the business page and owner label

    Darwin S.
    Owner
  • $yelp_styleguide.templates.lib.business_owner.passports.render_slim_passport(BusinessOwnerPresenter)
  • Slim passport without Business Link

    Darwin S.
    Owner
  • ## BusinessOwnerPresenter.business_url == None $yelp_styleguide.templates.lib.business_owner.passports.render_slim_passport(BusinessOwnerPresenter)
  • Business Passports

    Business Passport Components

  • Standard passport

    Includes photo thumbnail, link to the business page, rating, and optionally categories and price.

    3.0 star rating
    777 reviews
  • ## BusinessPresenter.price_range and CategoryPresenter_list are optional.
    ## Specifically:
    ## BusinessPresenter.price_range can be None
    ## CategoryPresenter_list can be an empty list
    
    $yelp_styleguide.templates.lib.business.passports.render_passport(BusinessPresenter, CategoryPresenter_list)
    
  • Standard passport without Price

  • ## BusinessPresenter.price_range == None
    $yelp_styleguide.templates.lib.business.passports.render_passport(BusinessPresenter)
    
  • Passport without links

    An alternative version of the standard passport that does not include any links. Never includes price range.

    3.0 star rating
    777 reviews
    Restaurants, Pizza
  • $yelp_styleguide.templates.lib.business.passports.render_passport_without_links(BusinessPresenter)
    
  • Detailed passport

    An alternative version of the standard passport that includes location information.

    3.0 star rating
    777 reviews
    Middle of Nowhere, CA
  • $yelp_styleguide.templates.lib.business.passports.render_detailed_listing(BusinessPresenter)
    
  • List passport

    A business passport for lists that includes avatar, business name, location, categories, and optionally the index of the item in the list (e.g. 1.)

    123 Street, Middle of Nowhere, CA
  • $yelp_styleguide.templates.lib.business.passports.render_list_passport(BusinessPresenter, categories_presenters_list[, index=1])
    
  • Slim passport

    Just the essentials: business name, review count, and smaller thumbnail.

    3.0 star rating
    777 reviews
  • $yelp_styleguide.templates.lib.business.passports.render_slim(BusinessPresenter)
    
  • Photo Box style passport

    Renders a business photo with name, rating, and optionally neighborhood in overlay.

    Business Name
    3.0 star rating
    777 reviews
    Mission
    Business Name
  • ## size is one of $yelp_styleguide.presentation.avatar.business_blank_photos
    $yelp_styleguide.templates.lib.business.passports.render_photo_box(BusinessPresenter, size)
    
  • User Review

    A user review component with user passport and review content.

    • 5 friends
    • 5 reviews
    3.0 star rating
    5/4/2015 Updated review

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida ullamcorper ullamcorper. Quisque sagittis a nunc vitae blandit. Nunc auctor erat quis ipsum finibus eleifend. Proin vehicula mattis magna sagittis congue. Aliquam et quam odio. Suspendisse at vulputate enim. Vivamus at tortor nec risus maximus sodales id at enim. Sed eget neque risus. Fusce euismod lorem eu neque pharetra dictum. Integer fringilla odio in odio auctor bibendum. Praesent ultricies faucibus dapibus. Nam vestibulum eros et nisi tempor eleifend. Vestibulum tortor nibh, dapibus vel tincidunt quis, egestas hendrerit metus. Ut tincidunt massa eu gravida pellentesque. Nam suscipit sollicitudin odio, a eleifend ipsum molestie id. Aliquam luctus malesuada odio at finibus.

  •     
        $yelp_styleguide.templates.lib.review.render(
            ReviewPresenter,
            locale,
            action_links_list,
            enable_microformats,
        )
        
  • Compact Review

    A compact and (optionally) expandable review.

    3.0 star rating
    5/4/2015 Updated review

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida ullamcorper ullamcorper. Quisque sagittis a nunc vitae blandit. Nunc auctor erat quis ipsum finibus eleifend. Proin vehicula mattis magna sagittis congue. Aliquam et quam odio. Suspendisse at vulputate enim. Vivamus at tortor nec risus maximus sodales id at enim. Sed eget neque risus. Fusce euismod lorem eu neque pharetra dictum. Integer fringilla odio in odio auctor bibendum. Praesent ultricies faucibus dapibus. Nam vestibulum eros et nisi tempor eleifend. Vestibulum tortor nibh, dapibus vel tincidunt quis, egestas hendrerit metus. Ut tincidunt massa eu gravida pellentesque. Nam suscipit sollicitudin odio, a eleifend ipsum molestie id. Aliquam luctus malesuada odio at finibus.

  • $yelp_styleguide.templates.lib.review.render_compact( ReviewPresenter, locale, action_links_list, enable_microformats, expandable=True, )
  • Star selector

    Allows the user to select a 1-5 star rating. Initialize with an int for the default star rating, or 0 for no rating. Rolling over a star will show the rating’s (nonconfigurable) description text.

    Optionally provide a BusinessPresenter to customize the star selector for the given business.

  • Rating

    Yay! I'm a fan.

  • ## rating is an int beween 0 and 5
    $yelp_styleguide.templates.lib.star_selector.render(rating[, BusinessPresenter])

Stars

render_medium()

render_large()

render_very_large()

1.0 star rating
1.0 star rating
1.0 star rating
1.5 star rating
1.5 star rating
1.5 star rating
2.0 star rating
2.0 star rating
2.0 star rating
2.5 star rating
2.5 star rating
2.5 star rating
3.0 star rating
3.0 star rating
3.0 star rating
3.5 star rating
3.5 star rating
3.5 star rating
4.0 star rating
4.0 star rating
4.0 star rating
4.5 star rating
4.5 star rating
4.5 star rating
5.0 star rating
5.0 star rating
5.0 star rating
  • Badge Banners

    A way to showcase achievements, special accolades, and unique tags.

  • Hot New Business Banner

    Hot New Business
  • $yelp_styleguide.templates.lib.badge_banner.render(BadgeBannerPresenter.create_from_badge_type('Hot New Business', BadgeTypes.HOT))
    
  • Become the King Banner

    Max H. Became the King
  • Review of the Day Banner

    Review of the Day
  • Hundred Millionth Review Banner

    Yelp's 100 Millionth Review!
  • Bookmark Banner

    Trending Bookmarks

Default images

Add action links and statuses to photo box thumbnails with the .photo-box--interactive class.

Action links

Add action links to the top left of a photo box.

.photo-box_actions .photo-box_action-link

Minor actions should appear on the right.

.photo-box_actions--right

Status

Photo box statuses should appear in the lower right.

.photo-box_status

Indicate that a photo has an error associated with it with:

.photo-box--has-error

  • Photo Box Grid

    Arrange multiple photo boxes of varying sizes in a grid.

  • $yelp_styleguide.templates.lib.photo.render_photo_grid([$large_photo_presenter, $small_photo_presenter, $small_photo_presenter])
    
  • Modifier: puzzle

    The layout of the grid varies based on the number of photos. Supports 1..3 photos.

    The grid's parent is required to have a fixed height. Works better with photo boxes rendered using background-image -- pass in photo-box-grid--fill as a modifier to enable this.

    One photo: full width

    Two photos: half and half

    Three photos: one large, two small

  • <div class="parent-with-fixed-height">
        $yelp_styleguide.templates.lib.photo.render_photo_grid(
            photos=$list_of_photo_presenters,
            modifiers=('photo-box-grid--puzzle', 'photo-box-grid--fill'),
        )
    </div>
    

Marketing components

  • Call us island

    A simple island that displays a CTA phone number. Often used in conjunction with a header.

  • Marketing page header

    Phone number Call (123) 456-7890
  • $common_templates.lib.marketing.call_us_island.render_minimal_cta($country, $phone_number)
    
  • Call us CTA island

    Call to action which can contain different actions based on page and logged in state.

  • or Log in
    Phone number Call (123) 456-7890
    Phone number Call (123) 456-7890
  • ## Logged out
    $common_templates.lib.marketing.call_us_island.render_full_cta_logged_out($phone_number, $cta_url, $country)
    
    ## Logged in
    $common_templates.lib.marketing.call_us_island.render_full_cta_logged_in($phone_number, $cta_text, $cta_url, $country, $use_button, $extra_phone_text, $marketing_text, $cta_button_classes)
    
  • Marketing catcher text

    Used for introduction text below a heading.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • <div class="intro-text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
    
  • Hero image

    Hero image with an optional toggler underneath.

  • Appears on: Search results · Yelp pages · Phone
  • <div class="marketing-hero clearfix section--not-responsive">
        <div class="img-wrap">
            <img class='marketing-hero-img' src='' alt='' id='marketing-hero-img-#'>
        </div>
        <div class="marketing-toggler pull-right">
            Appears on:
            <a href="#" class="tab" data-tab-id="marketing-hero-img-#">Search results</a>
            ...
        </div>
    </div>
    
  • Marketing block

    This uses our existing media block component but has specific requirements and content for marketing pages.

  • This is a section heading

    We love this fruit

    Egestas eget quam cras mattis consectetur purus sit amet fermentum.

    Do we really?

    Egestas eget quam cras mattis consectetur purus sit amet fermentum.

  • <div class="media-block marketing-block marketing-block--responsive">
        <div class="media-avatar">
            ...
        </div>
        <div class="media-story">
            <div class="section-header">
                <h2>This is a section heading</h2>
            </div>
            <h3>We love this fruit</h3>
            <p>Egestas eget quam cras mattis consectetur purus sit amet fermentum.</p>
            <h3>Do we really?</h3>
            <p>Egestas eget quam cras mattis consectetur purus sit amet fermentum.</p>
            ...
        </div>
    </div>
    
  • Service options

  • Option 1

    Option subheader

    Some description explaining what the option is

    Badge text

    Option 2

    Option subheader

    Some description explaining what the option is

    Choose me!

    Option 3

    Option subheader

    Some description explaining what the option is

    Pick me please
    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adipiscing elit
    Learn more
    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adipiscing elit
    Learn more
    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adipiscing elit
    Learn more

    Option 1

    Option subheader

    Some description explaining what the option is

    Badge text
    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adipiscing elit
    Learn more

    Option 2

    Option subheader

    Some description explaining what the option is

    Choose me!
    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adipiscing elit
    Learn more

    Option 3

    Option subheader

    Some description explaining what the option is

    Pick me please
    • Lorem ipsum
    • Dolor sit amet
    • Consectetur adipiscing elit
    Learn more
  • <div class="service-options">
        <div class="flex-container">
            ...
            <div class="service-option island flex-box">
                <div class="header">
                    <h2>Option title</h2>
                    <h3>Option subheader</h3>
                </div>
                <p>
                    Some description explaining what the option is
                </p>
    
                $ybutton('a', 'primary', ..., 'Button text', ...)
            </div>
            ...
        </div>
    </div>
    <div class="feature-lists">
        <div class="flex-container">
            ...
            <div class="feature-list-wrapper flex-box">
                <ul class="service-feature-list ylist ylist-bordered">
                    <li>$icon(18x18_checkmark, color='success', classname='u-space-r-half') Lorem ipsum</li>
                </ul>
                <a class="service-learn-more-link" href="#">Learn more</a>
            </div>
            ...
        </div>
    </div>
    

Utilities

All the utilities are namespaced (prefixed) with u- and define single-purpose !important CSS rules.

Typography utilities

Text truncation, breaking, and alignment.

See also the main typography section.

Utility Class Description Demo
.u-text-italic

Make the text italic.

I love <3 Ital...ic
.u-nowrap

Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered.

Often used with arrange's arrange_unit to prevent the content from wrapping.

Title
No wrapping action action2
.u-text-centered

Center aligns text.

Centered Hamster 🐹
.u-text-right

Right aligns text.

Right aligned Hamster 🐹
.u-text-left

Left aligns text.

Left aligned Hamster 🐹
.u-text-reset

Resets the text alignment to left for ltr pages, and right for rtl pages.

LTR reset 🐹

RTL reset 🐹

.u-text-unselectable

Make text in a container unselectable.

N.B. For compatibility with older versions of IE, add: unselectable="on" to the container's attributes.

Unselectable Hamster 🐹

.u-text-truncate

Truncates the contained text with an ellipsis ("...") instead of going to a new line. The text to truncate must be a block.

Very loooooooooooooooooooooooooooong text

.u-break-word

Breaks words when too long to avoid text overflow.

Notbreakword notbreakword notbreakword notbreakword breakwordbreakwordbreakwordbreakwordbreakwordbreakwordbreakwordbreakwordbreakword.

.u-hide-overflow

Hides overflowing content.

This is a looooongwordddddddddddddddddddddddddddddddddddddddddd
.u-scrollbars

Shows vertical and horizontal scrollbars/makes the container scrollable when there is overflowing content.

This is a looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
.u-vertical-scrollbar

Shows vertical scrollbars/makes the container scrollable when there is overflowing content. Works only when the element's [max-]height is not auto ie. has a fixed height set.

This is a looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
.u-horizontal-scrollbar

Shows horizontal scrollbars/makes the container scrollable when there is overflowing content.

This is a looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
this is another looooongwordddddddddddddddddddddddddddddddddddddddddd
.u-text-highlighted

Highlight the text by changing its background and foreground.

Highlighted text
.u-text-highlighted-hover

Highlight the text on hover or focus.

Hover or focus me
.u-text-alpha

Slightly transparent text for use on colored backgrounds.

I'm a little bit colorful

Link utilities

Utility Class Description Demo
.u-pseudo-link

Styles a button/any text as a text link.

.u-decoration-none

Sets the text-decoration property to none eg. removes the underline from links.

Plain link
.u-cursor-pointer

The cursor is a pointer and indicates a clickable area.

Hover me

Layout utilities

Clearfix, floats, and new block formatting contexts.

Utility Class Description Demo
.u-clearfix

Contains and clears (floated) child elements.

ye
lp
The border is applied on the .u-clearfix container. Try removing the class using your browser's devtools and see what happens.
.u-pull-left

Floats an element to the left.

Left-wing
Other content
.u-pull-right

Floats an element to the right.

Other content
Right-wing
.u-nbfc

Create a new block formatting context. This will clip overflow. A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

E.g. you can have a floated sidebar with a fixed width and a main content column using u-nbfc will take the remaining space.

Read more

Float left block
Nbfc block
.u-nbfc-alt

Alternative method for creating a new block formatting context. Preserves overflow but it might break down in some browsers when elements within this element exceed its width. In some cases this could be avoided by combining this utility with .u-break-word.

Float left block
Nbfc block

Display

Alter the element display property / visibility.

Utility Class Description Demo
.u-offscreen

Visually hides an element but leaves it available to screen readers. Please use this utility unless you don't want your content to be accessible.

I think that you are awesome! I swear there is a visually hidden element in this column :)
.u-hidden

Hides an element - from screenreaders too. Uses display: none.

I think that you are awesome! I swear there is a hidden element in this column :)
.u-block

Sets the element's display property to block.

This is a span, This is a span, This is a block-level span
.u-inline-block

Sets the element's display property to inline-block.

This is a span,
An inline-block div
.u-inline

Sets the element's display property to inline.

This is a span,
This is an inline div

Positioning utilities

Utility Class Description Demo
.u-relative

Sets the element's position to relative.

Relative Hamster 🐹
.u-absolute

Sets the element's position to absolute.

Absolute Hamster 🐹
.u-fixed

Sets the element's position to fixed.

Fixed Hamster 🐹
N.B. the hamster doesn't have the utility class applied in this demo.
.u-sticky

Sets the element's top, right, bottom, left to 0.

N.B. this only works when the element's position is not static.

This method is preferred to setting the width and height to 100% and can be used for overlays.

Sticky Hamster 🐹
.u-sticky-top

Sets the element's top to 0.

Sticky-top Hamster 🐹
.u-sticky-right

Sets the element's right to 0.

Sticky-right Hamster 🐹
.u-sticky-bottom

Sets the element's bottom to 0.

Sticky-bottom Hamster 🐹
.u-sticky-left

Sets the element's left to 0.

Sticky-left Hamster 🐹
.u-dead-center

Dead centers (vertically and horizontally) an element.

N.B. This class must be set on the parent of the element that you want to center. The parent element's height should be fixed ie. different than auto.

Dead Centered Hamster 🐹
.u-dead-center-alt

Alternative method to dead center.

N.B. This class must be set on the parent of the element that you want to center. The parent element's height should be fixed ie. different than auto.

The content will overflow when exceeding the parent's height.

Dead Centered Hamster 🐹

Vertical Alignment

Works for elements whose position is inline, inline-block or table-cell

Utility Class Description Demo
.u-align-top

Align items to the top.

Look ma, top aligned
.u-align-middle

Align items to the middle.

Look ma, middle aligned
.u-align-baseline

Align items to the baseline.

Look ma, baseline aligned
.u-align-bottom

Align items to the bottom.

Look ma, bottom aligned

Flexbox utilities

Utilities for the most used flexbox features.

N.B. we don't have fallbacks for the browsers that don't support flexbox.

Useful: a comprehensive guide to flexbox.

Utility Class Description Demo
.u-flex

Creates a (display) flex container.

Flex item
Flex item
Flex item
Flex item
.u-flex-inline

Creates a (display) flex-inline container.

Flex item
Flex item
Flex item
.u-flex-item

Creates a flexible item with flex-grow: 1.

Flex item
Flex item
.u-flex-column

Sets the flex-direction to column.

Flex item
Flex item
.u-flex-wrap

Allow the items to wrap as needed if they don't fit on the same line.

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
.u-flex-center

Center aligns flex items.

Flex item
Flex item
.u-flex-dead-center

Dead center an element with flexbox.

N.B. This class must be set on the parent of the element that you want to center. The parent element's height should be fixed, i.e. different than auto.

Dead Centered Flex Hamster 🐹

Spacing utilities

Utility classes to set one-off margins. Can be used when building features or pages. Spacing between reusable component parts should be defined in the component styles instead.

Spacing can be set for all the element sides at once, top, bottom, left and right separately.
top and bottom are abbreviated to t and b.left and right are abbreviated to l and r.

Responsive variants are provided for small and medium devices.

We use a scale that goes from 0 to 5 spacing units. A single spacing unit is 6px.

Utility Class Description Demo
.u-space-0

Resets the element’s margin.

This element had margin: 3em
.u-space-t0

Resets the element’s margin-top.

This element had margin-top: 1em
.u-space-b0

Resets the element’s margin-bottom.

This element had margin-bottom: 1em
.u-sm-space-t0

Resets the element’s margin-top for small devices.

This element had margin-top: 1em when viewed on a small device
.u-md-space-t0

Resets the element’s margin-top for medium devices.

This element had margin-top: 1em when viewed on a medium device
.u[-sm|-md]-space-[t|b|l|r][1-5]

Sets the element’s margin[-top|-bottom|-left|-right].

Examples

  • .u-space-1
  • .u-space-2
  • .u-space-t1
  • .u-space-t5
  • .u-space-b2
  • .u-space-b3
  • .u-space-l3
  • .u-space-r5
  • .u-sm-space-l4
  • .u-md-space-b1

Preventing collapsing margins

Adjacent elements’ margins collapse to a single one – the bigger value. Read more about collapsing margins

The following utility classes help to prevent this behavior.

Utility Class Description Demo
.u-space-preventcollapse-inline

Prevent collapsing margin for inline[-block] elements.

u-space-b3
u-space-t2
.u-space-preventcollapse-block

Prevent collapsing margin for block elements.

u-space-b3
u-space-t2
.u-space-preventcollapse-table

Prevent collapsing margin for table elements.

Tip! It can be used with arrange to prevent collapsing margins.

u-space-b3
u-space-t2

Size utilities

Utility Class Description Demo
.u-size-full

Sets the element's width to 100%.

Item

Background utilities

Main background colors.

Utility Class Description Demo
.u-bg-color

Sets the background color to: #f5f5f5.

$background-color #f5f5f5
.u-bg-color-mid

Sets the background color to: #e6e6e6.

$medium-background-color #e6e6e6