GSmGpE6CwX2y9JjB25B8
We use cookies on this site to enhance your user experience

Content Stack Style Guide

Content Stack Style Guide

Unique Classes

List-Indent

  • Class that applies an indentation to an element, such as a div, table, or image. Ex: div class = "list-indent"

Images

Half-Size

  • Makes that specific image half sized. Use as an img class. Ex: img src="..." class="img-fluid half-sized"
  • List item

Lightbox/Modal Images

  • Turns that image into a modal at full resolution. Apply as an image class.

Image with Caption

Keep this ideally to 70 characters or less
<figure class="figure">
<img src="https://via.placeholder.com/450x250">
<figcaption class="figure-caption text-center">Keep this ideally to 70 characters or less</figcaption>
</figure>

2 Image Side by Side, no caption

<div class = "container">
<div class="row">
<div class="col-6"><!--start of left image-->
<figure class="figure">
<img src="https://via.placeholder.com/450x250" class="img-fluid">
</figure>
</div>
<div class="col-6"><!--start of right image-->
<figure class="figure">
<img src="https://via.placeholder.com/450x250" class="img-fluid">
</div>
</div>
</div>

2 Images with Single Caption

Keep this ideally to 70 characters or less
<div class = "container">
<figure class="figure">
<div class="row">
<div class="col-6"><!--Start of left image-->
<img src="https://via.placeholder.com/450x250" class ="img-fluid">
</div>
<div class="col-6"><!--Start of right image-->
<img src="https://via.placeholder.com/450x250" class ="img-fluid">
</div>
</div>
<figcaption class="figure-caption text-center"> <!--caption for all images-->
Keep this ideally to 70 characters or less
</figcaption>
</figure>
</div>

2 Images with Caption for Each

  • If possible, keep each captions character count to less than 70
Keep this ideally to 70 characters or less
Keep this ideally to 70 characters or less
<div class = "container">
<div class="row">
<div class="col-6"><!--start of left image-->
<figure class="figure">
<img src="https://via.placeholder.com/450x250" class="img-fluid">
<figcaption class="figure-caption text-center">Keep this ideally to 70 characters or less</figcaption>
</figure>
</div>
<div class="col-6"><!--start of right image-->
<figure class="figure">
<img src="https://via.placeholder.com/450x250" class="img-fluid">
<figcaption class="figure-caption text-center">Keep this ideally to 70 characters or less</figcaption>
</figure>
</div>
</div>
</div>

3 Images with Caption

Text
Text
Text
<div class="container">
<div class="row">
<div class="col-3 mr-4 px-0">
<figure class="figure">
<img src="https://via.placeholder.com/400x400" class="img-fluid mt-2 mb-2">
<figcaption class="figure-caption text-center">Text</figcaption>
</figure>
</div>
<div class="col-3 mx-4 px-0">
<figure class="figure">
<img src="https://via.placeholder.com/400x400" class="img-fluid mt-2 mb-2">
<figcaption class="figure-caption text-center">Text</figcaption>
</figure>
</div>
<div class="col-3 ml-4 px-0">
<figure class="figure">
<img src="https://via.placeholder.com/400x400" class="img-fluid mt-2 mb-2">
<figcaption class="figure-caption text-center">Text</figcaption>
</figure>
</div>
</div>
</div>

Image with Side Content

Used on the [Game Icons][2] page.

Title Text

Use this as an alternative to describe visual content or best/discouraged practices.
<div class="row">
<div class="col-2 mr-2 mb-2 px-0">
<img src="https://via.placeholder.com/400x400" class="img-fluid mt-2 mb-1">
</div>
<div class="col-9 py-2">
<h4 class="mb-1">Title Text</h4>
Use this as an alternative to describe visual content or best/discouraged practices. 
</div>
</div>

Card Styles

Card Types:

  • Success (Green) - Optional content. A user should not need to read this to fully understand a lesson.
  • Danger (Red) - Troubleshooting, extreme warnings. Indicates that if you don’t follow this step, you will encounter serious problems (code will break, etc). Should be used very rarely if possible; exercise restraint.
  • Warning (Yellow) - Minor troubleshooting, reminders
  • OptionalChallenge (Purple) - Used for optional code challenges.

Unique Icons

Explorer Add Icon

To add some object, hover over the parent object and click the button.

<img src="/assets/5b47cd50cbdac88b0b7f397a/Explorer-Plus-Icon.png" class="d-inline my-0 align-text-bottom" width=22>

Robux Icon – Main Text

This is a Robux icon in main running text, as in 100.

<img src="/assets/5ca3c61b49324e0c3a991823/Robux-Icon.png" class="d-inline my-0 align-text-bottom" width=26>100

Robux Icon – Table Cell

Item Cost
Item1 100
<td scope="row"><img src="/assets/5cb53f66869b38322286af03/Robux-Icon-Small.png" class="d-inline my-0 align-text-bottom" width=20>100</td>