Backgrounds and borders

• 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

• 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>
  

• Page headers

• New Business Openings San Francisco, CA

• <div class="section-header">
      <h2>New Business Openings <b>San Francisco, CA</b></h2>
  </div>
  

• Media block

  We use CSS Flexbox with a fallback to the classic float-based media block for old versions of Internet Explorer.

• 

  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 .pull-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.
  Media block large When the avatar is 60x60 or larger, add .media-block-large to increase the space between the avatar and story.	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.	Happy Test Event cras justo odio, dapibus ac facilisis in, egestas eget quam cras mattis consectetur purus sit amet fermentum.

• Inline layout list

  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">Filler content</div></li>
      <li><div class="sample-content">Filler content</div></li>
      <li><div class="sample-content">Filler content</div></li>
      <li><div class="sample-content">Filler content</div></li>
      <li><div class="sample-content">Filler content</div></li>
      <li><div class="sample-content">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

• Tooltip

  Tooltips can be added to links in order to provide more detail on hover.

• Edit A little more detail now

• <a class="chiclet-link show-tooltip">
      Edit
      <span class="tooltip-wrapper">
          <span class="tooltip">A little more detail now</span>
      </span>
  </a>
  

• Basic buttons

• 	Default	Small
  Default	Button Disabled	Button Disabled
  Primary	Button Disabled	Button Disabled

• $ybutton(tag_name, ybtn_type=None, size=None, content='', **tag_attributes)

• 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.

• One Two Three

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

• .ybtn-group-full – A full width flexible ybtn-group. Used for sub-navigation on biz site only.

  One Two Three Four Five Six Seven Eight Ninety-Nine

• Text inputs and textareas

  Notes on help text:
  • Inline - Only use the inline style1 to denote that a field is optional.
  • Block - Use the block style1 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.").
• Label name Optional Label name Optional. Yelper name or an email address.

• <form class="yform">
      <label>Label name</label>
      <span class="help-inline">Optional</span>
      <input type="text" placeholder="tacos, cheap dinner, Max's">
      <label>Label name</label>
      <span class="help-block">Optional. Yelper name or an email address.</span>
      <textarea placeholder="Placeholder text"></textarea>
      <input type="text" disabled="disabled" placeholder="Disabled placeholder text">
  </form>
  

• Checkboxes, radios, and selects

• Check please

  One Fish Two Fish

  Value 1 Value 2 Value 3

• <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>
      <select>
          <option value="1">Value 1</option>
          <option value="2">Value 2</option>
          <option value="3">Value 3</option>
      </select>
  </form>
  

• Inline yform

• Button

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

• Inline search yform

• <form class="yform yform-inline yform-search">
      <div class="yform-input-field-wrap">
          <input type="text" class="yform-search-field">
      </div>
      $ybutton(
          ...
          content=$h.ycon('search', group='common_sprite'),
          classname='yform-search-button',
      )
  </form>
  

• Nested icon labels

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

• Error state

• Please provide a valid email address

• <div class="yform">
      <input type="text" class="input-error">
      $h.ycon('form-error', group='common_sprite')
      <p class="text-error text-error-inline">Please provide a valid email address</p>
  </div>
  

• Placeholder shim

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

• Email address

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

• Inline form fields

  This styleguide section is visible for internal IPs only

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

• First Name

  Label name

  Vorname

  Label name with areallyreallyreallyreallylongwordinit

• <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>
  

• 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>
  

• 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>
  

• Action link iconed list

  Lists of user/review action links should appear in a special iconed-list.

• • Share review
  • Compliment

• <ul class="iconed-list action-link-list">
      <li class="iconed-list-item">
          <a class="action-link">
              <div class="iconed-list-avatar">
                  ...
              </div>
              <div class="iconed-list-story">
                  Share review
              </div>
          </a>
      </li>
      ...
  </ul>
  

• 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.

• 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

• Tables

• 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

• Alerts

  For things like application alerts, status messages, biz alerts, and announcements. Alerts are yellow by default.

  $common_templates.lib.info_alerts.draw_alert(...)

• ×

  I have a bad feeling about this. That’s no moon, it’s a space station.

• <div class="alert">
      <a class="alert-dismiss" href="#">&times;</a>
      <p class="alert-message">
          <b>I have a bad feeling about this.</b>
          That’s no moon, it’s a <a href="#">space station</a>.
      </p>
  </div>
  

• .alert-info – Just lettin’ you know.

  ×

  I have a bad feeling about this. That’s no moon, it’s a space station.

• .alert-error – Something bad happened.

  ×

  I have a bad feeling about this. That’s no moon, it’s a space station.

• .alert-success – A successful thing happened.

  ×

  I have a bad feeling about this. That’s no moon, it’s a space station.

• Popups

• Share business

  Something amazing happened.

  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

  Share Cancel

• Generated in javascript at yelp.ui.pop.

• Progress bar

  Classic progress bar for reporting data.
• 60%

• <div class="progress-bar">
      <div class="progress-filled" style1="width: 60%;">
          60%
      </div>
  </div>
  

• Media progress bar

  Progress bar for tracking status of a media upload. Should be displayed over media thumbnail.

• <div class="media-progress-bar">
      <div class="media-progress-bar_fill" style1="width: 60%;"></div>
  </div>
  

• Titled navigation

  A navigation component that contains a title section at the top and a list of vertical links.

• This is a titled navigation

  Ultimately, martial art means honestly expressing yourself…

  • Apple
  • Orange
    • Strawberry
    • Lime
    • Cherry
  • Banana
  • Solanum sessiliflorum 59
  • Durio kutejensis

• <div class="titled-nav-list">
      <div class="titled-nav-title-section">
          <h3>This is a titled navigation</h3>
          <p>Ultimately, martial art means honestly expressing yourself…</p>
      </div>
      <ul class="titled-nav">
          <li><a href="#">Apple</a></li>
          <li>
              <a href="#" class="active">Orange</a>
              <ul class="titled-subnav">
                  <li><a href="#">Strawberry</a></li>
                  <li><a href="#" class="active">Lime</a></li>
                  <li><a href="#">Cherry</a></li>
              </ul>
          </li>
          <li><a href="#">Banana</a></li>
          <li><a href="#">Solanum sessiliflorum <span class="ybadge ybadge-notification">59</span></a></li>
          <li class="disabled"><a href="#">Durio kutejensis</a></li>
      </ul>
  </div>
  

• Breadcrumbs

  Used to help give users a sense of place within the site or within a particular business listing. Must be used in conjunction with a page header.

• • foo
  • bar
  • bar

• <ul class="breadcrumbs">
      <li>foo</li>
      <li>
          $h.ycon_wrap('breadcrumb-arrow', ...)
      </li>
      ...
  </ul>
  

• Pill tabs and sorts

  Used to filter feed content. Tabs can display a count next to the tab name. Unread counts are displayed in a red circle.

• • Item4
  • Item 3
  • Date

• <ul class="tabs-pill">
      <li class="tab selected">
          <a>Item</a><span class="count">4</span>
      </li>
      <li class="tab">
          <a>Item</a> <span class="ybadge ybadge-notification">3</span>
      </li>
      <li class="tab tab-resortable">
          $h.ycon_wrap(..., 'Date', ..., element='a')
      </li>
  </ul>
  

• Call us island

  $common_templates.lib.marketing.call_us_island.render_minimal_cta(...)

• Marketing page header

  Phone number Call (123) 456-7890

• <div class="clearfix">
      <h1 class="pull-left">Marketing page header</h1>
      <div class="island pull-right call-us-island-minimal">
          <span class="offscreen">Phone number</span>
          <span itemprop="telephone">
              $h.ycon_wrap('phone-cta', 'Call <strong>(123) 456-7890</strong>, ...)
          </span>
      </div>
  </div>
  

• Call us CTA island

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

  $common_templates.lib.marketing.call_us_island.render_full_cta(...)

• Create a free account or Log in Phone number Call (123) 456-7890

• <div class="island call-us-island-full">
      $ybutton('a', 'primary', ... , 'Create a free account', ...)
      <span class="cta-text">
          or <a href="#">Log in</a>
      </span>
  
      <span class="cta-text pull-right">
          <span class="offscreen">Phone number</span>
          <span itemprop="telephone">
              $h.ycon_wrap('phone-cta', 'Call <strong>(123) 456-7890</strong>, ...)
          </span>
      </span>
  </div>
  

• 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">
      <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">
      <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

• <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>$h.ycon_wrap('check', 'Lorem ipsum', ...)</li>
              </ul>
              <a class="service-learn-more-link" href="#">Learn more</a>
          </div>
          ...
      </div>
  </div>