Flex UI Library (1.6.10)
User Interface Resources
Theme
Colors Icons Layout Typography
Components
Avatars Banners Buttons & Links Cards Charts Containers Dropdowns Forms Headers Listing Card Lists Modals & Dialogs Most Used Selector Navs Pages Panel Layout Popovers Progress Rental Calendar Tables Toast Tooltips & Labels Wells
Miscellaneous
Bugsnag Chart.js Cookie Banner Current User iOS Dynamic Type js-cookie Perfect Scrollbar Utilities Responsive Side Navigation Bar
Exploratory Components
Miscellaneous
Feature Examples
Address Search Contact Management Mobile Price Range 1 Price Range 2 Responsive Hot Sheet Responsive Layout
Product Marketing
Licensed Photos - [new window] Screenshot Library
Tools & Reference
Debug Tips
Listing Card
Full Card With IDX
Price Change, Open House, Saved, Active, IDX
price change · 3 min
$1,725,800
Virtual Open House
113 Divisadero Street, San Francisco, California
Active
4 BD 3 BA 5,400 SF
Julie Crawford
Realty One Group 

<div class="lc-container">
  <div class="lc-thumbnail--container">
    <div class="lc-thumbnail"
         style="background-image: url('https://cdn.resize.sparkplatform.com/demomls/640x480/true/20171221163147585449000000-o.jpg');">
      <span role="img" aria-label="Appropriate image alt text"></span>
      <div class="lc-info">
        <div class="lc-status--container">
          <div class="label label-price-change">price change &middot; 3 min</div>
        </div>
        <div class="lc-button--container">
          <a class="lc-button--save active">
            <span class="flexicon flexicon-star" title="Save&nbsp;Listing" data-toggle="tooltip"></span>
          </a>
          <a class="lc-button--hide ">
            <span class="flexicon flexicon-slash--circle" title="Hide&nbsp;Listing" data-toggle="tooltip"></span>
          </a>
          <span class="dropdown">
            <a class="lc-button--menu" data-toggle="dropdown">
              <span class="flexicon flexicon-ellipsis" title="More&nbsp;Options" data-toggle="tooltip"></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
              <li> <a>Save</a> </li>
              <li> <a>Hide</a> </li>
              <li> <a>Copy Share Link</a> </li>
              <li> <a>Contact Agent</a> </li>
            </ul>
          </span>
        </div>
        <div class="lc-priceshowing--container">
          <div class="lc-price--container">
            <div class="t-title--larger">$1,725,800</div>
          </div>
          <div class="lc-showing--container">
              <div class="label label-open-house">Virtual Open House</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="lc-details--container">
    <div class="lc-address" title="113 Divisadero Street, San Francisco">
      113 Divisadero Street, San Francisco, California
    </div>
    <span class="lc-status lc-status--active">
      Active
    </span>
    <div class="lc-details" title="4 BD  3 BA  5,400 SF">
      <!-- &nbsp; are required here so we can get a proper overflow ellipsis. -->
      <span>4 BD</span>
      <span>3 BA</span>
      <span>5,400 SF</span>
    </div>
  </div>
  <div class="lc-details--container lc-idx">
    <div>
      Julie Crawford<br>
      Realty One Group
    </div>
    <img class="lc-idx--logo"
      src="https://cdn.photos.sparkplatform.com/az/20090929200813207293000000.jpg">
  </div>
</div>
Minimal Card
Closed, No Image
$1,725,800
113 Divisadero Street, San Francisco, California
Closed
4 BD 3 BA 5,400 SF 

<div class="lc-container">
  <div class="lc-thumbnail--container">
    <div class="lc-thumbnail"
         style="">
      <span role="img" aria-label="Appropriate image alt text"></span>
      <div class="lc-info">
        <div class="lc-status--container">
          <div></div>
        </div>
        <div class="lc-button--container">
          <a class="lc-button--save ">
            <span class="flexicon flexicon-star" title="Save&nbsp;Listing" data-toggle="tooltip"></span>
          </a>
          <a class="lc-button--hide ">
            <span class="flexicon flexicon-slash--circle" title="Hide&nbsp;Listing" data-toggle="tooltip"></span>
          </a>
          <span class="dropdown">
            <a class="lc-button--menu" data-toggle="dropdown">
              <span class="flexicon flexicon-ellipsis" title="More&nbsp;Options" data-toggle="tooltip"></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
              <li> <a>Save</a> </li>
              <li> <a>Hide</a> </li>
              <li> <a>Copy Share Link</a> </li>
              <li> <a>Contact Agent</a> </li>
            </ul>
          </span>
        </div>
        <div class="lc-priceshowing--container">
          <div class="lc-price--container">
            <div class="t-title--larger">$1,725,800</div>
          </div>
          <div class="lc-showing--container">
              <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="lc-details--container">
    <div class="lc-address" title="113 Divisadero Street, San Francisco">
      113 Divisadero Street, San Francisco, California
    </div>
    <span class="lc-status lc-status--closed">
      Closed
    </span>
    <div class="lc-details" title="4 BD  3 BA  5,400 SF">
      <!-- &nbsp; are required here so we can get a proper overflow ellipsis. -->
      <span>4 BD</span>
      <span>3 BA</span>
      <span>5,400 SF</span>
    </div>
  </div>
</div>
Example Card 1
Expired, New Match, Tour of Homes
new match · oct 24
$1,725,800
Tour of Homes
113 Divisadero Street, San Francisco, California
Expired
4 BD 3 BA 5,400 SF 

<div class="lc-container">
  <div class="lc-thumbnail--container">
    <div class="lc-thumbnail"
         style="background-image: url('https://cdn.resize.sparkplatform.com/demomls/640x480/true/20171221163147585449000000-o.jpg');">
      <span role="img" aria-label="Appropriate image alt text"></span>
      <div class="lc-info">
        <div class="lc-status--container">
          <div class="label label-new-match">new match &middot; oct 24</div>
        </div>
        <div class="lc-button--container">
          <a class="lc-button--save ">
            <span class="flexicon flexicon-star" title="Save&nbsp;Listing" data-toggle="tooltip"></span>
          </a>
          <a class="lc-button--hide ">
            <span class="flexicon flexicon-slash--circle" title="Hide&nbsp;Listing" data-toggle="tooltip"></span>
          </a>
          <span class="dropdown">
            <a class="lc-button--menu" data-toggle="dropdown">
              <span class="flexicon flexicon-ellipsis" title="More&nbsp;Options" data-toggle="tooltip"></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
              <li> <a>Save</a> </li>
              <li> <a>Hide</a> </li>
              <li> <a>Copy Share Link</a> </li>
              <li> <a>Contact Agent</a> </li>
            </ul>
          </span>
        </div>
        <div class="lc-priceshowing--container">
          <div class="lc-price--container">
            <div class="t-title--larger">$1,725,800</div>
          </div>
          <div class="lc-showing--container">
              <div class="label label-tour-of-homes">Tour of Homes</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="lc-details--container">
    <div class="lc-address" title="113 Divisadero Street, San Francisco">
      113 Divisadero Street, San Francisco, California
    </div>
    <span class="lc-status lc-status--expired">
      Expired
    </span>
    <div class="lc-details" title="4 BD  3 BA  5,400 SF">
      <!-- &nbsp; are required here so we can get a proper overflow ellipsis. -->
      <span>4 BD</span>
      <span>3 BA</span>
      <span>5,400 SF</span>
    </div>
  </div>
</div>
Example Card 2
Pending, Status Change, Saved, IDX
status change · 6 days
$1,725,800
113 Divisadero Street, San Francisco, California
Pending - 3rd Party Approval
4 BD 3 BA 5,400 SF
Julie Crawford
Realty One Group 

<div class="lc-container">
  <div class="lc-thumbnail--container">
    <div class="lc-thumbnail"
         style="background-image: url('https://cdn.resize.sparkplatform.com/demomls/640x480/true/20171221163147585449000000-o.jpg');">
      <span role="img" aria-label="Appropriate image alt text"></span>
      <div class="lc-info">
        <div class="lc-status--container">
          <div class="label label-status-change">status change &middot; 6 days</div>
        </div>
        <div class="lc-button--container">
          <a class="lc-button--save active">
            <span class="flexicon flexicon-star" title="Save&nbsp;Listing" data-toggle="tooltip"></span>
          </a>
          <a class="lc-button--hide ">
            <span class="flexicon flexicon-slash--circle" title="Hide&nbsp;Listing" data-toggle="tooltip"></span>
          </a>
          <span class="dropdown">
            <a class="lc-button--menu" data-toggle="dropdown">
              <span class="flexicon flexicon-ellipsis" title="More&nbsp;Options" data-toggle="tooltip"></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
              <li> <a>Save</a> </li>
              <li> <a>Hide</a> </li>
              <li> <a>Copy Share Link</a> </li>
              <li> <a>Contact Agent</a> </li>
            </ul>
          </span>
        </div>
        <div class="lc-priceshowing--container">
          <div class="lc-price--container">
            <div class="t-title--larger">$1,725,800</div>
          </div>
          <div class="lc-showing--container">
              <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="lc-details--container">
    <div class="lc-address" title="113 Divisadero Street, San Francisco">
      113 Divisadero Street, San Francisco, California
    </div>
    <span class="lc-status lc-status--pending">
      Pending - 3rd Party Approval
    </span>
    <div class="lc-details" title="4 BD  3 BA  5,400 SF">
      <!-- &nbsp; are required here so we can get a proper overflow ellipsis. -->
      <span>4 BD</span>
      <span>3 BA</span>
      <span>5,400 SF</span>
    </div>
  </div>
  <div class="lc-details--container lc-idx">
    <div>
      Julie Crawford<br>
      Realty One Group
    </div>
    <img class="lc-idx--logo"
      src="https://cdn.photos.sparkplatform.com/az/20090929200813207293000000.jpg">
  </div>
</div>
Example Card 3
Pending, Info Updated, Hidden
recommended
$1,725,800
113 Divisadero Street, San Francisco, California
Pending - 3rd Party Approval
4 BD 3 BA 5,400 SF 

<div class="lc-container">
  <div class="lc-thumbnail--container">
    <div class="lc-thumbnail"
         style="background-image: url('https://cdn.resize.sparkplatform.com/demomls/640x480/true/20171221163147585449000000-o.jpg');">
      <span role="img" aria-label="Appropriate image alt text"></span>
      <div class="lc-info">
        <div class="lc-status--container">
          <div class="label label-recommended">recommended</div>
        </div>
        <div class="lc-button--container">
          <a class="lc-button--save ">
            <span class="flexicon flexicon-star" title="Save&nbsp;Listing" data-toggle="tooltip"></span>
          </a>
          <a class="lc-button--hide active">
            <span class="flexicon flexicon-slash--circle" title="Hide&nbsp;Listing" data-toggle="tooltip"></span>
          </a>
          <span class="dropdown">
            <a class="lc-button--menu" data-toggle="dropdown">
              <span class="flexicon flexicon-ellipsis" title="More&nbsp;Options" data-toggle="tooltip"></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
              <li> <a>Save</a> </li>
              <li> <a>Hide</a> </li>
              <li> <a>Copy Share Link</a> </li>
              <li> <a>Contact Agent</a> </li>
            </ul>
          </span>
        </div>
        <div class="lc-priceshowing--container">
          <div class="lc-price--container">
            <div class="t-title--larger">$1,725,800</div>
          </div>
          <div class="lc-showing--container">
              <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="lc-details--container">
    <div class="lc-address" title="113 Divisadero Street, San Francisco">
      113 Divisadero Street, San Francisco, California
    </div>
    <span class="lc-status lc-status--pending">
      Pending - 3rd Party Approval
    </span>
    <div class="lc-details" title="4 BD  3 BA  5,400 SF">
      <!-- &nbsp; are required here so we can get a proper overflow ellipsis. -->
      <span>4 BD</span>
      <span>3 BA</span>
      <span>5,400 SF</span>
    </div>
  </div>
</div>
Hide Listing
You have hidden this listing.
113 Divisadero Street, San Francisco, California
Pending - 3rd Party Approval
4 BD 3 BA 5,400 SF
Julie Crawford
Realty One Group 

<div class="lc-container">
  <div class="lc-hidden">
    <div> You have hidden this listing. </div>
    <div> <a>Unhide</a> </div>
  </div>
  <div class="lc-thumbnail--container">
    <div class="lc-thumbnail"
         style="background-image: url('https://cdn.resize.sparkplatform.com/demomls/640x480/true/20171221163147585449000000-o.jpg');">
      <span role="img" aria-label="Appropriate image alt text"></span>
    </div>
  </div>
  <div class="lc-details--container">
    <div class="lc-address" title="113 Divisadero Street, San Francisco">
      113 Divisadero Street, San Francisco, California
    </div>
    <span class="lc-status lc-status--pending">
      Pending - 3rd Party Approval
    </span>
    <div class="lc-details" title="4 BD  3 BA  5,400 SF">
      <!-- &nbsp; are required here so we can get a proper overflow ellipsis. -->
      <span>4 BD</span>
      <span>3 BA</span>
      <span>5,400 SF</span>
    </div>
  </div>
  <div class="lc-details--container lc-idx">
    <div>
      Julie Crawford<br>
      Realty One Group
    </div>
    <img class="lc-idx--logo"
      src="https://cdn.photos.sparkplatform.com/az/20090929200813207293000000.jpg">
  </div>
</div>
Mobile Example
Pending, Saved, IDX

Open in new window