The RDC framework named RDC Bootstrap (current v1.7.3 is an ongoing project created by the UX Dev team. It is a quick way to get a Reatlor.com branded project started according to the new style guide unveiled in 2015. The framework is based off of Bootstrap v3.3.3, and built using SASS. Visit our GitHub page for source code and checkout our Wiki page for more info.

According to the new style guide, Roboto (google font) is the primary font used for all RDC branded project. The font base used in the variable file is referencing this font. Note: In the Renovate project, we are referencing to the Google Font location (fonts.gstatic) and not actually hosting the fonts.

Default Heading

h1. This is a heading

h2. This is a heading

h3. This is a heading

h4. This is a heading

h5. This is a heading

h6. This is a heading

Copy

    
      <h1>h1. This is a heading</h1>
      <h2>h2. This is a heading</h2>
      <h3>h3. This is a heading</h3>
      <h4>h4. This is a heading</h4>
      <h5>h5. This is a heading</h5>
      <h6>h6. This is a heading</h6>

Paragraph Text

Default paragraph text and links

This is paragraph text

This is paragraph text with a link.

Here are some paragraph text with styling like bold and italics.

Copy

    
      <p>This is paragraph text</p>
      <p>This is paragraph text with a <a href="#">link</a>.</p>
      <p>Here are some paragraph text with styling like <b>bold</b> and <i>italics</i>.</p>

Font size helpers

This is text with font-size-xsmall class(10px).

This is text with font-size-small class(12px).

This is text with font-size-base class(14px).

This is text with font-size-large class(18px).

Copy

    
      <p class="font-size-xsmall">This is text with .font-size-xsmall class(10px).</p>
      <p class="font-size-small">This is text with .font-size-small class(12px).</p>
      <p class="font-size-base">This is text with .font-size-base class(14px).</p>
      <p class="font-size-large">This is text with .font-size-large class(18px).</p>

Font weight helpers

This is text with font-normal class (300 font weight).

This is text with font-semibold class (400 font weight).

This is text with font-bold class (500 font weight).

Copy

    
      <p class="font-normal">This is text with font-normal class (300 font weight).</p>
      <p class="font-semibold">This is text with font-semibold class (400 font weight).</p>
      <p class="font-bold">This is text with font-bold class (500 font weight).</p>

Text link helpers

There are 4 different ways text links are displayed. Each link color serves a UX purpose, and must be used accordingly. Modifier class is added to the parent of the link, not directly on the anchor tag itself.

Default links

For stand-alone/isolated links or CTAs at ends of text blocks.

Secondary links

Used with the parent class .link-secondary. This is use when there are a group of links displayed closely, and red would be overpowering. For example, groups of links in a table or list.

Tertiary links

Used with the parent class .link-tertiary. This is use when the links needs to be the same color as the font base color. For example, headline or navigation text links.

Default link example

Secondary link example

Tertiary link example

Copy

    
      <a href="#">Default link example</a>
      <p class="link-secondary"><a href="#">Secondary link example</a></p>
      <p class="link-tertiary"><a href="#">Tertiary link example</a></p>

Custom RDC Page Title and Headers

Titles

These are title section that defines and divide the main page sections. Usually used in pages with lots of data like LDP or siderail of SRP.

This is a custom rdc title-section text.

This is a custom rdc title-subsection text.

This is a custom rdc title-subsection-sm text.

Copy

    
      <h2 class="title-section">This is a custom rdc title-section text.</h2>
      <h2 class="title-subsection">This is a custom rdc title-subsection text.</h2>
      <h2 class="title-subsection-sm">This is a custom rdc title-subsection-sm text.</h2>

Headers

These are header section that defines and divide the main page sections. Used in home page, buy/sell landing pages, local pages.

This is a custom rdc header-section text.

This is a custom rdc header-section-sm text.

This is a custom rdc header-subsection text.

Copy

    
      <h2 class="header-section">This is a custom rdc header-section text.</h2>
      <h2 class="header-section-sm">This is a custom rdc .header-section-sm text.</h2>
      <h2 class="header-subsection">This is a custom rdc header-subsection text.</h2>

Common Button Styles

Below are some examples of buttons that are used often.

Copy

    
      <button type="button" class="btn btn-primary">Primary Button</button>
      <button type="button" class="btn btn-default">Default Button</button>
      <button type="button" class="btn btn-link">Button Link</button>

Common Button with Icon

Extra class is needed to add icons with space .icon-space-right. Icon in btn-default use dark gray color.

Copy

    
      <button type="button" class="btn btn-primary"><i class="ra ra-print icon-space-right"></i>Print Button</button>
      <button type="button" class="btn btn-default"><i class="ra ra-print icon-space-right"></i>Print Button</button>

Special Button Styles

Below are some examples of buttons that are used in special instances. Clear button's background is transparent. Ghost buttons are translucent.

Copy

    
      <button type="button" class="btn btn-clear">Clear Button</button>
      <button type="button" class="btn btn-grey">Grey Button</button>
      <button type="button" class="btn btn-ghost-dark">Ghost (Dark) Button</button>

You can use a combination of these classes to achieve the desire look.

This is the default table style. Use the class .table.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Otto	@twitter

Copy

    
      <table class="table">
        ...
      </table>

Table with no headers

This is a table with no header style. Append with the class .table-noheader to remove the thead line.

1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Otto	@twitter

Copy

    
      <table class="table table-noheader">
        ...
      </table>

Condensed Table

Use the class .table-condensed. This is a helper class in bootstrap.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Otto	@twitter

Copy

    
      <table class="table table-condensed">
        ...
      </table>

Clear Tables

This is the clear table style. Append with the class .table-clear. This is used in the school tables in the LDP.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Otto	@twitter

Copy

    
      <table class="table table-clear">
        ...
      </table>

Below are default examples of primary and default labels.

Default Primary

Copy

    
      <span class="label label-default">Default</span>
      <span class="label label-primary">Primary</span>

Examples of New, Pending & Open House labels that you may find on the search results & listing details page.

New Pending Open House

Copy

    
      <span class="label label-green">New</span>
      <span class="label label-red">Pending</span>
      <span class="label label-dark-transparent label-outline-none">Open House</span>

List with class .list-unstyled.This type of list is used to provide a vertical list of items without any styling. An example can be found in the Property Details on listing details page.

List item
List item
List item
List item

Copy

    
      <ul class="list-unstyled">
        ...
      </ul>

List with class .list-default. An example can be found in the Property Details on LDP.

List item
List item
List item
List item

Copy

    
      <ul class="list-default">
        ...
      </ul>

List with class .list-horizontal. Horizontal list automacially strips default styles.

List item
List item
List item
List item

Copy

    
      <ul class="list-horizontal">
        ...
      </ul>

List with class .list-horizontal and .list-style-disc. This type of list is used to divide property meta data.

5 Beds
4 Baths
3,400 Sqft

Copy

    
      <ul class="list-horizontal list-style-disc">
        ...
      </ul>

List with class .list-horizontal and .list-style-line. This type of list is usually associated with links.

List item
List item
List item
List item

Copy

    
      <ul class="list-horizontal list-style-line">
        ...
      </ul>

List with class .list-horizontal and .list-style-slash. Currently used inside .listing-card-stacked.

List item
List item
List item
List item

Copy

    
      <ul class="list-horizontal list-style-slash">
        ...
      </ul>

Alerts used in RDC framework.

This is an example of an alert message you will likely see in the SRP or LDP. Alert CTA link

Copy

    
      <div class="alert alert-dark alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <span>This is an example of an alert message you will likely see in the SRP or LDP.</span>
        <a href="#" id="discovery-expand">Alert CTA link</a>
      </div>

This is an example of an alert notifiaction you will likely see in the SRP or LDP.

Copy

    
      <div class="alert alert-info alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <span>This is an example of an alert notifiaction you will likely see in the SRP or LDP.</span>
        <a href="#" id="discovery-expand">Alert CTA link</a>
      </div>

Here is an example of a basic inline navigation tabs with class .nav-tabs & .nav-inline you may find in the listing details page. This are used for tab patters as well as in page navigation.

LDP in-page nagivation example

Copy

    
      <div class="panel panel-default">
        <div class="panel-body">
          <ul class="nav nav-tabs nav-inline" role="tablist">
            <li role="presentation" class="active"><a href="#">Property Details</a></li>
            <li role="presentation"><a href="#">School & Neighborhood</a></li>
            <li role="presentation"><a href="#">Payment Options</a></li>
            <li role="presentation"><a href="#">Property History</a></li>
          </ul>
        </div>
      </div>

School data example

Copy

    
      <div class="panel panel-default">
        <div class="panel-body">
          <ul class="nav nav-tabs nav-inline" role="tablist">
            <li role="presentation" class="active"><a href="#">Elementry School</a></li>
            <li role="presentation"><a href="#">Middle School</a></li>
            <li role="presentation"><a href="#">High School</a></li>
            <li role="presentation"><a href="#">Private</a></li>
          </ul>
        </div>
      </div>

Here is an example of a basic accordion with class .accordion you may find in the listing details page.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Collapsible Group Item #3

Copy

    
      <div class="accordion" id="ldp-schoolneighb-accordion" role="tablist" aria-multiselectable="true">
        <div class="panel">
          <div class="accordion-heading" role="tab" data-toggle="collapse" href="#collapsegroup1" aria-expanded="true" aria-controls="collapsegroup1">
            <h4 class="accordion-title">Collapsible Group Item #1</h4>
          </div>
          <div id="collapsegroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="accordion-heading collapsed" role="tab" data-toggle="collapse" href="#collapsegroup2" aria-expanded="false" aria-controls="collapsegroup2">
            <h4 class="accordion-title">Collapsible Group Item #2</h4>
          </div>
          <div id="collapsegroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
              <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
            </div>
          </div>
        </div>
        ...
      </div>

Accordion Outline

Here is an example of a accordion outline with class .accordion and .accordion-plain. You can find an example of this in the right rail on search results page.

Nearby Neigborhoods

Nearby Zips

Nearby Cities

Copy

    
      <div class="accordion accordion-plain" role="tablist" aria-multiselectable="true">
        <div id="nearby-neighborhood" class="panel">
          <div id="heading-nearby-neighborhood" class="accordion-heading" role="tab" data-toggle="collapse" href="#content-nearby-neighborhood" aria-expanded="true" aria-controls="content-nearby-neighborhood">
            <h4 class="accordion-title">Nearby Neigborhoods</h4>
          </div>
          <div id="content-nearby-neighborhood" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-nearby-neighborhood">
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
          </div>
        </div>
        <div id="nearby-zips" class="panel">
          <div id="heading-nearby-zips" class="accordion-heading collapsed" role="tab" data-toggle="collapse" href="#content-nearby-zips" aria-expanded="false" aria-controls="content-nearby-zips">
            <h4 class="accordion-title">Nearby Zips</h4>
          </div>
          <div id="content-nearby-zips" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-nearby-zips">
            <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
          </div>
        </div>
        ...
      </div>

Basic Contact Form

Here is an example of a basic form with class .lead-form and .form-highlight that you may find in the listing details page.

Copy

    
      <div class="lead-form form-highlight">
        <form>
          <div class="form-group">
            <input maxlength="50" class="form-control fullName" placeholder="Full Name" title="Full Name"  type="text">
          </div>
          <div class="form-group">
            <input class="form-control email" placeholder="Email" title="Email" type="text">
          </div>
          <div class="form-group">
            <input class="form-control phone" placeholder="Phone " title="Phone" type="text">
          </div>
          <div class="form-group">
            <textarea class="form-control message" rows="4" col="10">I would like more information regarding the property at 2925 Florence Ave Apt 55 that I found on realtor.com.</textarea>
          </div>
          <div class="form-group">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="1"> I want to get pre-approved by a lender.
              </label>
            </div>
          </div>
          <button type="button" name="button" class="btn btn-primary margin-bottom">Send Request</button>
          <p class="btn-text-disclaimer link-secondary">By sending a request you agree to our <a href="#">Privacy Policy</a></p>
        </form>
      </div>

Form Errors

Form error appears below the field with the error.

Copy

    
      <div class="lead-form form-highlight">
        <form>
          <div class="form-group">
            <input id="demo-name" maxlength="50" class="form-control fullName error" placeholder="Full Name" title="Full Name"  type="text">
            <label class="error" for="demo-name">Please enter your full name</label>
          </div>
          <div class="form-group">
            <input id="demo-email" class="form-control email error" placeholder="Email" title="Email" type="text">
            <label class="error" for="demo-email">Please enter a valid email address</label>
          </div>
          <div class="form-group">
            <input id="demo-phone" class="form-control phone error" placeholder="Phone " title="Phone" type="text">
            <label class="error" for="demo-phone">Please enter your phone</label>
          </div>
        </form>
      </div>

Radio Button Group

Custom button group styled radio buttons using .radio-btn-group.

Radio 1 Radio 2 Radio 3 Radio 4

Copy

    
      <div class="radio-btn-group">
        <input type="radio" name="radio-button-demo" id="radio-button-demo-1" checked="checked">
        <label for="radio-button-demo-1">Radio 1</label>
        <input type="radio" name="radio-button-demo" id="radio-button-demo-2">
        <label for="radio-button-demo-2">Radio 2</label>
        <input type="radio" name="radio-button-demo" id="radio-button-demo-3">
        <label for="radio-button-demo-3">Radio 3</label>
        <input type="radio" name="radio-button-demo" id="radio-button-demo-4">
        <label for="radio-button-demo-4">Radio 4</label>
      </div>

Justified radio buttons group .radio-btn-group-justified that spans the width of container.

Radio 1 Radio 2 Radio 3 Radio 4

Copy

    
      <div class="radio-btn-group radio-btn-group-justified">
        <input type="radio" name="radio-button-justified" id="radio-button-justified-1" checked="checked">
        <label for="radio-button-justified-1">Radio 1</label>
        <input type="radio" name="radio-button-justified" id="radio-button-justified-2">
        <label for="radio-button-justified-2">Radio 2</label>
        <input type="radio" name="radio-button-justified" id="radio-button-justified-3">
        <label for="radio-button-justified-3">Radio 3</label>
        <input type="radio" name="radio-button-justified" id="radio-button-justified-4">
        <label for="radio-button-justified-4">Radio 4</label>
      </div>

Toggle (Checkbox)

Custom toggle switch using .toggle-switch. This utilizes checkbox input that is styled as a toggle switch. The input must come before the label element, and it is important the id="" and for="" is set correctly, or else the toggle will not work.

Copy

    
      <div class="toggle-switch">
        <input id="custom-toggleswitch" type="checkbox">
        <label for="custom-toggleswitch"></label>
      </div>
      <div class="toggle-switch">
        <input id="custom-toggleswitch" type="checkbox" checked>
        <label for="custom-toggleswitch"></label>
      </div>

Toggle with label using .toggle-switch-inline. Labels always on the left.

Toggle Label

Copy

    
      <div class="toggle-switch-inline">
        <span class="toggle-switch-label">Toggle Label</span>
        <div class="toggle-switch">
          <input id="toggle-1" value="0" type="checkbox">
          <label for="toggle-1"></label>
        </div>
      </div>

Tags (Checkbox)

Tags pattern using checkbox element using .checkbox-tag.

These tags have checked/unchecked status that can be toggled by clicking on the element. The input must come before the label element, and it is important the id="" and for="" is set correctly, or else the toggle will not work.

2+ Car Garage

Views

Waterfront

Golf Course

Copy

    
      <div class="checkbox-tag">
        <input type="checkbox" value="0" id="garage" checked>
        <label for="garage"><i class="ra ra-car icon-space-right"></i>2+ Car Garage</label>
      </div>
      <div class="checkbox-tag">
        <input type="checkbox" value="1" id="view">
        <label for="view"><i class="ra ra-landscape icon-space-right"></i>Views</label>
      </div>

There are a many places within the framework where we use listing cards. They share the same look and feel (shadow + border radius). See below for some framework level cards we have in rdc-bootstrap.

Listing Card (Default)

Listing cards with class .listing-card used for property cards in Nearby Listing module & New Homes Floor Plan sections on listing details page.

104 Rose Ln, San Jose, CA 95127
$489,000
- 3 bd
- 2+ ba
- 1,330 sq ft

Listing Card with Open House and New labels.

New Open House

104 Rose Ln, San Jose, CA 95127
$489,000
- 3 bd
- 2+ ba
- 1,330 sq ft

Copy

    
      <div class="listing-card">
        <div class="listing-photo">
          <a href="#">
            <img src="http://p.rdcpix.com/v01/led728045-m0xd-w115_h90_q80.jpg">
          </a>
          <div class="listing-photo-label">
              <span class="label label-green label-outline-none label-corner" data-label="property-label-new">New  </span>
              <span class="label label-dark-transparent label-corner label-outline-none" data-label="property-openhouse">
              Open House  </span>
          </div>
        </div>
        <div class="listing-info">
          <ul class="list-unstyled property-meta">
            <li class="listing-info-address ellipsis" title="104 Rose Ln, San Jose, CA 95127">104 Rose Ln, San Jose, CA 95127</li>
            <li class="listing-info-price">$489,000</li>
            <li class="listing-info-meta">
              <ul class="list-horizontal list-style-disc">
                <li data-label="property-meta-beds"><span class="data-value">3</span> bd</li>
                <li data-label="property-meta-baths"><span class="data-value">2+</span> ba</li>
                <li data-label="property-meta-sqft"><span class="data-value">1,330</span> sq ft</li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="listing-cta">
          <a type="button" class="btn btn-default" title="Save" href="#">
            <i class="ra ra-heart-o icon-save "></i>
          </a>
        </div>
      </div>

Listing Card Filled

Listing cards that look like the following with classes .listing-card-filled. The default aspect ratio used in .aspect-content is 4:3. When the viewport resizes, the aspect ratio should remain the same.

104 Rose Ln, San Jose, CA 95127
$489,000
- 3 bd
- 2+ ba
- 1,330 sq ft

Copy

    
      <div class="listing-card-filled">
        <div class="aspect-content">
          <div class="listing-photo">
            <a href="#">
              <img src="http://p.rdcpix.com/v01/led728045-m0xd-w640_h480_q80.jpg">
            </a>
          </div>
          <div class="listing-info">
            <ul class="list-unstyled property-meta">
              <li class="listing-info-address ellipsis" title="104 Rose Ln, San Jose, CA 95127">104 Rose Ln, San Jose, CA 95127</li>
              <li class="listing-info-price">$489,000</li>
              <li class="listing-info-meta">
                <ul class="list-horizontal list-style-disc">
                  <li data-label="property-meta-beds"><span class="data-value">3</span> bd</li>
                  <li data-label="property-meta-baths"><span class="data-value">2+</span> ba</li>
                  <li data-label="property-meta-sqft"><span class="data-value">1,330</span> sq ft</li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>

Listing Card Filled with "Short" Modifier

The class .listing-card-short adds a height of 150px for the card. Good for situations where the height needs to be restricted.

104 Rose Ln, San Jose, CA 95127
$489,000
- 3 bd
- 2+ ba
- 1,330 sq ft

Copy

    
      <div class="listing-card-filled listing-card-short">
        ...
      </div>

Listing Card Stacked

Listing cards that look like the following with class .listing-card-stacked are used for property cards in the RDC home page and Buy/Rent landing pages. Main difference in the mark up is the .aspect-content is only wrapped around the .listing-photo. In addition, instead of using .list-style-disc in the property meta, this pattern uses list-style-slash.

104 Rose Ln, San Jose
$489,000
- 3 bd
- 2+ ba
- 1,330 sq ft

Copy

    
      <div class="listing-card-stacked">
        <div class="aspect-content">
          <div class="listing-photo">
            <a href="#">
              <img src="http://p.rdcpix.com/v01/led728045-m0xd-w640_h480_q80.jpg">
            </a>
          </div>
        </div>
        <div class="listing-info">
          <ul class="list-unstyled property-meta">
            <li class="listing-info-address ellipsis" title="104 Rose Ln, San Jose, CA 95127">104 Rose Ln, San Jose, CA 95127</li>
            <li class="listing-info-price">$489,000</li>
            <li class="listing-info-meta">
              <ul class="list-horizontal list-style-slash">
                <li data-label="property-meta-beds"><span class="data-value">3</span> bd</li>
                <li data-label="property-meta-baths"><span class="data-value">2+</span> ba</li>
                <li data-label="property-meta-sqft"><span class="data-value">1,330</span> sq ft</li>
              </ul>
            </li>
          </ul>
        </div>
      </div>

Here is an example of Search Results Listing card (class .srp-item) that you may find on the Search Results page. This card flows responsively and essentially turns into a photo centric card at smaller breakpoints (resize your browser to xxs breakpoint). Note: The ‘View details’ button is only show for large breakpoints only.

Brokered by:

Alain Pinel Realtors - Menlo Park

New

$18,900,000

8 Faxon Frst, Atherton, CA 94027

Faxon Forest

Single Family Home

4 bd
5+ ba
9,513 sq ft
1.16 acres lot
3 car

Contact Agent Contacted Agent

Brokered by Alain Pinel Realtors - Menlo Park

Unhide

Copy

    
      <div class="srp-item">
        <div class="aspect-content">
          <div class="srp-item-photo-wrap">
            <div class="srp-item-photo">
              <img alt="8 Faxon Frst, Atherton, CA 94027" title="8 Faxon Frst, Atherton, CA 94027" src="https://ap.rdcpix.com/1108531801/80c6d4a646f5f5910a9eb1622fea4b6bl-m0xd-w480_h480_q80.jpg">
              <div class="srp-item-photo-count hidden-xs hidden-xxs">
                <span class="label label-dark-transparent">
                  <i class="ra ra-camera"></i>
                  <span>19</span>
                </span>
              </div>
            </div>
            <div class="srp-item-broker-lg hidden-xs hidden-xxs">
              <div class="srp-item-broker-wrap">
                <div class="srp-item-signrider">
                  <img class="srp-broker-logo" alt="Alain Pinel Realtors - Menlo Park" title="Alain Pinel Realtors - Menlo Park" src="https://p.rdcpix.com/v07/o65a90200-c0s.gif">
                </div>
                <div class="srp-item-broker-text">
                  <div>Brokered by:</div>
                  <div class="font-bold ellipsis">Alain Pinel Realtors - Menlo Park</div>
                </div>
              </div>
            </div>
          </div>
          <div class="srp-item-body">
            <div class="srp-item-details">
              <div class="srp-item-label">
                <span class="label label-green label-corner">New</span>
              </div>
              <div class="srp-item-price">
                $18,900,000
              </div>
              <div class="srp-item-address ellipsis">
                <a href="http://www.realtor.com/realestateandhomes-detail/8-Faxon-Forest_Atherton_CA_94027_M15242-00423">
                  <span class="listing-street-address">8 Faxon Frst</span>,
                  <span class="listing-city">Atherton</span>,
                  <span class="listing-region">CA</span>
                  <span class="listing-postal">94027</span>
                </a>
              </div>
              <div class="srp-item-neighborhood ellipsis link-tertiary hidden-xxs hidden-xs">
                <a href="/realestateandhomes-search/Faxon-Forest_Atherton_CA">Faxon Forest</a>
              </div>
              <div class="srp-item-type srp-item-tags ellipsis hidden-xs hidden-xxs">
                <span class="srp-property-type">Single Family Home</span>
              </div>
              <div class="srp-item-property-meta">
                <ul class="property-meta list-horizontal list-style-disc list-spaced">
                  <li data-label="property-meta-beds"><span class="data-value">4</span> bd</li>
                  <li data-label="property-meta-baths"><span class="data-value">5+</span> ba</li>
                  <li data-label="property-meta-sqft"><span class="data-value">9,513</span> sq ft</li>
                  <li data-label="property-meta-lotsize"><span class="data-value">1.16</span> acres lot</li>
                  <li data-label="property-meta-garage"><span class="data-value">3</span> car</li>
                </ul>
              </div>
              <div class="srp-item-lead-link visible-lg-block">
                <a href="#" class="btn btn-primary">Contact Agent</a>
                <a href="#" class="btn btn-ghost-dark no-show">Contacted Agent</a>
              </div>
            <div class="srp-item-broker">
              <div class="ellipsis">
                <span class="hidden-xs">Brokered by </span>
                <span class="srp-item-broker-text">Alain Pinel Realtors - Menlo Park</span>
              </div>
            </div>
          </div>
          <div class="srp-item-action">
          <a class="link-unhide" title="Unhide" href="#">Unhide</a>
          </div>
        </div>
      </div>

Here is an example of a NextGen Choice Agent card with class .agent-card that you may find on the listing details page.

Listing Agent
Sarah Wilkins
(10)
20 Recently Sold

Copy

  
		<div class="agent-card">
			<div class="agent-card-img">
				<div class="img-circle">
					<img src="http://p.rdcpix.com/v01/a48b20a00-c0od-r7_w110.jpg">
				</div>
			</div>
			<div class="agent-card-details">
				<ul class="list-default list-unstyled">
					<li class="agent-title font-size-small">Listing Agent</li>
					<li class="agent-name">
						<a href="#">Sarah Wilkins</a>
					</li>
					<li class="agent-card-ratings font-size-small">
						<span class="icon-agent-rating agent-rating-5"></span>
						<span>(10)</span>
					</li>
					<li class="agent-meta font-size-small"><strong>20</strong> Recently Sold</li>
				</ul>
			</div>
		</div>

NextGen Choice Agent card popover that is shown on click of agent photo. You may find this on the Lead form of listing details page. This popover uses .agent-card-popover and .popover classes and needs to be inside .agent-card.

Copy

    
		<div class="agent-card">
			<div class="agent-card-popover popover">
				<div class="popover-content">
					<button type="button" class="popover-close" aria-label="Close"><i class="ra ra-cancel-circled"></i></button>
					<div class="agent-card-popover-header">
						<div class="agent-card-img">
							<div class="img-circle">
								<img src="http://p.rdcpix.com/v03/a70620600-c0od-r7_w110.jpg">
							</div>
						</div>
						<div>
							<ul class="list-default list-unstyled">
								<li class="ellipsis agent-name">BONNIE MAJHER</li>
								<li data-label="business-name">ATLANTA FINE HOMES, SOTHEBY'S INTERNATIONAL</li>
							</ul>
						</div>
					</div>
					<div class="agent-card-popover-listing-data clearfix">
						<ul class="list-default list-unstyled">
							<li data-label="for-sale">For Sale: <strong> <a href="#">20</a> </strong></li>
							<li data-label="recently-sold">Recently Sold: <strong><a href="#">78</a></strong></li>
							<li data-label="activity-range">Activity range:
								<strong>$715K - $3M</strong>
							</li>
							<li data-label="house-listed">Listed a house:
								<strong> 3 months ago</strong>
							</li>
						</ul>
						<div class="float-right margin-right-lg margin-top">
							<a class="btn btn-default" href="#">View Full Profile </a>
						</div>
					</div>
				</div>
			</div>
		</div>

Here is an example of a card with class .card you may find in the sell landing page.

Want to Sell Your Home? Step 3: List It at the Right Price

Copy

    
    <div class="card">
      <div class="card-media">
        <a href="#" >
          <img alt="..." title="..." src="https://realtor.com/assets/right-price-228f1c31036f2ef1e24549ab030ce7a47b29181e09222c0827520583ec0e36c6.jpg">
        </a>
      </div>
      <div class="card-content">
        <ul class="list-unstyled">
          <li>Sell</li>
          <li class="card-title">
            <a href="#" title="...">Want to Sell Your Home?<span class="display-block">Step 3: List It at the Right Price</span></a>
          </li>
          <li class="margin-top-lg link-tertiary">
            <a href="#" title="...">READ MORE</a>
          </li>
        </ul>
      </div>
    </div>

Normal modal using .modal code in bootstrap. Note: We use h2 for modal headers.

Copy

    
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalDefault">
        Launch demo modal
      </button>
      <!-- Modal -->
      <div class="modal fade" id="modalDefault" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h2 class="modal-title">Modal title</h2>
            </div>
            <div class="modal-body">
              Empty modal...
            </div>
          </div>
        </div>
      </div>

Modals with actions will use .modal-actions wrapped around the call to actions inside .modal-body. Use .btn-link for text links for modal actions.

Copy

    
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalActions">
        Launch demo modal
      </button>
      <!-- Modal -->
      <div class="modal fade" id="modalActions" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h2 class="modal-title">Modal title</h2>
            </div>
            <div class="modal-body">
              Empty modal with actions...
              <!-- Modal Actions -->
              <div class="modal-actions">
                <a href="#" class="btn btn-primary">Save changes</a>
                <a href="#" class="btn btn-default">View Changes</a>
              </div>
              <!-- Modal Actions with buttons centered -->
              <div class="modal-actions text-center">
                <a href="#" class="btn btn-primary">Save changes</a>
                <a href="#" class="btn btn-default">View Changes</a>
              </div>
            </div>
          </div>
        </div>
      </div>

Some modals look like "full screen page" components in mobile (xs/xxs breakpoints). We add the class .modal-mobile-fullscreen in the .modal. Note: This modal also requires a custom close button in xs/xxs that resembles a back toggle. This is added in the html.

Copy

    
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalMobile">
        Full screen mobile modal (change browser size)
      </button>
      <!-- Modal -->
      <div class="modal fade modal-mobile-fullscreen" id="modalMobile" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span class="hidden-xs hidden-xxs" aria-hidden="true">×</span>
                <span class="hidden-lg hidden-md hidden-sm" aria-hidden="true"><i class="ra ra-angle-left"></i></span>
              </button>
              <h2 class="modal-title">Modal title</h2>
            </div>
            <div class="modal-body">
              Empty modal...
              <div class="modal-actions">
                <a href="#" class="btn btn-primary">Save changes</a>
                <a href="#" class="btn btn-link" data-dismiss="modal">Close</a>
              </div>
            </div>
          </div>
        </div>
      </div>

There is an external ruby plugin RDC uses for pagination, called Kaminari, which required us to develop a custom pagination pattern extended from what is provided in bootstrap default.

Copy

    
      <nav class="pagination">
        <span class="prev"><i class="ra ra-chevron-left"></i></span>
        <span class="page current">1</span>
        <span class="page"><a rel="next" href="#">2</a></span>
        <span class="page"><a href="#">3</a></span>
        <span class="page"><a href="#">4</a></span>
        <span class="next"><a rel="next" href="#"><i class="ra ra-chevron-right"></i></a></span>
      </nav>

Visual pattern for pagnation to show more than 4 pages is to show the first 2 pages, then ellipses, and then the last page as illustrated below.

Copy

    
      <nav class="pagination">
        <span class="prev"><i class="ra ra-chevron-left"></i></span>
        <span class="page current">1</span>
        <span class="page"><a rel="next" href="#">2</a></span>
        <span class="page gap">…</span>
        <span class="page"><a href="#">100</a></span>
        <span class="next"><a rel="next" href="#"><i class="ra ra-chevron-right"></i></a></span>
      </nav>

Here is an example of a basic breadcrumbs with class .breadcrumb-list you may find in the search results page.

Copy

    
      <div class="breadcrumb-list">
        <ul class="list-unstyled list-horizontal">
          <li><a href="#">California</a></li>
          <li><a href="#">Santa Clara County</a></li>
          <li><a href="#">San Jose</a></li>
        </ul>
      </div>

The RDC custom icon font (rdc-font) files are located inside the fonts folder. The font file consist of hand picked font awesome icons and hand made icons by the UED team. The maintenance of the actual font is managed by the UED team.

ra-bed
ra-bath
ra-size
ra-lot-size
ra-filters
ra-block-r
ra-arrrow-down
ra-phone
ra-print
ra-share-square
ra-share-icon
ra-heart
ra-heart-o
ra-calendar-o
ra-calendar
ra-chevron-left
ra-chevron-right
ra-external-link
ra-mobile
ra-comment
ra-commenting-o
ra-home
ra-filmstrip
ra-video-camera
ra-map-marker
ra-search
ra-expand
ra-tag
ra-green
ra-info-circle
ra-pencil
ra-trash-bin
ra-facebook
ra-twitter
ra-pinterest
ra-google-plus
ra-camera
ra-star-o
ra-star-half
ra-star-star
ra-calculator
ra-comments
ra-newspaper
ra-street-view
ra-angle-up
ra-angle down
ra-close
ra-circle
ra-sort-down
ra-sort-up
ra-plus
ra-minus
ra-th-list
ra-angle-left
ra-angle-right
ra-circle-minus
ra-circle-plus
ra-check-mark
ra-filter
ra-draw
ra-sold
ra-for-sale
ra-pets
ra-for-rent
ra-notification
ra-play-circle
ra-cancel-circle
ra-crosshair
ra-facebook-square
ra-twitter-square
ra-google-plus-square
ra-pinterest-square
ra-directions
ra-envelope-square
ra-cog
ra-clock-o
ra-flame
ra-coffee-shops
ra-barsrestaurants
ra-grocery-stores
ra-insurance-agents
ra-usd
ra-file-text-o
ra-line-chart
ra-question-circle
ra-drug-stores
ra-thumbs-up
ra-arrow-circle-left
ra-vu-star
ra-dollar-zero
ra-couple
ra-pencil-square-o
ra-gas-stations
ra-arrow-up
ra-3d-walkthough
ra-fire
ra-laundry-service
ra-landscape
ra-golf-course
ra-my-location
ra-fitness-center
ra-pool
ra-water-front
ra-ac-unit
ra-hot-tub
ra-hardwoodfloor
ra-hardwood-floor
ra-basement
ra-check-thin
ra-plus-thin
ra-close-thin
ra-bike
ra-walk
ra-transit
ra-identity
ra-bubble
ra-block-r-simplified
ra-bathtub
ra-paintbrush
ra-kettle
ra-snowflake
ra-roof
ra-android-textsms
ra-envelope-1
ra-pinterest-p
ra-eye
ra-note
ra-note-fill
ra-price
ra-income
ra-location
ra-down-payment
ra-debt
ra-preapproval
ra-rates
ra-calc-refinance
ra-calc-mortgage
ra-calc-affordability
ra-rent-vs-buy
ra-linkedin
ra-big-house
ra-small-house
ra-loan-type
ra-rent-vs-buy
ra-calc-affordability
ra-filters
ra-home2-o

Copy

    
      <span class="ra ra-notification-on"></span>
      <i class="ra ra-notification-on"></i>

RDC Bootstrap

Getting Started

Typography

Default Heading

h1. This is a heading

h2. This is a heading

h3. This is a heading

h4. This is a heading

h5. This is a heading

h6. This is a heading

Paragraph Text

Text link helpers

Custom RDC Page Title and Headers

This is a custom rdc title-section text.

This is a custom rdc title-subsection text.

This is a custom rdc title-subsection-sm text.

This is a custom rdc header-section text.

This is a custom rdc header-section-sm text.

This is a custom rdc header-subsection text.

Buttons

Common Button Styles

Common Button with Icon

Special Button Styles

Tables

Table with no headers

Condensed Table

Clear Tables

Labels

Default Primary

Lists

Alerts

Inline Navigation/Tabs

Accordion

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Accordion Outline

Nearby Neigborhoods

Nearby Zips

Nearby Cities

Forms

Basic Contact Form

Form Errors

Radio Button Group

Toggle (Checkbox)

Tags (Checkbox)

Listing Cards

Listing Card (Default)

Listing Card Filled

Listing Card Filled with "Short" Modifier

Listing Card Stacked

SRP List

Agent Cards

Cards

Modals

Pagination

Breadcrumbs

RDC Icons Font