Example

Buttons

Width

Play, Buy Robux, Upgrade

Example






Call to Action Buttons

Action button

Example


Growth Buttons

Play, Buy Robux, Upgrade

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

Example


Secondary Action Buttons

Trade, See all, Create New

Example


Control + Configure Buttons

Edit, Share, Save, Cancel

Example


Alert Buttons

Trade, See all, Create New

Example


Icon Buttons

Example
Play button
Purchase game button

Buy Buttons

Used in game datails page for purchase game pass

Example


Toggle

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

Example

Cards

Game Store Cards

Background color for items is $gray-4

Example
  • PItem 150 x 150
    Fit Around 18 Letters
    999,999,999
  • Item 150 x 150
    Fit Around 18 Letters
    999,999,999
  • Item 150 x 150
    Fit Around 18 Letters
    Free
  • Item 150 x 150
    Fit Around 18 Letters
    Free

Extra Large Game Tile

480x270(Desktop), 294x166(Mobile)

Example

Extra Large Game Tile

50% 0

Extra Large Game Tile With Instant Play

With Play button (hover)

Example

Extra Large Game Tile

20% 3,000

Game Cards 150x150

150x150 is used for games page

Game Cards 126x126

126x126 is used for game detail page

Extra Large Item Tile

480x270(Desktop), 294x166(Mobile)

Example

Extra Large Item Tile

5000

Feature Item Cards

Feature Cards/List view in Mobile

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

Example

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

Avatar Card without box shadow

It is used when avatar without link to profile page

Example

Avatar FullBody

Avatar FullBody
Example

Avatar Cards

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

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
Example

Colors

Gray

Example
Gray 1 #191919
Gray 2 #757575
Gray 3 #B8B8B8
Gray 4 #E3E3E3
Gray 5 #F2F2F2
background #F5F5F5
White #fff

Blue

Example
Blue Primary #00A2FF
Blue Hover #32B5FF
Blue Pressed #0074BD
Blue Disabled #99DAFF

Green

Example
Green Primary #02B757
Green Hover #3FC679
Green Pressed #108237
Green Disabled #A3E2BD

Red

Example
Red Primary #E2231A
Red Negative #D86868
Red Hover #AC1E2D
Red Pressed #E27676

Orange

Example
Orange Warning #F68802
Orange Favorite #F6B702

Shadow

Example
Shadow Primary rgba(25,25,25,0.3)
Shadow Hover rgba(25,25,25,0.75)

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

Container

Section

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

Example

header title

See All
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.

Container List

Example

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

header title

See All

Single

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.

Double

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.

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.

Container-empty

Empty container, individual window with default message

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.

Section Content off

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

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.

Form Control

Basic form

Example

Validation states

Example

Username: 3-20 characters, no spaces

Please check email format

Example

Search with dropdown

Example

Number Input

Example

Slider

Example

Angular Slider

For the new angular slider please visit this page.

Radio

Example

Radio pills

Example

Checkbox

Example

File Upload

This example is using the fileUpload widget in CoreUI

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

You can set the following properties on fileUploadInfo

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

Access the following properties on fileUploadInfo

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

Example
Example: Full Screen

Iconography

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

Generic

Example
Example

Common Regular

Example

Common Small

Example

Games

Example

Social

Example

Abuse Report

Example

Branded

Example

BC

Example

Labels

Example

Negative

Example

Placeholder

Example

Placeholde Game thumbnails

Example

Thumbnail Validation Status

Example

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

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

facebook

Example
Example
Example

Loading

Default (css class)

Example

Small (css class)

Example

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

Example
Example with multiple dropdowns

Using ui bootstrap dropdown

Native Selection

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

Example

Popover

Popover jQuery

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.

Popover AngularJS

How to use?

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

Example - Default Configuration
Example - Popover-trigger to focus and template

Hover Popover AngularJS

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

  1. 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
  2. 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
  3. Developers need to define its own icon and context, in the demo, it is only reference.

Example

Modal

Please view this page for modal implementation.

Notification

Highlight

Highlight new or unread items

Example

Site Wide Banner

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

Message Banner

Example
No VIP Server Instances Found

System Feedback

Example

Pagination

Pagination jQuery

  1. Include jQuery Pagination plugin
  2. Add 'data-toggle="pagination"' in the parent elemnt
  3. Review /js/Reference/widget.js as usage reference

Example

    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

    Scroll Bar

    Scroll Bar jQuery

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

    Example

    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

    Tabs

    Horizontal Tabs jQuery

    Example
    This is Text content;
    This is Card content;
    This is Split content;
    This is List content;

    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;

    Vertical Menu

    This example only has vertical tab style

    Example

    Image and Thumbnail

    Game Icon/Item

    1:1

    Example
    game/item card 50 x 50
    game/item card 150 x 150
    game/item card 420 x 420

    Avatar

    Headshot

    Example
    Avatar Headshot 48 x 48
    Avatar Headshot 60 x 60
    Avatar Headshot 150 x 150

    Full body

    Example
    Avatar Full body 100 x 100
    Avatar Full body 352 x 352

    Game Thumbnail

    Example
    Game Thumbnail 640 x 360

    Placeholder

    Game Icon Placeholder

    Example

    Asset Icon Placeholder

    Example

    Avatar Headshot Icon Placeholder

    Example

    Avatar Fullbody Icon Placeholder

    Example

    Tooltip

    Tooltip jQuery

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

    Example

    Typing

    Typing

    Example

    Typography

    HCo Gotham SSm | Check new Reference Page

    Transition table

    Example

    Page Header

    Username/Group Name Header/Game Detail Header

    Section and Form Header

    Content Title within Container

    Popup Header

    Body

    Transition table

    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.

    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.

    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
    Expires on 9/25/2020
    Error Message: Username cannot be longer than 20 characters
    Date and Time, Hint Text
    Currency Robux: 99,999
    Favorite: 99,999
    Tooltips
    Currency: Robux on Detail page
    message subject
    Advertisment
    roblox

    Long Text Treatment

    Single Line

    Example

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    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.

    Multiple lines with Toggle button

    Truncate file if the file have more than 5 lines.

    Read more as link text

    Include "para-overflow-page-loading" class in your paragraph. (It's being hidden by JS)
    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. 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. Read More

    Read more for item and game pass description (text link on desktop, button on mobile)

    Include "content-overflow-page-loading" class in your paragraph. (It's being hidden by JS)
    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. 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. Read More

    Dynamic Ellipsis

    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. Etiam hendrerit, dui quis suscipit auctor
    Jan 29, 2018
    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
    11:40am

    Display Utilities

    Cursor

    Mouse hover on the html element will be pointer

    Example
    Cursor hover

    Invisible

    Give html element visibility: hidden

    Example
    Where are you?