Introduction

The styleguide is a UI/UX bible for for designers and developers. We use it to maintain modular front-end code and visual consistency across the web app.

How to use?

Use the existed patterns
If the existed patterns do not solve the design problem, there are two options:
1. Alter a pre-existing pattern to solve the problem, and implement that change across all of Roblox via a change to the styleguide.
2. Build a new pattern, and integrate it into the canon of Roblox’s UI patterns for future use.

Example

Code

<ul class="breadcrumb-container">
  <li>
    <a href="#" class="text-link">Collectibles</a>
  </li>
  <li>
    <span class="icon-right-16x16"></span>
  </li>
  <li>
    <a href="#" class="text-link">Hats</a>
  </li>
  <li>
    <span class="icon-right-16x16"></span>
  </li>
  <li class="breadcrumb-filter">
    <span class="breadcrumb-filter-name">Avatar Version</span>
  </li>
  <li class="breadcrumb-filter">
    <span class="breadcrumb-filter-name">Genre</span>
  </li>
  <li class="breadcrumb-filter">
    <span class="breadcrumb-filter-name">Creator</span>
  </li>
  <li>
    <span class="icon-right-16x16"></span>
  </li>
  <li>
    <span>Genre: 3 Selected</span>
  </li>
</ul>

Buttons

Width

Play, Buy Robux, Upgrade

Example

Code

<button type="button" class="btn-min-width btn-secondary-xs">See All</button>
<br />
<br />
<button type="button" class="btn-min-width btn-secondary-xs">Create New Outfit</button>
<br />
<br />
<button type="button" class="btn-secondary-md">Create Private Server</button>
<br />
<br />
<button type="button" class="btn-full-width btn-control-md">See All</button>

Call to Action Buttons

Action button

Example

Code

<button type="button" class="btn-cta-lg">Large</button>
<button type="button" class="btn-cta-md">Medium</button>
<button type="button" class="btn-cta-sm">Small</button>
<button type="button" class="btn-cta-xs">Extra Small</button>
<br />
<br />
<button type="button" class="btn-cta-lg" disabled="">Large</button>
<button type="button" class="btn-cta-md" disabled="">Medium</button>
<button type="button" class="btn-cta-sm" disabled="">Small</button>
<button type="button" class="btn-cta-xs" disabled="">Extra Small</button>

Growth Buttons

Play, Buy Robux, Upgrade

https://confluence.roblox.com/display/MOBAPP/Growth+Buttons

Example

Code

<button type="button" class="btn-growth-lg">Large</button>
<button type="button" class="btn-growth-md">Medium</button>
<button type="button" class="btn-growth-sm">Small</button>
<button type="button" class="btn-growth-xs">Extra Small</button>
<br />
<br />
<button type="button" class="btn-growth-lg" disabled="">Large</button>
<button type="button" class="btn-growth-md" disabled="">Medium</button>
<button type="button" class="btn-growth-sm" disabled="">Small</button>
<button type="button" class="btn-growth-xs" disabled="">Extra Small</button>

Secondary Action Buttons

Trade, See all, Create New

Example

Code

<button type="button" class="btn-secondary-lg">Large</button>
<button type="button" class="btn-secondary-md">Medium</button>
<button type="button" class="btn-secondary-sm">Small</button>
<button type="button" class="btn-secondary-xs">Extra Small</button>
<br />
<br />
<button type="button" class="btn-secondary-lg" disabled="">Large</button>
<button type="button" class="btn-secondary-md" disabled="">Medium</button>
<button type="button" class="btn-secondary-sm" disabled="">Small</button>
<button type="button" class="btn-secondary-xs" disabled="">Extra Small</button>

Control + Configure Buttons

Edit, Share, Save, Cancel

Example

Code

<button type="button" class="btn-control-lg">Large</button>
<button type="button" class="btn-control-md">Medium</button>
<button type="button" class="btn-control-sm">Small</button>
<button type="button" class="btn-control-xs">Extra Small</button>
<br />
<br />
<button type="button" class="btn-control-lg" disabled="">Large</button>
<button type="button" class="btn-control-md" disabled="">Medium</button>
<button type="button" class="btn-control-sm" disabled="">Small</button>
<button type="button" class="btn-control-xs" disabled="">Extra Small</button>

Alert Buttons

Trade, See all, Create New

Example

Code

<button type="button" class="btn-alert-lg">Large</button>
<button type="button" class="btn-alert-md">Medium</button>
<button type="button" class="btn-alert-sm">Small</button>
<button type="button" class="btn-alert-xs">Extra Small</button>
<br />
<br />
<button type="button" class="btn-alert-lg" disabled="">Large</button>
<button type="button" class="btn-alert-md" disabled="">Medium</button>
<button type="button" class="btn-alert-sm" disabled="">Small</button>
<button type="button" class="btn-alert-xs" disabled="">Extra Small</button>

Icon Buttons

Example

Code

<button type="button" class="btn-generic-edit-lg">
  <span class="icon-edit"></span>
</button>
<button type="button" class="btn-generic-edit-md">
  <span class="icon-edit"></span>
</button>
<button type="button" class="btn-generic-edit-sm">
  <span class="icon-edit"></span>
</button>
<button type="button" class="btn-generic-edit-xs">
  <span class="icon-edit"></span>
</button>

Play button

Code

<button type="button" class="btn-common-play-game-lg">
  <span class="icon-common-play"></span>
</button>

Purchase game button

Code

<button type="button" class="btn-branded-robux-white-lg">
  <span class="icon-robux-white"></span>
  <span class="btn-text">500</span>
</button>

Buy Buttons

Used in game datails page for purchase game pass

Example

Code

<button type="button" class="btn-buy-lg">Large</button>
<button type="button" class="btn-buy-md">Medium</button>
<button type="button" class="btn-buy-sm">Small</button>
<button type="button" class="btn-buy-xs">Extra Small</button>
<br />
<br />
<button type="button" class="btn-buy-lg" disabled="">Large</button>
<button type="button" class="btn-buy-md" disabled="">Medium</button>
<button type="button" class="btn-buy-sm" disabled="">Small</button>
<button type="button" class="btn-buy-xs" disabled="">Extra Small</button>

Toggle

Usage: listen "toggleBtnClick" event to get toggle status and element id

Example

Code

<button id="btn-toggle" class="btn-toggle on">
  <span class="toggle-flip"></span>
  <span id="toggle-on" class="toggle-on"></span>
  <span id="toggle-off" class="toggle-off"></span>
</button>
<button id="btn-toggle" class="btn-toggle on" disabled="">
  <span class="toggle-flip"></span>
  <span id="toggle-on" class="toggle-on"></span>
  <span id="toggle-off" class="toggle-off"></span>
</button>
<button id="btn-toggle-off" class="btn-toggle">
  <span class="toggle-flip"></span>
  <span id="toggle-on" class="toggle-on"></span>
  <span id="toggle-off" class="toggle-off"></span>
</button>
<button id="btn-toggle-disable" class="btn-toggle" disabled="">
  <span class="toggle-flip"></span>
  <span id="toggle-on" class="toggle-on"></span>
  <span id="toggle-off" class="toggle-off"></span>
</button>

Cards

Game Store Cards

Background color for items is $gray-4

Example

Fit Around 18 Letters
999,999,999
Fit Around 18 Letters
999,999,999
Fit Around 18 Letters
Free
Owned
Fit Around 18 Letters
Free
Owned
Add Pass

Code

<ul class="hlist store-cards">
  <li class="list-item">
    <div class="store-card">
      <img src="/images/NextStyleGuide/temp/robot.png" alt="PItem 150 x 150" class="store-card-thumb" />
      <div class="store-card-caption">
        <div class="text-overflow store-card-name">Fit Around 18 Letters</div>
        <div class="store-card-price">
          <span class="icon-robux-16x16"></span>
          <span class="text-robux">999,999,999</span>
        </div>
        <div class="store-card-footer">
          <button class="btn-buy-md btn-full-width">Buy</button>
        </div>
      </div>
    </div>
  </li>
  <li class="list-item">
    <div class="store-card">
      <img src="/images/NextStyleGuide/temp/robot.png" alt="Item 150 x 150" class="store-card-thumb" />
      <div class="store-card-caption">
        <div class="text-overflow store-card-name">Fit Around 18 Letters</div>
        <div class="store-card-price">
          <span class="icon-robux-16x16"></span>
          <span class="text-robux">999,999,999</span>
        </div>
        <div class="store-card-footer">
          <button class="btn-buy-md btn-full-width">Get</button>
        </div>
      </div>
    </div>
  </li>
  <li class="list-item">
    <div class="store-card">
      <img src="/images/NextStyleGuide/temp/robot.png" alt="Item 150 x 150" class="store-card-thumb" />
      <div class="store-card-caption">
        <div class="text-overflow store-card-name">Fit Around 18 Letters</div>
        <div class="store-card-price">
          <span>Free</span>
        </div>
        <div class="store-card-footer">
          <h5>Owned</h5>
        </div>
      </div>
    </div>
  </li>
  <li class="list-item">
    <div class="store-card">
      <img src="/images/NextStyleGuide/temp/robot.png" alt="Item 150 x 150" class="store-card-thumb" />
      <div class="store-card-caption">
        <div class="text-overflow store-card-name">Fit Around 18 Letters</div>
        <div class="store-card-price">
          <span>Free</span>
        </div>
        <div class="store-card-footer">
          <h5>Owned</h5>
        </div>
      </div>
    </div>
  </li>
  <li class="list-item">
    <div class="store-card">
      <a class="store-card-add">
        <img src="/images/Gamecards/placeholder_add.png" alt="Placeholder 150 x 150" class="store-card-thumb" />
        <div class="store-card-add-label">Add Pass</div>
      </a>
    </div>
  </li>
</ul>

Extra Large Game Tile

480x270(Desktop), 294x166(Mobile)

Example

Extra Large Game Tile

50% 0

Code

<div class="large-game-tile game-tile-container">
  <div class="large-game-tile-container">
    <div class="cursor-pointer">
      <div class="large-game-tile-thumb-container placeholder-game-thumbnail">
        <img class="placeholder-game-thumbnail large-game-tile-thumb" src="" />
      </div>
      <div class="large-game-tile-overlay">
        <div class="large-game-tile-info-container">
          <h1 class="text-overflow large-game-tile-name">Extra Large Game Tile</h1>
          <div class="game-card-info large-game-tile-info">
            <span class="info-label icon-votes-gray-white-70"></span>
            <span class="info-label vote-percentage-label">50%</span>
            <span class="info-label icon-playing-counts-gray-white-70"></span>
            <span class="info-label playing-counts-label" title="0">0</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Extra Large Game Tile With Instant Play

With Play button (hover)

Example

Extra Large Game Tile

20% 3,000

Code

<div class="large-game-tile game-tile-container">
  <div class="large-game-tile-container">
    <div class="cursor-pointer">
      <div class="large-game-tile-thumb-container placeholder-game-thumbnail">
        <img class="placeholder-game-thumbnail large-game-tile-thumb" src="" />
      </div>
      <div class="cursor-pointer instant-play-mask">
        <span class="icon-common-play"></span>
      </div>
      <div class="large-game-tile-overlay">
        <div class="large-game-tile-info-container">
          <h1 class="text-overflow large-game-tile-name">Extra Large Game Tile</h1>
          <div class="game-card-info large-game-tile-info">
            <span class="info-label icon-votes-gray"></span>
            <span class="info-label vote-percentage-label">20%</span>
            <span class="info-label icon-playing-counts-gray"></span>
            <span class="info-label playing-counts-label" title="0">3,000</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Game Cards 150x150

150x150 is used for games page

Example

Code

<ul class="hlist game-cards">
  <li class="list-item game-card game-tile">
    <div class="game-card-container">
      <a href="#" class="game-card-link">
        <div class="game-card-thumb-container">
          <span class="game-card-thumb icon-placeholder-game"></span>
        </div>
        <div class="game-card-name game-name-title" title="Work at a Pizza Place" ng-non-bindable=""> Work at a Pizza Place, testing long name </div>
        <div class="game-card-info">
          <span class="info-label icon-votes-gray-white-70"></span>
          <span class="info-label vote-percentage-label">94%</span>
          <span class="info-label icon-playing-counts-gray-white-70"></span>
          <span class="info-label playing-counts-label">999M+</span>
        </div>
      </a>
    </div>
  </li>
  <li class="list-item game-card game-tile">
    <div class="game-card-container">
      <a href="#" class="game-card-link">
        <div class="game-card-thumb-container">
          <span class="game-card-thumb icon-placeholder-game"></span>
        </div>
        <div class="game-card-name game-name-title" title="Phantom Forces Beta" ng-non-bindable=""> Phantom Forces Beta </div>
        <div class="game-card-info">
          <span class="info-label icon-votes-gray"></span>
          <span class="info-label no-vote"></span>
          <span class="info-label icon-playing-counts-gray"></span>
          <span class="info-label playing-counts-label">99M</span>
        </div>
      </a>
    </div>
  </li>
  <li class="list-item game-card sponsored-game" style="display: inline-block">
    <a class="game-card-container">
      <div class="game-card-thumb-container">
        <span class="game-card-thumb icon-placeholder-game"></span>
      </div>
      <div class="game-card-name game-name-title"> RobloxMandaari's Place Number: 1 </div>
      <div class="game-card-native-ad">
        <div class="native-ad-label"> Sponsored Ad </div>
      </div>
    </a>
  </li>
</ul>

Game Cards 126x126

126x126 is used for game detail page

Example

Code

<ul class="hlist game-cards">
  <li class="list-item game-card game-tile">
    <div class="game-card-container">
      <a href="#" class="game-card-link ">
        <div class="game-card-thumb-container">
          <span class="game-card-thumb icon-placeholder-game"></span>
        </div>
        <div class="game-card-name game-name-title" title="Work at a Pizza Place" ng-non-bindable=""> Work at a Pizza Place </div>
        <div class="game-card-info">
          <span class="info-label icon-votes-gray"></span>
          <span class="info-label vote-percentage-label">94%</span>
          <span class="info-label icon-playing-counts-gray"></span>
          <span class="info-label playing-counts-label">99M</span>
        </div>
      </a>
    </div>
  </li>
  <li class="list-item game-card game-tile">
    <div class="game-card-container">
      <a href="#" class="game-card-link">
        <div class="game-card-thumb-container">
          <span class="game-card-thumb icon-placeholder-game"></span>
        </div>
        <div class="game-card-name game-name-title" title="Phantom Forces Beta" ng-non-bindable=""> Phantom Forces Beta </div>
        <div class="game-card-info">
          <span class="info-label icon-votes-gray"></span>
          <span class="info-label vote-percentage-label">94%</span>
          <span class="info-label icon-playing-counts-gray"></span>
          <span class="info-label playing-counts-label">99M</span>
        </div>
      </a>
    </div>
  </li>
  <li class="list-item game-card game-tile">
    <div class="game-card-container">
      <a href="#" class="game-card-link">
        <div class="game-card-thumb-container">
          <span class="game-card-thumb icon-placeholder-game"></span>
        </div>
        <div class="game-card-name game-name-title" title="Phantom Forces Beta" ng-non-bindable=""> Phantom Forces Beta </div>
        <div class="game-card-info">
          <span class="info-label icon-votes-gray"></span>
          <span class="info-label vote-percentage-label">94%</span>
          <span class="info-label icon-playing-counts-gray"></span>
          <span class="info-label playing-counts-label">99M</span>
        </div>
      </a>
    </div>
  </li>
  <li class="list-item game-card game-tile">
    <div class="game-card-container">
      <a href="#" class="game-card-link">
        <div class="game-card-thumb-container">
          <span class="game-card-thumb icon-placeholder-game"></span>
        </div>
        <div class="game-card-name game-name-title" title="Phantom Forces Beta" ng-non-bindable=""> Phantom Forces Beta </div>
        <div class="game-card-info">
          <span class="info-label icon-votes-gray"></span>
          <span class="info-label vote-percentage-label">94%</span>
          <span class="info-label icon-playing-counts-gray"></span>
          <span class="info-label playing-counts-label">99M</span>
        </div>
      </a>
    </div>
  </li>
  <li class="list-item game-card game-tile">
    <div class="game-card-container">
      <a href="#" class="game-card-link">
        <div class="game-card-thumb-container">
          <span class="game-card-thumb icon-placeholder-game"></span>
        </div>
        <div class="game-card-name game-name-title" title="Phantom Forces Beta" ng-non-bindable=""> Phantom Forces Beta </div>
        <div class="game-card-info">
          <span class="info-label icon-votes-gray"></span>
          <span class="info-label vote-percentage-label">94%</span>
          <span class="info-label icon-playing-counts-gray"></span>
          <span class="info-label playing-counts-label">99M</span>
        </div>
      </a>
    </div>
  </li>
  <li class="list-item game-card game-tile">
    <div class="game-card-container">
      <a href="#" class="game-card-link">
        <div class="game-card-thumb-container">
          <span class="game-card-thumb icon-placeholder-game"></span>
        </div>
        <div class="game-card-name game-name-title" title="Phantom Forces Beta" ng-non-bindable=""> Phantom Forces Beta </div>
        <div class="game-card-info">
          <span class="info-label icon-votes-gray"></span>
          <span class="info-label vote-percentage-label">94%</span>
          <span class="info-label icon-playing-counts-gray"></span>
          <span class="info-label playing-counts-label">99M</span>
        </div>
      </a>
    </div>
  </li>
  <li class="list-item game-card game-tile">
    <div class="game-card-container">
      <a href="#" class="game-card-link">
        <div class="game-card-thumb-container">
          <span class="game-card-thumb icon-placeholder-game"></span>
        </div>
        <div class="game-card-name game-card-title" title="Phantom Forces Beta" ng-non-bindable=""> Phantom Forces Beta </div>
        <div class="game-card-info">
          <span class="info-label icon-votes-gray"></span>
          <span class="info-label vote-percentage-label">94%</span>
          <span class="info-label icon-playing-counts-gray"></span>
          <span class="info-label playing-counts-label">99M</span>
        </div>
      </a>
    </div>
  </li>
</ul>

Extra Large Item Tile

480x270(Desktop), 294x166(Mobile)

Example

Extra Large Item Tile

5000

Code

<div class="large-item-tile">
  <div class="large-item-tile-container">
    <div class="cursor-pointer">
      <div class="large-item-tile-thumb-container">
        <img class="large-item-tile-thumb" src="" />
      </div>
      <div class="large-item-tile-overlay">
        <div class="large-item-tile-info-container">
          <h1 class="text-overflow large-item-tile-name">Extra Large Item Tile</h1>
          <div class="large-item-tile-info">
            <span class="info-label icon-robux"></span>
            <span class="info-label font-header-2 text-robux">5000</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Feature Item Cards

Feature Cards/List view in Mobile

Feature Item Card: catalog page, also list view at moblie size

Example

Purple Horns of the Mystic
Remaining: 154
650
Exp: 8 Days 19: 28: 40
Tix Wanderer
Was 2,000
8,000
Halloween Witch Hat
Remaining: 154
Free
Pig with Aviators
Remaining: 154
No Resellers
Pig with Aviators
Remaining: 154
Offsale

Code

<ul class="hlist item-cards-stackable">
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-unique-obc-label"></span>
          </div>
        </div>
      </a>
      <div class="item-card-caption">
        <a href="#" class="item-card-name-link">
          <div class="text-overflow item-card-name">Purple Horns of the Mystic</div>
        </a>
        <div class="text-overflow text-secondary item-card-label"> Remaining: 154 </div>
        <div class="item-card-price margin-top-none">
          <span class="icon-robux-16x16"></span>
          <span class="text-robux">650</span>
        </div>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="item-expire-time-label">Exp: 8 Days 19: 28: 40</span>
          </div>
        </div>
      </a>
      <div class="item-card-caption">
        <a href="#" class="item-card-name-link">
          <div class="text-overflow item-card-name">Tix Wanderer</div>
        </a>
        <div class="text-overflow text-secondary item-card-label"> Was 
          <span class="icon-robux-gray"></span>
          <span class="strike-through">2,000</span>
        </div>
        <div class="item-card-price margin-top-none">
          <span class="icon-robux-16x16"></span>
          <span class="text-robux">8,000</span>
        </div>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-unique-label"></span>
          </div>
        </div>
      </a>
      <div class="item-card-caption">
        <a href="#" class="item-card-name-link">
          <div class="text-overflow item-card-name">Halloween Witch Hat</div>
        </a>
        <div class="text-overflow text-secondary item-card-label"> Remaining: 154 </div>
        <div class="item-card-price margin-top-none">
          <span class="text-robux">Free</span>
        </div>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-label"></span>
          </div>
        </div>
      </a>
      <div class="item-card-caption">
        <a href="#" class="item-card-name-link">
          <div class="text-overflow item-card-name">Pig with Aviators</div>
        </a>
        <div class="text-overflow text-secondary item-card-label"> Remaining: 154 </div>
        <div class="item-card-price margin-top-none">
          <span class="text-label">No Resellers</span>
        </div>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-label"></span>
          </div>
        </div>
      </a>
      <div class="item-card-caption">
        <a href="#" class="item-card-name-link">
          <div class="text-overflow item-card-name">Pig with Aviators</div>
        </a>
        <div class="text-overflow text-secondary item-card-label"> Remaining: 154 </div>
        <div class="item-card-price margin-top-none">
          <span class="text-label">Offsale</span>
        </div>
        <div class="item-card-equipped">
          <div class="item-card-equipped-label"></div>
        </div>
      </div>
    </div>
  </li>
</ul>

Example

#3192
Purple Horns of the Mystic
By Roblox
650
Exp: 8 Days 19: 28: 40
Tix Wanderer
By Roblox
8
Halloween Witch Hat
By Roblox
Pig with Aviators
By Roblox
99,999
Pig with Aviators
By Roblox
99,999
Pig with Aviators
By Roblox
99,999
Pig with Aviators
By Roblox
99,999

Code

<ul class="hlist item-cards">
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="item-serial-number">#3192</span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Purple Horns of the Mystic</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="item-card-price">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux">650</span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="xsmall item-expire-time-label">Exp: 8 Days 19: 28: 40</span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Tix Wanderer</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="item-card-price">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux">8</span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-unique-label"></span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Halloween Witch Hat</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="item-card-price invisible">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux"></span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-label"></span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Pig with Aviators</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="item-card-price">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux">99,999</span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-label"></span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Pig with Aviators</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="item-card-price">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux">99,999</span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-label"></span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Pig with Aviators</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="text-robux item-card-price">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux">99,999</span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-label"></span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Pig with Aviators</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="item-card-price">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux">99,999</span>
      </div>
    </div>
  </li>
</ul>

6 per each row for inventory/favorite tab content

Example

#3192
Purple Horns of the Mystic
By Roblox
650
Exp: 8 Days 19: 28: 40
Tix Wanderer
By Roblox
8
Halloween Witch Hat
By Roblox
No Resellers
Halloween Witch Hat
By Roblox
Offsale
Pig with Aviators
By Roblox
99,999
Pig with Aviators
By Roblox
99,999
Pig with Aviators
By Roblox
99,999

Code

<ul class="hlist item-cards item-cards-embed">
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="item-serial-number">#3192</span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Purple Horns of the Mystic</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="text-robux item-card-price">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux">650</span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="item-expire-time-label">Exp: 8 Days 19: 28: 40</span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Tix Wanderer</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="text-robux item-card-price">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux">8</span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-unique-label"></span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Halloween Witch Hat</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="text-robux item-card-price">
        <span class="text-label"> No Resellers </span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
          </div>
        </div>
        <div class="text-overflow item-card-name">Halloween Witch Hat</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="text-robux item-card-price">
        <span class="text-label"> Offsale </span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-label"></span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Pig with Aviators</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="item-card-price">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux">99,999</span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-label"></span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Pig with Aviators</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="item-card-price">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux">99,999</span>
      </div>
    </div>
  </li>
  <li class="list-item item-card">
    <div class="item-card-container">
      <a href="#" class="item-card-link">
        <div class="item-card-thumb-container">
          <div class="placeholder-asset-container">
            <div class="item-card-thumb icon-placeholder-asset"></div>
            <span class="icon-limited-label"></span>
          </div>
        </div>
        <div class="text-overflow item-card-name">Pig with Aviators</div>
      </a>
      <div class="text-overflow item-card-creator">
        <span class="xsmall text-label">By</span>
        <a class="xsmall text-overflow text-link" href="#"> Roblox </a>
      </div>
      <div class="item-card-price">
        <span class="icon-robux-16x16"></span>
        <span class="text-robux">99,999</span>
      </div>
    </div>
  </li>
</ul>

Avatar Headshot Cards

avatar-headshot-sm: chat, leadboard/running game at game details page
avatar-group: chat group/party
avatar-headshot-md: feed at home page, comment
avatar-headshot-lg: home avatar, profile avatar

Example

Code

<div class="avatar avatar-headshot avatar-headshot-xs">
  <a href="#" class="avatar-card-link">
    <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
  </a>
  <span class="avatar-status game"></span>
</div>
<div class="avatar avatar-headshot avatar-headshot-sm">
  <a href="#" class="avatar-card-link">
    <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
  </a>
  <span class="avatar-status game"></span>
</div>
<div>
  <ul class="avatar-group card-plain avatar-double">
    <li class="avatar-item">
      <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
    </li>
    <li class="avatar-item">
      <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
    </li>
  </ul>
</div>
<div>
  <ul class="avatar-group card-plain avatar-triple">
    <li class="avatar-item">
      <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
    </li>
    <li class="avatar-item">
      <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
    </li>
    <li class="avatar-item">
      <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
    </li>
  </ul>
</div>
<div>
  <ul class="avatar-group card-plain avatar-all">
    <li class="avatar-item">
      <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
    </li>
    <li class="avatar-item">
      <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
    </li>
    <li class="avatar-item">
      <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
    </li>
    <li class="avatar-item">
      <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
    </li>
  </ul>
</div>
<div class="avatar avatar-headshot-md">
  <a href="#" class="avatar-card-link">
    <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
  </a>
</div>
<div class="avatar avatar-headshot-lg">
  <a href="#" class="avatar-card-link">
    <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
  </a>
  <a href="" class="avatar-status online">
    <span class="icon-online"></span>
  </a>
</div>

Avatar Card without box shadow

It is used when avatar without link to profile page

Example

Code

<div class="avatar card-plain avatar-headshot-lg">
  <a href="#" class="avatar-card-link">
    <span class="avatar-card-image icon-placeholder-avatar-headshot"></span>
  </a>
  <a href="" class="avatar-status online">
    <span class="icon-online"></span>
  </a>
</div>

Avatar FullBody

Example

Code

<div class="avatar-container">
  <div class="avatar avatar-card-fullbody">
    <a href="#" class="avatar-card-link">
      <span class="avatar-card-image icon-placeholder-avatar-fullbody"></span>
    </a>
  </div>
  <a href="" class="">
    <span class="avatar-status icon-game"></span>
  </a>
</div>

Avatar Cards

line 1: a.ka/you're friend/mutual friend/following/online/offline
line 2: currently doing (Playing/Creating/Website)

Example

OnlyTwentyCharacters
23 mutual friends(line 1)
Playing(line 2)
Work at a Pizza Place
- Unfriend
- Pastname(s)
OnlyTwentyCharacters
Online
Website
- Unfollow
OnlyTwentyCharacters
User has been restricted
- Unfriend
OnlyTwentyCharacters
Online
Creating
My place

Code

<ul class="hlist avatar-cards">
  <li class="list-item avatar-card">
    <div class="avatar-card-container">
      <div class="avatar-card-fullbody">
        <a href="#" class="avatar-card-link">
          <span class="avatar-card-image icon-placeholder-avatar-fullbody"></span>
        </a>
        <a href="" class="avatar-status game">
          <span class="icon-game"></span>
        </a>
      </div>
      <div class="avatar-card-caption">
        <div class="text-overflow avatar-name">OnlyTwentyCharacters</div>
        <div class="avatar-card-label">23 mutual friends(line 1)</div>
        <span class="avatar-status-container">
          <div class="avatar-card-label">Playing(line 2)</div>
          <a href="#" class="text-link text-overflow avatar-status-link">Work at a Pizza Place</a>
        </span>
      </div>
      <div class="avatar-card-menu">
        <a class="rbx-menu-item" data-toggle="popover" data-bind="popover-content1">
          <span class="icon-more"></span>
        </a>
        <div class="rbx-popover-content" data-toggle="popover-content1">
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">Unfriend</a>
            </li>
            <li>
              <a href="#">Pastname(s)</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <li class="list-item avatar-card">
    <div class="avatar-card-container">
      <div class="avatar-card-fullbody">
        <a href="#" class="avatar-card-link">
          <span class="avatar-card-image icon-placeholder-avatar-fullbody"></span>
        </a>
        <a href="" class="avatar-status online">
          <span class="icon-online"></span>
        </a>
      </div>
      <div class="avatar-card-caption">
        <div class="text-overflow avatar-name">OnlyTwentyCharacters</div>
        <div class="avatar-card-label">Online</div>
        <span class="avatar-status-container">
          <div class="avatar-card-label">Website</div>
        </span>
      </div>
      <div class="avatar-card-menu">
        <a class="rbx-menu-item" data-toggle="popover" data-bind="popover-content1">
          <span class="icon-more"></span>
        </a>
        <div class="rbx-popover-content" data-toggle="popover-content1">
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">Unfollow</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <li class="list-item avatar-card">
    <div class="avatar-card-container disabled">
      <div class="avatar-card-fullbody">
        <a href="#" class="avatar-card-link">
          <span class="avatar-card-image icon-placeholder-avatar-fullbody"></span>
        </a>
        <a href="" class="avatar-status online">
          <span class="icon-online"></span>
        </a>
      </div>
      <div class="avatar-card-caption">
        <div class="text-overflow avatar-name">OnlyTwentyCharacters</div>
        <div class="text-overflow avatar-card-label">User has been restricted</div>
        <span class="avatar-status-container"></span>
      </div>
      <div class="avatar-card-menu">
        <a class="rbx-menu-item" data-toggle="popover" data-bind="popover-content1">
          <span class="icon-more"></span>
        </a>
        <div class="rbx-popover-content" data-toggle="popover-content1">
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="#">Unfriend</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <li class="list-item avatar-card">
    <div class="avatar-card-container">
      <div class="avatar-card-content">
        <div class="avatar-card-fullbody">
          <a href="#" class="avatar-card-link">
            <span class="avatar-card-image icon-placeholder-avatar-fullbody"></span>
          </a>
          <a href="" class="avatar-status studio">
            <span class="icon-studio"></span>
          </a>
        </div>
        <div class="avatar-card-caption">
          <div class="text-overflow avatar-name">OnlyTwentyCharacters</div>
          <div class="avatar-card-label">Online</div>
          <span class="avatar-status-container">
            <div class="avatar-card-label">Creating</div>
            <a href="#" class="text-link text-overflow avatar-status-link">My place</a>
          </span>
        </div>
      </div>
      <div class="avatar-card-btns">
        <button class="btn-secondary-md">Accept</button>
        <button class="btn-control-md">Ignore</button>
      </div>
    </div>
  </li>
</ul>

Carousels

There are three types of carousels: carousel for game details page, slider shows for profile page and scrolling carousel for games page. The first two carousels exist in _carousel.scss

Group and Game

Example

Group Name
Group Description
- Members
  1,000,000
- Rank
  99,999
Group Name
Group Description
- Members
  1,000,000
- Rank
  99,999

Code

<div id="groups-switcher" class="switcher slide-switcher groups" switcher="" itemscount="switcher.groups.itemsCount" currpage="switcher.groups.currPage">
  <ul class="slide-items-container switcher-items hlist">
    <li class="switcher-item slide-item-container active" ng-class="{'active': switcher.groups.currPage == 0}" data-index="0">
      <div class="col-sm-6 slide-item-container-left">
        <div class="slide-item-emblem-container">
          <a href="#">
            <img class="slide-item-image" src="http://t5.rbxcdn.com/c1e19b97f93f0cbf62c9b1403a2f0a39" />
          </a>
        </div>
      </div>
      <div class="col-sm-6 text-overflow slide-item-container-right groups">
        <div class="slide-item-info">
          <h2 class="slide-item-name groups text-overflow" ng-non-bindable="">Group Name</h2>
          <p class="text-description para-overflow slide-item-description groups" ng-non-bindable="">Group Description</p>
        </div>
        <div class="slide-item-stats">
          <ul class="hlist">
            <li class="list-item">
              <p class="text-label slide-item-stat-title">Members</p>
              <p class="text-lead slide-item-members-count">1,000,000</p>
            </li>
            <li class="list-item">
              <p class="text-label slide-item-stat-title">Rank</p>
              <p class="text-lead slide-item-my-rank groups" ng-non-bindable="">99,999</p>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="switcher-item slide-item-container" ng-class="{'active': switcher.groups.currPage == 1}" data-index="1">
      <div class="col-sm-6 slide-item-container-left">
        <div class="slide-item-emblem-container">
          <a href="#">
            <img class="slide-item-image" src="http://t7.rbxcdn.com/a161fadbd0caafcaeb30dd9715b89550" />
          </a>
        </div>
      </div>
      <div class="col-sm-6 text-overflow slide-item-container-right groups">
        <div class="slide-item-info">
          <h2 class="slide-item-name groups text-overflow" ng-non-bindable="">Group Name</h2>
          <p class="text-description para-overflow slide-item-description groups" ng-non-bindable="">Group Description</p>
        </div>
        <div class="slide-item-stats">
          <ul class="hlist">
            <li class="list-item">
              <div class="text-label slide-item-stat-title">Members</div>
              <div class="text-lead slide-item-members-count">1,000,000</div>
            </li>
            <li class="list-item">
              <div class="text-label slide-item-stat-title">Rank</div>
              <div class="text-lead slide-item-my-rank groups" ng-non-bindable="">99,999</div>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <a class="carousel-control left" data-switch="prev">
    <span class="icon-carousel-left"></span>
  </a>
  <a class="carousel-control right" data-switch="next">
    <span class="icon-carousel-right"></span>
  </a>
</div>

Sliding Carousel

Example

Praesent sagittis consequat ex non scelerisque. Aenean et suscipit lacus. Pellentesque pharetra lacus eu magna iaculis. Quisque fermentum purus lorem.

- beckham

Integer at quam sed magna ultricies finibus non in urna. Pellentesque a turpis erat. Vestibulum faucibus arcu in lobortis porttitor. Suspendisse nec felis vel ipsum.

- curry

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor lorem a nisl gravida, in vestibulum arcu scelerisque. Donec feugiat magna sed dapibus molestie.

- hahamonkey5

Praesent sagittis consequat ex non scelerisque. Aenean et suscipit lacus. Pellentesque pharetra lacus eu magna iaculis. Quisque fermentum purus lorem.

- beckham

Integer at quam sed magna ultricies finibus non in urna. Pellentesque a turpis erat. Vestibulum faucibus arcu in lobortis porttitor. Suspendisse nec felis vel ipsum.

- curry

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor lorem a nisl gravida, in vestibulum arcu scelerisque. Donec feugiat magna sed dapibus molestie.

- hahamonkey5

Praesent sagittis consequat ex non scelerisque. Aenean et suscipit lacus. Pellentesque pharetra lacus eu magna iaculis. Quisque fermentum purus lorem.

- beckham

Code

<div class="owl-carousel">
  <div class="item">
    <div class="slide-container">
      <div class="text-box">
        <img class="open-quotation" src="https://images.rbxcdn.com/bafba2b41cb4d3bc13ccbf69866c9eee.png" alt="open quote" />
        <img class="close-quotation" src="https://images.rbxcdn.com/ea64498049dcf4c8997fc10caf17f683.png" alt="close quote" />
        <p class="slide-quote"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor lorem ...</p>
        <p class="font-header-2 slide-name">- hahamonkey5</p>
      </div>
      <img class="slide-image" src="https://images.rbxcdn.com/08fd2f71a779c941251b0a513876ef73.png" alt="profile-picture" />
    </div>
  </div>
  <div class="item">
    <div class="slide-container">
      <div class="text-box">
        <img class="open-quotation" src="https://images.rbxcdn.com/bafba2b41cb4d3bc13ccbf69866c9eee.png" alt="open quote" />
        <img class="close-quotation" src="https://images.rbxcdn.com/ea64498049dcf4c8997fc10caf17f683.png" alt="close quote" />
        <p class="slide-quote"> Praesent sagittis consequat ex non scelerisque. Aenean et suscipit lacus. Pelle...</p>
        <p class="font-header-2 slide-name">- beckham</p>
      </div>
      <img class="slide-image" src="https://images.rbxcdn.com/08fd2f71a779c941251b0a513876ef73.png" alt="profile-picture" />
    </div>
  </div>
  <div class="item">
    <div class="slide-container">
      <div class="text-box">
        <img class="open-quotation" src="https://images.rbxcdn.com/bafba2b41cb4d3bc13ccbf69866c9eee.png" alt="open quote" />
        <img class="close-quotation" src="https://images.rbxcdn.com/ea64498049dcf4c8997fc10caf17f683.png" alt="close quote" />
        <p class="slide-quote"> Integer at quam sed magna ultricies finibus non in urna. Pellentesque a turpis ...</p>
        <p class="font-header-2 slide-name">- curry</p>
      </div>
      <img class="slide-image" src="https://images.rbxcdn.com/08fd2f71a779c941251b0a513876ef73.png" alt="profile-picture" />
    </div>
  </div>
</div>

Colors

Gray

Example

Gray 1 #191919

Gray 2 #757575

Gray 3 #B8B8B8

Gray 4 #E3E3E3

Gray 5 #F2F2F2

background #F5F5F5

White #fff

Code

/* Usage: Gray1  */
.my-class{
 background-color:$gray-1;
}
/* Usage: Gray2  */
.my-class{
 background-color:$gray-2;
}
/* Usage: Gray3  */
.my-class{
 background-color:$gray-3;
}
/* Usage: Gray4  */
.my-class{
 background-color:$gray-5;
}
/* Usage: Gray5  */
.my-class{
 background-color:$gray-5;
}
/* Usage: Gray6  */
.my-class{
 background-color:$white;
 color:$gray-1;
}
/* Usage: Background  */
.my-class{
 background-color:$background;
 color:$gray-1;
}

Blue

Example

Blue Primary #00A2FF

Blue Hover #32B5FF

Blue Pressed #0074BD

Blue Disabled #99DAFF

Code

/* Usage: Blue1  */
.my-class{
 background-color:$blue-1;
}
/* Usage: Blue2  */
.my-class{
 background-color:$blue-2;
}
/* Usage: Blue3  */
.my-class{
 background-color:$blue-3;
}
/* Usage: Blue4  */
.my-class{
 background-color:$blue-4;
}

Green

Example

Green Primary #02B757

Green Hover #3FC679

Green Pressed #108237

Green Disabled #A3E2BD

Code

/* Usage: Green1  */
.my-class{
 background-color:$green-1;
}
/* Usage: Green2  */
.my-class{
 background-color:$green-2;
}
/* Usage: Green3  */
.my-class{
 background-color:$green-3;
}
/* Usage: Green4  */
.my-class{
 background-color:$green-4;
}

Red

Example

Red Primary #E2231A

Red Negative #D86868

Red Hover #AC1E2D

Red Pressed #E27676

Code

/* Usage: Red1  */
.my-class{
 background-color:$red-1;
}
/* Usage: Red2  */
.my-class{
 background-color:$red-2;
}
/* Usage: Red3  */
.my-class{
 background-color:$red-3;
}
/* Usage: Red3  */
.my-class{
 background-color:$red-4;
}

Orange

Example

Orange Warning #F68802

Orange Favorite #F6B702

Code

/* Usage: Orange1  */
.my-class{
 background-color:$orange-1;
}
/* Usage: Orange2  */
.my-class{
 background-color:$orange-2;
}

Shadow

Example

Shadow Primary rgba(25,25,25,0.3)

Shadow Hover rgba(25,25,25,0.75)

Code

/* Usage: Shadow1  */
.my-class{
 box-shadow:$shadow-1;
}
/* Usage: Shadow2  */
.my-class{
 box-shadow:$shadow-2;
}

Themes

Example

Black 70%

Black 30%

Obsidian #18191B

Carbon #1F2123

Slate #232527

White 10%

White 30%

White 70%

Flint #393B3D

Pumice #BDBEBE

Graphite #656668

Ash #E3E5E8

Alabaster #EFF2F5

Smoke #7B7C7D

Green #23D776

Red #F74B52

Code

/* Usage: Black-70  */
.my-class{
 background-color:$black-70;
}
/* Usage: Black-30  */
.my-class{
 background-color:$black-30;
}
/* Usage: Obsidian  */
.my-class{
 background-color:$obsidian;
}
/* Usage: Carbon  */
.my-class{
 background-color:$carbon;
}
/* Usage: Slate  */
.my-class{
 background-color:$slate;
}
/* Usage: White-10  */
.my-class{
 background-color:$white-10;
}
/* Usage: White-30  */
.my-class{
 background-color:$white-30;
}
/* Usage: White-70  */
.my-class{
 background-color:$white-70;
}
/* Usage: Flint  */
.my-class{
 background-color:$flint;
}
/* Usage: Pumice  */
.my-class{
 background-color:$pumice;
}
/* Usage: Graphite  */
.my-class{
 background-color:$graphite;
}
/* Usage: Green  */
.my-class{
 background-color:$green;
}
/* Usage: Red  */
.my-class{
 background-color:$red;
}

Container

Section

Section is used for solid content in one container, like friends in home page, about in profile page

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Code

<div class="section">
  <div class="col-xs-12 container-header">
    <h3>header title</h3>
    <a class="btn-secondary-xs btn-more btn-min-width">See All</a>
  </div>
  <div class="col-xs-12 section-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni...</div>
</div>

Container List

Example

Container list is used for list of cards, like games in home page

Code

<div class="container-list">
  <div class="col-xs-12 container-header">
    <h3>header title</h3>
    <a class="btn-secondary-xs btn-more btn-min-width">See All</a>
  </div>
  <ul class="hlist">
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
    <li class="list-item"></li>
  </ul>
</div>

Single

Example

Code

<div class="col-xs-12 section-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni...</div>

Double

Example

Code

<div class="col-xs-12 col-sm-6 container-double">
  <div class="section-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni...</div>
</div>
<div class="col-xs-12 col-sm-6 container-double">
  <div class="section-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni...</div>
</div>

Stacked

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Code

<div class="stack">
  <ul class="stack-list">
    <li class="stack-row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni...</li>
    <li class="stack-row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni...</li>
  </ul>
</div>

Container-empty

Empty container, individual window with default message

Example

Code

<div class="col-xs-12 container-empty"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni...</div>

Section Content off

Inside page content, no content return, place holder for new users

Example

Code

<div class="col-xs-12 section-content-off"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni...</div>

Form Control

Basic form

Example

Code

<form class="form-horizontal" role="form">
  <div class="form-group">
    <input class="form-control input-field" placeholder="What's Up?" />
  </div>
  <button type="button" class="btn-min-width btn-primary-md">Share</button>
</form>

Validation states

Example

Username: 3-20 characters, no spaces

Please check email format

Code

<div class="form-group">
  <input class="form-control input-field" name="username" placeholder="Username: 3-20 characters, no spaces" />
</div>
<div class="form-group form-has-feedback">
  <input class="form-control input-field" name="username" value="roblox" />
  <p class="form-control-label">Username: 3-20 characters, no spaces</p>
</div>
<div class="form-group form-has-success form-has-feedback">
  <input class="form-control input-field" name="username" value="roblox" />
  <span class="icon-checkmark-on"></span>
</div>
<div class="form-group form-has-error form-has-feedback">
  <input class="form-control input-field" name="email" value="blabla@roblox&com" />
  <p class="form-control-label">Please check email format</p>
</div>

Search

Example

Code

<div class="input-group">
  <input class="form-control input-field" placeholder="Search ..." value="" />
  <div class="input-group-btn">
    <button class="input-addon-btn" type="submit">
      <span class="icon-search"></span>
    </button>
  </div>
</div>

Example

Code

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <input class="form-control input-field" placeholder="Search ..." />
      <div class="input-group-btn">
        <button type="button" class="input-dropdown-btn" data-toggle="dropdown">
          <span class="rbx-selection-label" data-bind="label">All</span>
          <span class="icon-down-16x16"></span>
        </button>
        <button class="input-addon-btn" type="submit">
          <span class="icon-search"></span>
        </button>
        <ul data-toggle="dropdown-menu" class="dropdown-menu" role="menu">
          <li>
            <a href="#">Heads</a>
          </li>
          <li>
            <a href="#">Shirts</a>
          </li>
          <li>
            <a href="#">Gear</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Number Input

Example

Code

<input class="form-control input-field input-number" type="number" />

Slider

Example

Code

<input type="range" step="0.01" min="0.9" max="1.05" value="1" />

Angular Slider

For the new angular slider please visit this page.

Radio

Example

Small

Big

Disabled

Code

<div class="radio">
  <input type="radio" name="radio1" id="radio1" value="option1" checked="" />
  <label for="radio1"> Small </label>
</div>
<div class="radio">
  <input type="radio" name="radio1" id="radio2" value="option2" />
  <label for="radio2"> Big </label>
</div>
<div class="radio">
  <input type="radio" name="radio1" id="radio3" value="option3" disabled="" />
  <label for="radio3"> Disabled </label>
</div>

Radio pills

Example

R6 R15

Code

<div class="pill-toggle">
  <input type="radio" name="avatarType" id="radio-R6" value="R6" checked="" />
  <label for="radio-R6">R6</label>
  <input type="radio" name="avatarType" id="radio-R15" value="R15" />
  <label for="radio-R15">R15</label>
</div>

Checkbox

Example

phone

tablet

desktop

Code

<div class="checkbox">
  <input id="checkbox1" type="checkbox" />
  <label for="checkbox1"> phone </label>
</div>
<div class="checkbox">
  <input id="checkbox2" type="checkbox" />
  <label for="checkbox2"> tablet </label>
</div>
<div class="checkbox">
  <input id="checkbox3" type="checkbox" checked="" />
  <label for="checkbox3"> desktop </label>
</div>
<div class="checkbox">
  <input id="checkbox3" type="checkbox" disabled="" />
  <label for="checkbox3"> desktop </label>
</div>
<div class="checkbox">
  <input id="checkbox3" type="checkbox" disabled="" checked="" />
  <label for="checkbox3"> desktop </label>
</div>

File Upload

This example is using the fileUpload widget in CoreUI

Add FileUpload and SystemFeedback static content components to your page
Add fileUpload and systemFeedback modules to your page
Add system-feedback component to the top of your page
Create fileUploadInfo object and pass in as a component binding to file-upload component

You can set the following properties on fileUploadInfo

allowedFileTypes: An array of allowed file type extensions (ex. ['.png', '.jpg', '.bmp']). Default accepts all file types
previewSrc: The source of the image preview, usually a thumbnail url

Access the following properties on fileUploadInfo

file: The file that has been selected
fileSelected: Whether or not a file has been selected

Example

Code

<div class="file-upload-container" style="width: 100%">
  <file-upload file-upload-info="{}"></file-upload>
</div>

Example: Full Screen

Code

<div class="file-upload-container full-screen">
  <file-upload file-upload-info="{}"></file-upload>
</div>

Iconography

add class active to turn on the icon hover and active status
add class inactive to turn off the icon

Generic

Example

icon-home
icon-search
icon-settings-on
icon-edit
icon-inactive
icon-male
icon-female
icon-page-on
icon-brokenpage
icon-audio
icon-moreinfo
icon-play
icon-pause
icon-menu
icon-right
icon-left
icon-up
icon-down
icon-next
icon-back
icon-checkmark
icon-close
icon-more
icon-sorting
icon-additem
icon-edit-16x16
icon-right-16x16
icon-left-16x16
icon-up-16x16
icon-down-16x16
icon-checkmark-16x16
icon-carousel-right
icon-carousel-left
icon-games-carousel-right
icon-carousel-left
icon-clock
icon-grid
icon-slideshow
icon-pastname
icon-last-page
icon-first-page
icon-checkmark-white
icon-checkmark-white-bold
icon-close-white
icon-sandglass
icon-notifications
icon-right-gray
icon-left-gray
icon-last-gray
icon-first-gray
icon-red-timer-16x16
icon-close-gray-16x16
icon-menu-black
icon-checkmark-blue
icon-plus
icon-minus
icon-bigstop
icon-bigplay
icon-bigplay-fill
icon-bigstop-fill
icon-arrow-right-blue
icon-logo-apple
icon-logo-win
icon-globe
icon-chat-gray
icon-viewdetails
icon-playgame
icon-regenerate
icon-pause-fill
icon-trash-bin

Example

icon-nav-menu
icon-nav-robux
icon-nav-settings
icon-nav-home
icon-nav-profile
icon-nav-message
icon-nav-friends
icon-nav-charactercustomizer
icon-nav-inventory
icon-nav-trade
icon-nav-group
icon-nav-blog
icon-nav-search-white
icon-nav-shop
icon-nav-notification-stream

Common Regular

Example

icon-play-with-circle
icon-common-play
icon-common-refresh
icon-common-search
icon-common-notification-bell

Common Small

Example

icon-refresh-sm
icon-push-right-sm
icon-rating-sm
icon-currently-playing-sm
icon-common-refresh-sm
icon-common-search-sm

Games

Example

icon-inventory
icon-games
icon-catalog
icon-like
icon-dislike
icon-like-gray-16x16
icon-dislike-gray-16x16
icon-playaudio
icon-copylocked
icon-nocopylocked
icon-publicserver
icon-privateserver
icon-allgears
icon-partialgears
icon-nogear
icon-Melee
icon-Ranged
icon-PowerUp
icon-Explosive
icon-Musical
icon-Navigation
icon-Building
icon-Social
icon-Transport
icon-experimental-white
icon-experimental-gray2
icon-share-game-to-chat
icon-votes-gray
icon-playing-counts-gray
icon-votes-gray-white-70
icon-playing-counts-gray-white-70

Example

icon-message
icon-addfriend
icon-friends
icon-group
icon-blog
icon-trade
icon-share

Abuse Report

Example

icon-success
icon-bad-language
icon-private-info
icon-bullying
icon-dating
icon-exploiting
icon-phishing
icon-inappropriate-content
icon-other

Branded

Example

icon-playerpoint
icon-clanpoint
icon-leaderboard
icon-favorite
icon-robux
icon-robux-16x16
icon-robux-gray
icon-robux-white
icon-robux-burst-banner

BC

Example

icon-bc
icon-tbc
icon-obc
icon-bc-no-label
icon-tbc-no-label
icon-obc-no-label

Labels

Example

icon-bc-label
icon-tbc-label
icon-obc-label
icon-limited-label
icon-limited-bc-label
icon-limited-tbc-label
icon-limited-obc-label
icon-limited-unique-label
icon-limited-unique-bc-label
icon-limited-unique-tbc-label
icon-limited-unique-obc-label
icon-thirteen-plus-label
icon-thirteen-plus-bc-label
icon-thirteen-plus-tbc-label
icon-thirteen-plus-obc-label
icon-thirteen-plus-limited-label
icon-thirteen-plus-limited-bc-label
icon-thirteen-plus-limited-tbc-label
icon-thirteen-plus-limited-obc-label
icon-thirteen-plus-limited-unique-label
icon-thirteen-plus-limited-unique-bc-label
icon-thirteen-plus-limited-unique-tbc-label
icon-thirteen-plus-limited-unique-obc-label

Negative

Example

icon-remove
icon-alert
icon-flag
icon-warning
icon-lock
icon-turn-off
icon-warning-orange

Placeholder

Example

icon-placeholder-game
icon-placeholder-asset
icon-placeholder-avatar-headshot
icon-placeholder-avatar-fullbody

Placeholde Game thumbnails

Example

Code

<div class="placeholder-game-thumbnail-sm"></div>
<div class="placeholder-game-thumbnail"></div>

Thumbnail Validation Status

Example

icon-error
icon-in-review
icon-blocked
icon-pending
icon-unknown

Icon Size

Define and generate icons : icon-variant($type, $name, $index, $size: 28x28, $hasHover: false, $numberOfGrid: 1)

Update exsiting icon size/hover status : get-icon($type, $index, $size: 28x28, $hasHover: false)

Dynamic Size

icon-robux

Code

<li>
  <div class="icon-text-wrapper">
    <span class="icon-robux"></span>
    <span class="text-robux">icon-robux</span>
  </div>
</li>

Icon Labels

Define an icon label:

To get correct size of icon: get-label-icon($type, $name, $index, $size, $hasHover)
To get correct text: get-label-text($background-color, $padding, $font-size, $border-radius)

Example

Sale
New

Code

<li>
  <div class="label-sale">
    <span class="icon-clock"></span>
    <span class="label-text"> Sale </span>
  </div>
</li>
<li>
  <div class="label-new">
    <span class="label-text"> New </span>
  </div>
</li>
<li>
  <div class="label-checkmark">
    <span class="icon-checkmark-white-bold"></span>
  </div>
</li>

Logo

Example

Code

<li>
  <span class="icon-logo"></span>
</li>
<li>
  <span class="icon-logo-r"></span>
</li>
<li>
  <span class="icon-logo-r-silver"></span>
</li>

Example

icon-menu-avatar-off
icon-menu-avatar-on
icon-menu-blog
icon-menu-chat-off
icon-menu-chat-on
icon-menu-customize
icon-menu-feed
icon-menu-friends
icon-menu-games-off
icon-menu-games-on
icon-menu-giftcard
icon-menu-groups
icon-menu-home-off
icon-menu-inventory-off
icon-menu-inventory-on
icon-menu-more-off
icon-menu-more-on
icon-menu-profile
icon-menu-shop
icon-menu-trade
icon-menu-email
icon-menu-library
icon-menu-mobile
icon-menu-recover
icon-menu-memory
icon-menu-document

Status Icons

Example

icon-status-alert
icon-status-no-connection
icon-status-private
icon-status-public
icon-status-success
icon-status-unavailable

Example

icon-social-media-discord
icon-social-media-youtube
icon-social-media-twitter
icon-social-media-twitch
icon-social-media-facebook
icon-social-media-github
icon-social-media-google-plus
icon-social-media-roblox
icon-social-media-wechat
icon-social-media-amazon
icon-social-media-guilded

Spot Icons

Example

icon-spot-error-2xl
icon-spot-success-2xl

Action Icons

Example

icon-actions-clear-sm

Loading

Default (css class)

Example

Code

<span class="spinner spinner-default"></span>

Small (css class)

Example

Code

<span class="spinner spinner-sm"></span>

Add 'data-toggle="dropdown"' in the trigger element and 'data-toggle="dropdown-menu"' in the menu list
Review /js/reference/widget.js as usage reference

Example

Code

<div class="input-group-btn">
  <button type="button" class="input-dropdown-btn" data-toggle="dropdown">
    <span class="rbx-selection-label" data-bind="label">Places</span>
    <span class="icon-down-16x16"></span>
  </button>
  <ul data-toggle="dropdown-menu" class="dropdown-menu" role="menu">
    <li>
      <a href="#">Places</a>
    </li>
    <li>
      <a href="#">Clothes</a>
    </li>
    <li>
      <a href="#">Gear</a>
    </li>
    <li class="rbx-divider"></li>
    <li>
      <a href="#">+ Create New</a>
    </li>
  </ul>
</div>

Example with multiple dropdowns

Code

<div class="input-group-btn">
  <button type="button" class="input-dropdown-btn" data-toggle="dropdown">
    <span class="rbx-selection-label" data-bind="label">Places</span>
    <span class="icon-down-16x16"></span>
  </button>
  <ul data-toggle="dropdown-menu" class="dropdown-menu" role="menu">
    <li>
      <a href="#">Places</a>
    </li>
    <li>
      <a href="#">Clothes</a>
    </li>
    <li>
      <a href="#">Gear</a>
    </li>
    <li class="rbx-divider"></li>
    <li>
      <a href="#">+ Create New</a>
    </li>
  </ul>
</div>
<div class="input-group-btn">
  <button type="button" class="input-dropdown-btn" data-toggle="dropdown">
    <span class="rbx-selection-label" data-bind="label">Popular</span>
    <span class="icon-down-16x16"></span>
  </button>
  <ul data-toggle="dropdown-menu" class="dropdown-menu" role="menu">
    <li>
      <a href="#">Popular</a>
    </li>
    <li>
      <a href="#">New</a>
    </li>
    <li>
      <a href="#">Top Selling</a>
    </li>
  </ul>
</div>

Using ui bootstrap dropdown

Example

Code

<div class="input-group-btn" uib-dropdown="">
  <button type="button" uib-dropdown-toggle="" class="input-dropdown-btn">
    <span class="rbx-selection-label"></span>
    <span class="icon-down-16x16"></span>
  </button>
  <ul class="dropdown-menu" role="menu" uib-dropdown-menu="">
    <li>
      <a>Account Info</a>
    </li>
    <li>
      <a>Privacy</a>
    </li>
    <li>
      <a>Notifications</a>
    </li>
    <li>
      <a>Billing</a>
    </li>
  </ul>
</div>

Native Selection

It is used for mobile browser by taking native browser behavior at phone/tablet

Example

Code

<div class="select-group">
  <select class="select-option">
    <option>Edit</option>
    <option>+ Create New</option>
  </select>
  <span class="icon-arrow icon-down-16x16"></span>
</div>

Need to insert data-toggle as popover in the element attribute; For proper cross-browser and cross-platform behavior, recommend to use the a tag and include a tabindex attribute.

Example

Code

<a class="rbx-menu-item">
  <span class="icon-edit"></span>
</a>
<a class="rbx-menu-item" data-toggle="popover" data-bind="popover-content2">
  <span class="icon-settings"></span>
</a>
<div class="rbx-popover-content" data-toggle="popover-content2">
  <ul class="dropdown-menu" role="menu">
    <li>
      <a href="#">Setting</a>
    </li>
    <li>
      <a href="#">Privacy</a>
    </li>
  </ul>
</div>
<a class="rbx-menu-item" data-toggle="popover" data-bind="popover-content1">
  <span class="icon-more"></span>
</a>
<div class="rbx-popover-content" data-toggle="popover-content1">
  <ul class="dropdown-menu" role="menu">
    <li>
      <a href="#">Configure</a>
    </li>
    <li>
      <a href="#">Advertise</a>
    </li>
    <li>
      <a href="#">Create Badge</a>
    </li>
  </ul>
</div>

How to use?

popover-class: Custom class to be applied to the popover.
popover-append-to-body: Should the popover be appended to '$body' instead of the parent element? (default: false)
popover-placement: default: top
popover-trigger: default: click
For more details how to config popover: More details

Example - Default Configuration

Code

<div ng-controller="popoverDemoController">
  <button class="btn-primary-sm" uib-popover="" popover-placement="bottom" type="button">Dynamic Popover</button>
</div>

Example - Popover-trigger to focus and template

Code

<div ng-controller="popoverDemoController">
  <button class="btn-secondary-sm" uib-popover-template="dynamicPopover.templateUrl" popover-placement="bottom" popover-trigger="'focus'" type="button"> Popover With Template </button>
</div>

Extended from the previous popover angularjs library, add hover-popover directive to trigger popover on hover as open, leave from trigger element is close

How to set up?
1. In component module definition, inject ui.bootstrap
2. In trigger directive, add hover-popover
3. Turn off default trigger: popover-trigger=" 'none' "
4. Add manual trigger: popover-is-open="hoverPopoverParams.isOpen"
5. Setup hover-popover-params in controller. In the demo, it will be hoverPopoverDemoController.js
  1. hoverPopoverSelector is to define what range the mouse can stay once popover is open. When mouse leaves the selected area, popover will be closed. In the demo, it selects sg-hover-popver which means the whole example section will be mouse moving area.
  2. triggerSelector is to define which element will be the trigger point to open popover
hoverPopoverDirective.js is main definition for hover popover
1. "HoverPopover.EnableClose" event is to listen any special case to ask hover popover close in any customize condition
Developers need to define its own icon and context, in the demo, it is only reference.

Example

Code

<div ng-controller="hoverPopoverDemoController" class="hover-popover-demo">
  <button class="btn-secondary-sm hover-popover-trigger" uib-popover-template="dynamicPopover.templateUrl" popover-trigger=" 'none' " popover-placement="bottom" popover-is-open="hoverPopoverParams.isOpen" hover-popover-params="hoverPopoverParams" hover-popover="" type="button"> Hover Popover With Template </button>
</div>

Please view this page for modal implementation.

Notification

Highlight

Highlight new or unread items

Example

Messages 23

Friends 10k+

99+

Code

<div>
  <a href="#">Messages 
    <span class="notification-blue notification">23</span>
  </a>
</div>
<div>
  <a href="#">Friends 
    <span class="notification-blue notification">10k+</span>
  </a>
</div>
<div>
  <span class="notification-red notification">3</span>
</div>
<div>
  <span class="notification-red notification">47</span>
</div>
<div>
  <span class="notification-red notification">99+</span>
</div>

Example

Come join us at twitch.tv/roblox for the next level!

Code

<div class="alert-info">
  <h5>Come join us at for the next level!
    <a href="" class="alert-link font-bold">twitch.tv/roblox</a>
  </h5>
</div>

Message Banner

Example

No Private Server Instances Found

Code

<div class="message-banner"> No Private Server Instances Found </div>

System Feedback

Example

System Feedback: loading

System Feedback: success

Successfully Submitted

System Feedback: warning

Warning: Unusual login activity has been detected

Code

<div class="sg-system-feedback">
  <a id="toggle-alert-loading" class="text-link">System Feedback: loading</a>
  <div class="alert-system-feedback">
    <div class="alert alert-loading">Loading...</div>
  </div>
</div>
<div class="sg-system-feedback">
  <a id="toggle-alert-success" class="text-link">System Feedback: success</a>
  <div class="alert-system-feedback">
    <div class="alert alert-success">Successfully Submitted</div>
  </div>
</div>
<div class="sg-system-feedback">
  <a id="toggle-alert-warning" class="text-link">System Feedback: warning</a>
  <div class="alert-system-feedback">
    <div class="alert alert-warning">
      <span class="alert-context">Warning: Unusual login activity has been detected</span>
      <span id="close" class="icon-close-white"></span>
    </div>
  </div>
</div>

Pagination

Pagination Angular

Use cursor pagination directive and pass in a valid cursor object

Example

Code

<div class="pager-holder" cursor-pagination="{}"></div>

Status

Message Status

Usage : Chat, Private message
Mixin name : message-status($className)
Note:
1. read/unread color will override exist font color style, e.g. text-link
2. unread status has secondary color, e.g timestamp

Example

Read Message timestamp
UnRead Message timestamp

Friends has read messages

Friends has unread message

Code

<ul class="message-status-container">
  <li>
    <span class="read"> Read Message </span>
    <span class="secondary read">timestamp</span>
  </li>
  <li>
    <span class="unread"> UnRead Message </span>
    <span class="secondary unread">timestamp</span>
  </li>
</ul>
<div class="message-status-container read">
  <a href="#" class="text-link">Friends has read messages</a>
</div>
<div class="message-status-container unread">
  <a href="#" class="text-link">Friends has unread message</a>
</div>

Scroll Bar

Scroll Bar jQuery

Usage

Include jQuery and jquery.mCustomScrollbar.concat.min.js
Include jquery.mCustomScrollbar.css
Add data-toggle="scrollbar" to the wanted element, in the widget.js, "$('[data-toggle="scrollbar"]').mCustomScrollbar" will build the custom scrollbar
Review /js/Reference/widget.js as usage reference

Example

oLEFTo

Home
Profile
Message
Friends
Character
Inventory
Trade
Group
Blog
Events

Code

<div class="rbx-left-col">
  <ul>
    <li class="text-lead">oLEFTo</li>
    <li class="rbx-divider"></li>
  </ul>
  <div class="rbx-scrollbar" data-toggle="scrollbar">
    <ul>
      <li>
        <a>
          <span class="icon-nav-home"></span>
          <span>Home</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon-nav-profile"></span>
          <span>Profile</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon-nav-message"></span>
          <span>Message</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon-nav-friends"></span>
          <span>Friends</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon-nav-charactercustomizer"></span>
          <span>Character</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon-nav-inventory"></span>
          <span>Inventory</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon-nav-trade"></span>
          <span>Trade</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon-nav-group"></span>
          <span>Group</span>
        </a>
      </li>
      <li>
        <a>
          <span class="icon-nav-blog"></span>
          <span>Blog</span>
        </a>
      </li>
      <li>
        <button type="button" class="btn-secondary-sm">Update Now</button>
      </li>
      <li class="small">
        <strong>Events</strong>
      </li>
      <li>
        <a>
          <img alt="Hallows Eve 2014" src="/images/NextStyleGuide/temp/sponsorPage1.png" />
        </a>
      </li>
      <li>
        <a>
          <img alt="Roblox U" src="/images/NextStyleGuide/temp/sponsorPage2.png" />
        </a>
      </li>
    </ul>
  </div>
</div>

Table

Example

Item	Detail	Note
Lorem Ipsum	Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque in neque dui.	Fusce vitae sem egestas
Lorem Ipsum	Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque in neque dui.	Fusce vitae sem egestas
Lorem Ipsum	Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque in neque dui.	Fusce vitae sem egestas
Lorem Ipsum	Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque in neque dui.	Fusce vitae sem egestas
Lorem Ipsum	Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque in neque dui.	Fusce vitae sem egestas

Code

<table class="table table-striped">
  <thead>
    <tr>
      <th class="text-label">Item</th>
      <th class="text-label">Detail</th>
      <th class="text-label">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque i...</td>
      <td>Fusce vitae sem egestas</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque i...</td>
      <td>Fusce vitae sem egestas</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque i...</td>
      <td>Fusce vitae sem egestas</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque i...</td>
      <td>Fusce vitae sem egestas</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque i...</td>
      <td>Fusce vitae sem egestas</td>
    </tr>
  </tbody>
</table>

Tabs

Horizontal Tabs jQuery

Example

This is Text content;

This is Card content;

This is Split content;

This is List content;

Code

<div class="rbx-tabs-horizontal">
  <ul id="horizontal-tabs" class="nav nav-tabs" role="tablist">
    <li class="rbx-tab active">
      <a class="rbx-tab-heading" href="#text">
        <span class="text-lead">Text</span>
        <span class="rbx-tab-subtitle"></span>
      </a>
    </li>
    <li class="rbx-tab">
      <a class="rbx-tab-heading" href="#card">
        <span class="text-lead">Card</span>
        <span class="rbx-tab-subtitle"></span>
      </a>
    </li>
    <li class="rbx-tab">
      <a class="rbx-tab-heading" href="#split">
        <span class="text-lead">Split</span>
        <span class="rbx-tab-subtitle"></span>
      </a>
    </li>
    <li class="rbx-tab">
      <a class="rbx-tab-heading" href="#list">
        <span class="text-lead">List</span>
        <span class="rbx-tab-subtitle"></span>
      </a>
    </li>
  </ul>
  <div class="tab-content rbx-tab-content">
    <div class="tab-pane active" id="text"> This is Text content;</div>
    <div class="tab-pane" id="card"> This is Card content; </div>
    <div class="tab-pane" id="split"> This is Split content; </div>
    <div class="tab-pane" id="list"> This is List content; </div>
  </div>
</div>

Vertical Tabs jQuery

This example only has vertical tab style

Example

This is heads content;

This is faces content;

This is gear content;

This is hats content;

This is T-Shirts content;

This is shirts content;

This is pants content;

Code

<div class="rbx-tabs-vertical">
  <ul id="vertical-tabs" class="nav nav-tabs nav-stacked rbx-tabs-vertical" role="tablist">
    <li class="rbx-tab active">
      <a class="rbx-tab-heading" href="#heads">
        <span class="text-lead">Heads</span>
        <span class="rbx-tab-subtitle"></span>
      </a>
    </li>
    <li class="rbx-tab">
      <a class="rbx-tab-heading" href="#faces">
        <span class="text-lead">Faces</span>
        <span class="rbx-tab-subtitle"></span>
      </a>
    </li>
    <li class="rbx-tab">
      <a class="rbx-tab-heading" href="#gear">
        <span class="text-lead">Gear</span>
        <span class="rbx-tab-subtitle"></span>
      </a>
    </li>
    <li class="rbx-tab">
      <a class="rbx-tab-heading" href="#hats">
        <span class="text-lead">Hats</span>
        <span class="rbx-tab-subtitle"></span>
      </a>
    </li>
    <li class="rbx-tab">
      <a class="rbx-tab-heading" href="#tShirts">
        <span class="text-lead">T-Shirts</span>
        <span class="rbx-tab-subtitle"></span>
      </a>
    </li>
    <li class="rbx-tab">
      <a class="rbx-tab-heading" href="#shirts">
        <span class="text-lead">Shirts</span>
        <span class="rbx-tab-subtitle"></span>
      </a>
    </li>
    <li class="rbx-tab">
      <a class="rbx-tab-heading" href="#pants">
        <span class="text-lead">Pants</span>
        <span class="rbx-tab-subtitle"></span>
      </a>
    </li>
  </ul>
  <div class="tab-content rbx-tab-content">
    <div class="tab-pane active" id="heads"> This is heads content;</div>
    <div class="tab-pane" id="faces"> This is faces content; </div>
    <div class="tab-pane" id="gear"> This is gear content;</div>
    <div class="tab-pane" id="hats"> This is hats content; </div>
    <div class="tab-pane" id="tShirts"> This is T-Shirts content;</div>
    <div class="tab-pane" id="shirts"> This is shirts content; </div>
    <div class="tab-pane" id="pants"> This is pants content; </div>
  </div>
</div>

This example only has vertical tab style

Example

Code

<div class="menu-vertical-container">
  <ul id="vertical-menu" class="menu-vertical submenus">
    <li class="menu-option active">
      <a class="menu-option-content" href="#heads">
        <span class="menu-text">Clothes</span>
        <span class="icon-right-16x16"></span>
      </a>
      <div class="menu-secondary-container">
        <ul class="menu-secondary">
          <li class="menu-secondary-option">
            <span class="menu-text">Hats</span>
          </li>
          <li class="menu-secondary-option">
            <span class="menu-text">T-Shirts</span>
          </li>
          <li class="menu-secondary-option">
            <span class="menu-text">Shirts</span>
          </li>
          <li class="menu-secondary-option">
            <span class="menu-text">Pants</span>
          </li>
          <li class="menu-secondary-option">
            <span class="menu-text">Packages</span>
          </li>
        </ul>
      </div>
    </li>
    <li class="menu-option">
      <a class="menu-option-content" href="#faces">
        <span class="menu-text">Body Parts</span>
        <span class="icon-right-16x16"></span>
      </a>
      <div class="menu-secondary-container">
        <ul class="menu-secondary">
          <li class="menu-secondary-option">
            <span class="menu-text">Hats</span>
          </li>
          <li class="menu-secondary-option">
            <span class="menu-text">T-Shirts</span>
          </li>
          <li class="menu-secondary-option">
            <span class="menu-text">Shirts</span>
          </li>
          <li class="menu-secondary-option">
            <span class="menu-text">Pants</span>
          </li>
          <li class="menu-secondary-option">
            <span class="menu-text">Packages</span>
          </li>
        </ul>
      </div>
    </li>
    <li class="menu-option">
      <a class="menu-option-content" href="#gear">
        <span class="menu-text">Gear</span>
      </a>
    </li>
  </ul>
</div>

Image and Thumbnail

Game Icon/Item

1:1

Example

Code

<div class="row">
  <div class="col-xs-6 col-sm-4 col-lg-3">
    <img src="https://images.rbxcdn.com/16816fe6bf01abe1fec12aa0e42d17b0.png" alt="game/item card 50 x 50" class="asset-card-sm" />
  </div>
  <div class="col-xs-6 col-sm-4 col-lg-3">
    <img src="https://images.rbxcdn.com/16816fe6bf01abe1fec12aa0e42d17b0.png" alt="game/item card 150 x 150" class="asset-card" />
  </div>
  <div class="col-xs-6">
    <img src="https://images.rbxcdn.com/16816fe6bf01abe1fec12aa0e42d17b0.png" alt="game/item card 420 x 420" class="asset-cover" />
  </div>
</div>

Avatar

Headshot

Example

Code

<img src="https://images.rbxcdn.com/16816fe6bf01abe1fec12aa0e42d17b0.png" alt="Avatar Headshot 48 x 48" class="avatar-headshot-sm" />

Code

<img src="https://images.rbxcdn.com/16816fe6bf01abe1fec12aa0e42d17b0.png" alt="Avatar Headshot 60 x 60" class="avatar-headshot-md" />

Code

<img src="https://images.rbxcdn.com/16816fe6bf01abe1fec12aa0e42d17b0.png" alt="Avatar Headshot 150 x 150" class="avatar-headshot-lg" />

Full body

Example

Code

<img src="https://images.rbxcdn.com/16816fe6bf01abe1fec12aa0e42d17b0.png" alt="Avatar Full body 100 x 100" class="avatar-fullbody-sm" />

Code

<img src="https://images.rbxcdn.com/16816fe6bf01abe1fec12aa0e42d17b0.png" alt="Avatar Full body 352 x 352" class="avatar-fullbody-lg" />

Game Thumbnail

Example

Code

<img src="https://images.rbxcdn.com/16816fe6bf01abe1fec12aa0e42d17b0.png" alt="Game Thumbnail 640 x 360" class="game-thumbnail-lg" />

Placeholder

Game Icon Placeholder

Example

Code

<span class="icon-placeholder-game"></span>

Asset Icon Placeholder

Example

Code

<span class="icon-placeholder-asset"></span>

Avatar Headshot Icon Placeholder

Example

Code

<span class="icon-placeholder-avatar-headshot"></span>

Avatar Fullbody Icon Placeholder

Example

Code

<span class="icon-placeholder-avatar-fullbody"></span>

Need to insert data-toggle as tooltip in the element attribute

Example

Code

<span class="tooltip-container" data-toggle="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
  <span class="icon-moreinfo"></span>
</span>

Typing

Example

Code

<span class="typing"></span>

Typography

HCo Gotham SSm | Check new Reference Page

Transition table

H1, H2 = Title
H3, H4 = Header 1
H5, H6 = Header 2

Example

Page Header

Username/Group Name Header/Game Detail Header

Section and Form Header

Content Title within Container

Popup Header

Code

<h1>Page Header</h1>
<h2>Username/Group Name Header/Game Detail Header</h2>
<h3>Section and Form Header</h3>
<h4>Content Title within Container</h4>
<h5>Popup Header</h5>

Body

Transition table

default = Body
font-bold = Header 2
small, small-oneline = Caption Body
xsmall, xxsmall = Footer

Example

Default Text, Card Title, Dropdown Menu: Work at a Pizza Place

Card Description (Single line): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis leo ac orci ornare sagittis.

Card Description (Multiple lines): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate facilisis consectetur. Nunc lacinia leo a velit porta, in vulputate velit viverra. Fusce pretium mattis orci sed facilisis. Suspendisse vitae ultricies quam. Praesent euismod nisl tempor velit consectetur, eget scelerisque dolor fermentum.

12px/400/gray1

10px/400/gray1

Bold

Keep spaces and line-breaks, with 'Source Sans Pro' font and 0 margin:Lorem     ipsum     dolor sit amet, consectetur adipiscing elit. Praesent vulputate facilisis consectetur. Nunc lacinia leo a velit porta, in vulputate velit viverra. Fusce pretium mattis orci sed facilisis. Suspendisse vitae ultricies quam. Praesent euismod nisl tempor velit consectetur, eget scelerisque dolor fermentum.

Code

<div>Default Text, Card Title, Dropdown Menu: Work at a Pizza Place</div>
<div class="small-oneline text">Card Description (Single line): Lorem ipsum dolor sit amet, consectetur adipisci...</div>
<p class="small text">Card Description (Multiple lines): Lorem ipsum dolor sit amet, consectetur adipi...</p>
<div class="xsmall text">12px/400/gray1</div>
<div class="xxsmall text">10px/400/gray1</div>
<div class="font-bold">Bold</div>
<pre>Keep spaces and line-breaks, with 'Source Sans Pro' font and 0 margin:Lorem ipsu...</pre>

More Specific Use Case

Transition table

text-robux-lg, text-subject = Header 1
text-name, text-link, text-link-secondary, text-lead, text-warning, text-footer-nav(Privacy), text-label = Header 2
text-footer-nav(except Privacy) = SubHeader 2
text-description, text-favorite, text-robux, text-roblox = Body
text-pastname, text-report-ads, text-report, text-error = Caption Header
text-secondary, text-date-hint, ad-identification-text, text-tooltips = Caption Body
text-footer = Footer

Example

Item description, my feed, commentary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate facilisis consectetur. Nunc lacinia leo a velit porta, in vulputate velit viverra. Fusce pretium mattis orci sed facilisis. Suspendisse vitae ultricies quam. Praesent euismod nisl tempor velit consectetur, eget scelerisque dolor fermentum.

Username, Group Name (name in card does not apply): OnlyTwentyCharacters

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate facilisis consectetur. Nunc lacinia leo a velit porta, in vulputate velit viverra. Fusce pretium mattis orci sed facilisis. Suspendisse vitae ultricies quam. Secondary Text Link praesent euismod nisl tempor velit consectetur, eget scelerisque dolor fermentum.

Card Secondary Text: 1,028 Playing

Past Usernames

Popup Header, Tab, Statistic Text: Purchase Item / 9,999 / 10k / 10k+ / 999k

Text Label, Form Label: Description

Report Textlink for Ads: report

Expires on 9/25/2020

Report Textlink

Error Message: Username cannot be longer than 20 characters

Date and Time, Hint Text

Footer Nav

Footer Text

Currency Robux: 99,999

Favorite: 99,999

Tooltips

Currency: Robux on Detail page

message subject

Advertisment

roblox

Code

<div class="text-description"> Item description, my feed, commentary: Lorem ipsum dolor sit amet, consectetur ...</div>
<div>
  <a class="text-name">Username, Group Name (name in card does not apply): OnlyTwentyCharacters</a>
</div>
<div>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate fac...
    <a class="text-link">Fusce pretium mattis</a>
    <a class="text-link-secondary">Secondary Text Link</a>
  </p>
</div>
<div class="text-secondary">Card Secondary Text: 1,028 Playing</div>
<div class="text-pastname">Past Usernames</div>
<div class="text-lead">Popup Header, Tab, Statistic Text: Purchase Item / 9,999 / 10k / 10k+ / 999k</div>
<div class="text-label">Text Label, Form Label: Description</div>
<div>
  <a class="text-report-ads">Report Textlink for Ads: report</a>
</div>
<div class="text-warning">Expires on 9/25/2020</div>
<div>
  <a class="text-report">Report Textlink</a>
</div>
<div class="text-error">Error Message: Username cannot be longer than 20 characters</div>
<div class="text-date-hint">Date and Time, Hint Text</div>
<div class="text-footer-nav"> Footer Nav</div>
<div class="text-footer">Footer Text</div>
<div class="text-robux">Currency Robux: 99,999</div>
<div class="text-favorite">Favorite: 99,999</div>
<div class="text-tooltips">Tooltips</div>
<div class="text-robux-lg">Currency: Robux on Detail page</div>
<div class="text-subject">message subject</div>
<div class="ad-identification-text">Advertisment</div>
<div class="text-roblox">roblox</div>

Long Text Treatment

Single Line

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Code

<h1 class="text-overflow" style="width: 400px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>

Multiple line

using mixin: get-multi-lines($className, $lineHeight, $lineCount, $bgColor)

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, laoreet malesuada risus. Donec tempor aliquam eros, vel vehicula diam pretium in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, laoreet malesuada risus. Donec tempor aliquam eros, vel vehicula diam pretium in. Etiam hendrerit, dui quis suscipit auctor, ipsum ante aliquet magna, ut volutpat libero diam nec nisi. Nam sodales sapien at iaculis tincidunt. In bibendum non eros sit amet consectetur. Aenean facilisis erat tortor, hendrerit feugiat turpis egestas id. Vestibulum fermentum quam vitae pellentesque malesuada. Integer at dictum est. Suspendisse sit amet tincidunt ante. Morbi euismod neque sit amet lectus lobortis hendrerit. Phasellus at mauris id ex ultrices lacinia. Fusce pretium, orci eget lobortis faucibus, turpis dui ultrices est, sit amet eleifend lorem ipsum et nisi. Praesent in urna a tortor posuere mollis sed quis tellus.

Code

<p class="multiple-lines"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, l...</p>
<p class="multiple-lines"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, l...</p>

Multiple lines with Toggle button

Truncate file if the file have more than 5 lines.

Dynamic Ellipsis

Example

Jan 29, 2018

11:40am

Code

<div class="dynamic-overflow-container no-wrap">
  <div class="dynamic-ellipsis-item"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, l...</div>
  <div class="dynamic-width-item">Jan 29, 2018</div>
</div>
<div class="dynamic-overflow-container no-wrap">
  <div class="dynamic-ellipsis-item"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, l...</div>
  <div class="dynamic-width-item">11:40am</div>
</div>

Display Utilities

Cursor

Mouse hover on the html element will be pointer

Example

Cursor hover

Code

<span class="cursor-pointer">Cursor hover</span>

Invisible

Give html element visibility: hidden

Example

Where are you? I am here :P

Code

<span>Where are you? </span>
<span class="invisible">I am here :P</span>

Introduction

How to use?

Breadcrumb

Buttons

Width

Call to Action Buttons

Growth Buttons

Secondary Action Buttons

Control + Configure Buttons

Alert Buttons

Icon Buttons

Buy Buttons

Toggle

Cards

Game Store Cards

Owned

Owned

Extra Large Game Tile

Extra Large Game Tile

Extra Large Game Tile With Instant Play

Extra Large Game Tile

Game Cards 150x150

Game Cards 126x126

Extra Large Item Tile

Extra Large Item Tile

Feature Item Cards

Feature Cards/List view in Mobile

Item Cards - 7 recommend items

7 per each row for recommend items

Item Cards - 6 recommend items

6 per each row for inventory/favorite tab content

Avatar Headshot Cards

Avatar Card without box shadow

Avatar FullBody

Avatar FullBody

Avatar Cards

Carousels

Group and Game

Group Name

Group Name

Sliding Carousel

Colors

Gray

Blue

Green

Red

Orange

Shadow

Themes

Container

Section

header title

Container List

header title

Single

Double

Stacked

Container-empty

Section Content off

Form Control

Basic form

Validation states

Search

Search with dropdown

Number Input

Slider

Angular Slider

Radio

Radio pills

Checkbox

File Upload

Iconography

Generic

Navigation Icons

Common Regular

Common Small

Games

Social

Abuse Report

Branded