Synapse

Synapse is Algorithmia's UX toolkit. Its components are designed to be composable, portable, generic (in the non-opinionated sense of the term), allowing you to use them across any web property, be it HubSpot or the Algorithmia website.

Most of all, Synapse is a means to building interfaces that our customers love. As such it is a constant work in progress, and we hope you'll engage and offer feedback on ways you think it can be improved (or perhaps even contribute some code).

Goals

Intuitive

Bridge the gap between current knowledge and target knowledge.

(Conventional, contextual, ergonomic, usable, simple)

Unified

The system should unify the UX and be scalable across platforms, devices, and enterprises.

(Consistent, scalable)

Customizable

Provide a flexible foundation for innovation and brand expression across organizations.

(Flexible, dynamic)

Lovable

Express your personality and intentionally elicit delightful emotions.

(Emotional, personality, relatable, enjoyable)

Logos

Logo Purple

Logo Black

Logo White

Icon Purple

Icon Black

Icon White

Icon+Logo Purple

Icon+Logo Black

Icon+Logo White

Typography

Nunito Sans is used for display and body copy. Roboto Mono is used for monospaced text. For typography modifiers, see our typography utilities.

h1: Demi-Bold 28

The quick brown fox jumps over the lazy dog.

h2: Demi-Bold 24

The quick brown fox jumps over the lazy dog.

h3: Demi-Bold 20

The quick brown fox jumps over the lazy dog.

h4: Demi-Bold 18

The quick brown fox jumps over the lazy dog.

h5: Demi-Bold 16

The quick brown fox jumps over the lazy dog.

h6: Demi-Bold 14

The quick brown fox jumps over the lazy dog.

p: Regular 16

The quick brown fox jumps over the lazy dog.

label: Medium 10 CAPS

Code: Regular 14 Monospace Gray BG

The quick brown fox jumps over the lazy dog.

Color

Text

Black

rgba(0,0,0,0.87)

Black-Secondary

rgba(0,0,0,0.6)

Black-Tertiary

rgba(0,0,0,0.38)

Backgrounds

Gray-Dark

#E0E0E0

Gray

#F5F5F5

Gray-Light

#FAFAFA

Functional

Danger

#CB2431

Warning

#FFA000

Success

#4CAF50

Neutral

#1A73E8

Border

rgba(0,0,0,0.12)

Brand

Purple

#483366

Light Purple

#6B547B

Teal

#8DB1B4

Coral

#FC6E65

Gold

#BBB08B

Slate Blue

#535261

Grid

Standard 12 column grid with 32px gutters.

.syn-col-md-4
.syn-col-md-4
.syn-col-md-4
.syn-col-md-4
.syn-col-md-4.syn-col-offset-md-4
.syn-col-md-2
.syn-col-md-4.syn-col-offset-md-4
.syn-col-md-6
.syn-col-md-6
.syn-col-md-2
.syn-col-md-3
.syn-col-md-7
.syn-col-md-12

Buttons

Our .syn-btn class contains modifiers to change the size, styling, and coloration of buttons. We've included primary, secondary, accent, danger, and light color themes. Buttons can be either contained (solid background, raised appearance), outlined, or text-only (with a shaded background on hover).

Primary

Toggle Code Sample

Secondary

Toggle Code Sample

Accent

Toggle Code Sample

Danger

Toggle Code Sample

Light

Toggle Code Sample

Disabled (All)

Toggle Code Sample

Button with Icons

Toggle Code Sample

Icon-only Buttons

Toggle Code Sample

Large Button

Toggle Code Sample

Dropdowns

Synapse dropdowns can open to show either a list of links, or a card with a short paragraph. Apply the .open class to show the dropdown content. Adding the .top or .right modifiers will reposition from the default bottom-left positioning, and responsive position modifiers (.top-md, etc) are included for changing position on different screen sizes.

Dropdown With Card

Help
Here is some help text about the thing. It is very helpful.

Default-positioned Dropdown

Right-positioned Dropdown

Top-positioned Dropdown

Help
Here is some help text about the thing. It is very helpful.

Forms and Inputs

Each section of a Synapse form should be contained within a .syn-form-group. For inputs with attached buttons or text, use the .syn-input-group class within the form group, and for checkbox and radio inputs, use .syn-form-check.

Text Input

Amount:
Credits

Text Area

Select

Checkbox

Radio

Modal

Create an algorithm

/

algo://jhoover/algorithm_name

Image

Language

Language

Language

Language

Language

Language

Language

Language

Properties

Permissions

Toasts

The .syn-toast component shows a brief message to the user. Toggle toast visibility with the .shown class. Add the .theme-danger modifier to create a danger message.
Note: This is a toast!
Warning: This is a danger toast!
<!-- Button to toggle toast -->
<button class="syn-btn contained theme-primary" onclick="document.querySelector('#demo-toast-new').classList.toggle('shown')">
  Show Toast
</button>
<!-- Toast -->
<div id="demo-toast-new" class="syn-toast">
  <div class="syn-body-1 syn-mb-0"><b>Note:</b> This is a toast!</div>
</div>
<!-- Button to toggle toast -->
<button class="syn-btn contained theme-primary" onclick="document.querySelector('#demo-toast-danger').classList.toggle('shown')">
  Show Danger Toast
</button>
<!-- Toast -->
<div id="demo-toast-danger" class="syn-toast theme-danger">
  <div class="syn-body-1 syn-mb-0"><b>Warning:</b> This is a danger toast!</div>
</div>

Banner

The .syn-banner component is designed to display important notifications for the user. By default, it only has a bottom border, but a full border can be added using the .full-border modifier.
Default Banner
Banner Message: here is a message for the user.
Full Border Banner
Banner Message: here is a message for the user.
<div class="syn-banner">
  <!-- Flex utilities used to format banner content -->
  <div class="syn-flex align-center direction-column-sm align-stretch-sm syn-mh-24 syn-mh-sm-0">
    <div class="flex-item-grow syn-body-1 syn-mb-0 syn-mr-48 syn-ml-16 syn-mh-sm-0 syn-mb-sm-24">
      <!-- Banner Message -->
    </div>
    <div class="flex-item-no-shrink syn-flex-sm justify-end-sm">
      <button class="syn-btn outlined theme-primary syn-mr-16"><!-- Banner Button --></button>
    </div>
  </div>
</div>

<div class="syn-banner full-border">
  <!-- Flex utilities used to format banner content -->
  <div class="syn-flex align-center direction-column-sm align-stretch-sm syn-mh-24 syn-mh-sm-0">
    <div class="flex-item-grow syn-body-1 syn-mb-0 syn-mr-48 syn-ml-16 syn-mh-sm-0 syn-mb-sm-24">
      <!-- Banner Message -->
    </div>
    <div class="flex-item-no-shrink syn-flex-sm justify-end-sm">
      <button class="syn-btn outlined theme-primary syn-mr-16"><!-- Banner Button --></button>
    </div>
  </div>
</div>

Alerts

<div class="syn-alert" role="alert">
  <!-- Alert Content -->
</div>
<div class="syn-alert theme-primary" role="alert">
  <!-- Alert Content -->
</div>
<div class="syn-alert theme-warning" role="alert">
  <!-- Alert Content -->
</div>
<div class="syn-alert theme-danger" role="alert">
  <!-- Alert Content -->
</div>

Progress Bar

Large

Medium

Small

Icons

Icons

Page Icons

Light

Dark

Category Icons

12

40

User Images

16

40

56

Breadcrumbs

Badges & Tags

Badges

Private Enterprise 7 101 Primary Secondary Accent
Light
Danger

Tags

Tag You're It

Count

1 9+ 100

Cards

Cards are created by applying the .syn-card class to a div, and provide a brief overview of a topic. They can be modified to remove shadows by applying the .outlined class, or to appear clickable using the .actionable class. For a collection of cards of the same height, use the .full-height class on cards in separate columns of the same row, as demonstrated below.

Basic Cards

Default Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Outlined Card

Some quick example text to build on the card title and make up the bulk of the card's content.

sample image
Card With Image
Image starts 16px from card top, fills width of card, and has a set height.

Actionable and Active Cards

Actionable Card

Keep the copy short on actionable cards.

Outlined Actionable Card

Keep the copy short on actionable cards.

Outlined Active Card

Keep the copy short on actionable cards.

Default Active Card

Keep the copy short on actionable cards.

Full height row

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card w/ Image

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Short text. I use full-height to grow the full height of my column. Btns stay on bottom.

Lists

Lists are a continuous group of items, typically algorithms. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

Card Lists

Card lists can layout a group of cards in a dynamic way. They're useful for displaying groups of disparate items, such as categories.

Default Card List
  1. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

  2. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

  3. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

  4. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

  5. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

Four Per Row List
  1. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

  2. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

  3. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

  4. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

  5. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

  6. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

  7. Outlined Card

    Some quick example text to build on the card title and make up the bulk of the card's content.

Standard Lists

Standard lists are great for displaying lists of similar items, such as algorithms or files. They come in two flavors: regular and condensed.

  1. Owner

     / 

    Market Display

    Enterprise

    Brief description of the algorithm

    Updated Jun 02
    100cr
  2. Basic Display

    Private

    Brief description of the algorithm

    Username Updated Jun 02
  3. At the dawn of time, there was an excessively long title that simply would not end, not ever, no way, in fact it just kept going on and on and on... Private

    cheese private add major fur whose service research inside hit pain shade through nature iron stone quiet discussion needed visitor just musical our wall bus balance art fear adventure get try pride elephant enough minerals brave circus deer anywhere hunt famous unless gentle camera notice ten happened rest

    my_oidc_username_shouldnt_be_this_long Updated Jun 02
  4. Condensed List

    data://username/collection/filename.jpg

    Username Updated Jun 02

Small Lists

For sidebars, outlines, or other cases when you do not need a full-page list. Includes a tiered option for better outline structure.

Default Small List
  • Introduction
  • Installation Instructions
  • Sample I/O
  • Known Bugs
  • Contributors
Tiered Small List
  • Introduction
  • Installation Instructions
    • Linux
    • Mac
    • Windows
  • Sample I/O
  • Known Bugs
  • Contributors
Bordered Small List
  • Introduction
  • Installation Instructions
  • Sample I/O
  • Known Bugs
  • Contributors

Tables

Default Table
Toggle Code Sample
Date (UTC) Algorithm Calls Billed Calls Billed Time (Seconds) Cost (Credits)
11/30/2018 deeplearning/ColorfulImageColorization/1.1.13 1 1 17 29
11/29/2018 util/SmartImageDownloader/0.2.18 1 1 34 67
11/28/2018 util/SmartImageDownloader/0.2.18 1 1 29 94
Full-Border Table
Toggle Code Sample
Date (UTC) Algorithm Calls Billed Calls Billed Time (Seconds) Cost (Credits)
11/30/2018 deeplearning/ColorfulImageColorization/1.1.13 1 1 17 29
11/29/2018 util/SmartImageDownloader/0.2.18 1 1 34 67
11/28/2018 util/SmartImageDownloader/0.2.18 1 1 29 94
Actionable Table
Toggle Code Sample
Fixed Layout Table
Toggle Code Sample
Date (UTC) Algorithm Calls Billed Calls Billed Time (Seconds) Cost (Credits)
11/30/2018 deeplearning/ColorfulImageColorization/1.1.13 1 1 17 29
11/29/2018 util/SmartImageDownloader/0.2.18 1 1 34 67
11/28/2018 util/SmartImageDownloader/0.2.18 1 1 29 94
Scrollable Table
Toggle Code Sample
Condensed Table
Toggle Code Sample
Date (UTC) Algorithm Calls Billed Calls Billed Time (Seconds) Cost (Credits)
11/30/2018 deeplearning/ColorfulImageColorization/1.1.13 1 1 17 29
11/29/2018 util/SmartImageDownloader/0.2.18 1 1 34 67
11/28/2018 util/SmartImageDownloader/0.2.18 1 1 29 94

Code Block

To apply Synapse's code block styles, wrap a pre/code section with a .syn-code-block div. Adding a .syn-code-block-btn div above the pre tag will add an overlayed button.
Default Code Block
<div class="syn-code-block">
  <pre><code>
    <!-- Code Block Content -->
  </code></pre>
</div>
Code Block with Button
<div class="syn-code-block">
  <div class="syn-code-block-btn">
    <button class="syn-btn text theme-primary">
      <!-- Button Text -->
    </button>
  </div>
  <pre><code>
    <!-- Code Block Content -->
  </code></pre>
</div>

Steps

Step 1
Set up your account
Step 2
Personalize your profile
Step 3
Find algorithms
Step 1
Set up your account
Step 2
Personalize your profile
Completed
Set up your account
Step 2
Personalize your profile

Break

Our .syn-break class is used to create a divider between sections. Its color and size can be changed as shown in the examples below, and text can be added to the center.
Default Break
Break Text
Short Break
Break colors
Black
Blue
Coral
Gold
Red
Slate
Teal
White
<!-- Default -->
<div class="syn-break"></div>

<!-- Default with Text -->
<div class="syn-break">
  <span class="syn-break-text"><!-- Break Text --></span>
</div>

<!-- Short -->
<div class="syn-break short"></div>

<!-- Colors -->
<div class="syn-break short black"></div>
<div class="syn-break short blue"></div>
<div class="syn-break short coral"></div>
<div class="syn-break short gold"></div>
<div class="syn-break short red"></div>
<div class="syn-break short slate"></div>
<div class="syn-break short teal"></div>
<div class="syn-break short white"></div>

Nav

Our .syn-nav component provides the styling for a side nav with active link highlighted. For blue highlighting instead of gray, add .theme-primary.

Pagination

Our .syn-pagination component is composed of a horizontal list of buttons, with an optional ellipses (.syn-pagination-spacer) if there are more pages than it is practical to show.
Items per page: 1-7 of 100

Backgrounds

Utilities to apply commonly-used color variables as the background color of an element. Each util class is of the form .syn-bg-[color].
.syn-bg-black
.syn-bg-black-quaternary
.syn-bg-black-secondary
.syn-bg-black-tertiary
.syn-bg-blue
.syn-bg-blue-light
.syn-bg-coral
.syn-bg-coral-light
.syn-bg-gold
.syn-bg-gold-light
.syn-bg-gray
.syn-bg-gray-dark
.syn-bg-gray-light
.syn-bg-green
.syn-bg-orange
.syn-bg-purple
.syn-bg-purple-light
.syn-bg-purple-extra-light
.syn-bg-red
.syn-bg-red-light
.syn-bg-slate-blue
.syn-bg-slate-light
.syn-bg-teal
.syn-bg-teal-light
.syn-bg-white

Flex Box

Utilities to apply flex box styling to an element. .syn-flex will apply display: flex;, and adding subclasses such as .direction-column or .justify-space-between will add the corresponding style rules. Appending -sm or -md to rules will apply them only on small/medium screens or smaller.

Direction

.direction-row (Default)
Element 1
Element 2
Element 3
Element 4
Element 5
.direction-row-reverse
Element 1
Element 2
Element 3
Element 4
Element 5
.direction-column
Element 1
Element 2
Element 3
.direction-column-reverse
Element 1
Element 2
Element 3

Wrap

.no-wrap (Default)
Elements will shrink to stay on the same line of main axis and never wrap.
Elements will shrink to stay on the same line of main axis and never wrap.
Elements will shrink to stay on the same line of main axis and never wrap.
.wrap
Elements will wrap to a new line on main axis if they do not fit.
Elements will wrap to a new line on main axis if they do not fit.
Elements will wrap to a new line on main axis if they do not fit.

Alignment

.align-stretch (Default)
Elements will stretch to fill the full cross access, making them the same height for row/row-reverse and the same width for column/column-reverse.
Like
this.
.align-baseline
Elements will be placed so that their baselines align with each other.
Like this.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla bibendum leo eu ornare.
.align-center
Elements will be centered on the cross axis.
Like this.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla bibendum leo eu ornare. Donec porttitor quis elit aliquam congue.
.align-end
Elements will be placed at the end of the cross axis.
Like this.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla bibendum leo eu ornare.
.align-start
Elements will be placed at the start of the cross axis.
Like this.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla bibendum leo eu ornare.

Justification

.justify-start (Default)
Elements will be justified with the start of the main axis.
Like
this.
.justify-center
Elements will be justified in the center of the main axis.
Like
this.
.justify-end
Elements will be justified with the end of the main axis.
Like
this.
.justify-space-around
Elements will be justified with equal space around each element.
Like
this.
.justify-space-between
Elements will be justified with equal space between each element.
Like
this.
.justify-space-evenly
Elements will be justified with equal space between elements and between end elements and edges.
Like
this.

Flex Items

.flex-item-grow
No flex-item-grow class
.flex-item-grow expands to fill remaining space.
No flex-item grow class
.flex-item-no-shrink
This item does not have the flex-item-no-shrink class. It will shrink automatically.
This item does have the flex-item-no-shrink class. It will remain its default size.
This item does not have the flex-item-no-shrink class. It will shrink automatically.

Order

Our order utilies apply on either mobile (sm), tablet (md), or deskotp (lg) screens, and will position sibling elements in numerical order based on the value from 1-10 at the end of the .syn-order-[size]-[number] class name.
.syn-order-lg-3 / .syn-order-md-1 / .syn-order-sm-2
.syn-order-lg-2 / .syn-order-md-2 / .syn-order-sm-1
.syn-order-lg-3 / .syn-order-md-3 / .syn-order-sm-3
<div class="syn-row syn-mb-32">
  <div class="syn-col syn-col-md-4 syn-order-lg-3 syn-order-md-1 syn-order-sm-2">
    <!-- Appears last on desktop, first on tablet, and second on mobile -->
  </div>
  <div class="syn-col syn-col-md-4 syn-order-lg-2 syn-order-md-2 syn-order-sm-1">
    <!-- Appears second on desktop, second on tablet, and first on mobile -->
  </div>
  <div class="syn-col syn-col-md-4 syn-order-lg-1 syn-order-md-3 syn-order-sm-3">
    <!-- Appears first on desktop, last on tablet, and last on mobile -->
  </div>
</div>

Spacing

Our spacing utilities add margins to a specified side (or sides) of an element. Margin size ranges from 0 to 128 pixels, as well as an "auto" horizontal margin. For spacing that only applies on tablet or smaller screens, use the md variant. For only mobile screens, use the sm variant.
.syn-ma-0 (all margins set to 0)
.syn-mh-auto (horizontal margins set to auto)
.syn-ma-4 (all margins set to 4px)
.syn-mv-8 (vertical margins set to 8px)
.syn-mh-16 (horizontal margins set to 16px)
.syn-mt-20 (top margin set to 20px)
.syn-mb-24 (bottom margin set to 24px)
.syn-ml-32 (left margin set to 32px)
.syn-mr-48 (right margin set to 48px)
.syn-mb-md-64 (64px bottom margin on tablet and smaller)
.syn-mb-md-96, .syn-mt-sm-128 (96px bottom margin on tablet and smaller, 128px top margin on mobile)

Typography

Synapse typography utilities allow altering the color, size, and formatting of our base typography styles.
.syn-header-extra-large

The quick brown fox jumps over the lazy dog.

.syn-body-1
The quick brown fox jumps over the lazy dog.
.syn-bold-label
.syn-body-2
The quick brown fox jumps over the lazy dog.
.syn-overline
The quick brown fox jumps over the lazy dog.
.syn-caption
The quick brown fox jumps over the lazy dog.

Text Color Modifiers

.syn-text-primary
The quick brown fox jumps over the lazy dog.
.syn-text-secondary
The quick brown fox jumps over the lazy dog.
.syn-text-tertiary/.syn-text-disabled
The quick brown fox jumps over the lazy dog.
.syn-text-quaternary
The quick brown fox jumps over the lazy dog.
.syn-text-light-primary
The quick brown fox jumps over the lazy dog.
.syn-text-light-secondary
The quick brown fox jumps over the lazy dog.
.syn-text-danger
The quick brown fox jumps over the lazy dog.
.syn-text-purple
The quick brown fox jumps over the lazy dog.
.syn-text-gold
The quick brown fox jumps over the lazy dog.
.syn-text-gold-dark
The quick brown fox jumps over the lazy dog.
.syn-text-blue
The quick brown fox jumps over the lazy dog.
.syn-text-teal
The quick brown fox jumps over the lazy dog.
.syn-text-coral
The quick brown fox jumps over the lazy dog.

Font Weight Modifiers

.syn-font-weight-regular
The quick brown fox jumps over the lazy dog.
.syn-font-weight-medium
The quick brown fox jumps over the lazy dog.
.syn-font-weight-bold
The quick brown fox jumps over the lazy dog.

Font Family Modifiers

.syn-font-body
The quick brown fox jumps over the lazy dog.
.syn-font-mono
The quick brown fox jumps over the lazy dog.

Alignment Modifiers

.syn-text-left
The quick brown fox jumps over the lazy dog.
.syn-text-center
The quick brown fox jumps over the lazy dog.
.syn-text-right
The quick brown fox jumps over the lazy dog.
.syn-text-left/.syn-text-center-md/.syn-text-right-sm
The quick brown fox jumps over the lazy dog.

Link Modifiers

.syn-link-no-decoration
.syn-link-no-select
.syn-link-animated

Line Height Modifers

.syn-line-height-double
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, mi nec dignissim efficitur, nisl sem iaculis neque, a condimentum libero velit nec neque. Vivamus faucibus tellus dui, et blandit nibh laoreet in. Etiam id libero est. Aenean imperdiet nisl dapibus tellus eleifend, tincidunt auctor ipsum blandit. Donec justo dolor, pulvinar sed sollicitudin vitae, aliquam et augue. Donec ultrices nulla mi, vitae scelerisque felis feugiat et.

Text Wrap Modifers

.syn-text-break-word
LoremipsumdolorsitametconsecteturadipiscingelitNullaposuereminecdignissimefficiturnislsemiaculisnequeacondimentumliberovelitnecnequeVivamusfaucibustellusduietblanditnibhlaoreetinEtiamidliberoest
.syn-text-single-line
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, mi nec dignissim efficitur, nisl sem iaculis neque, a condimentum libero velit nec neque. Vivamus faucibus tellus dui, et blandit nibh laoreet in. Etiam id libero est.

Visibility

Our visibility utilities take the form .syn-visible-[size] or .syn-hidden-[size], and apply display: none; to the element they are applied to based on the class and size. For example, .syn-hidden-lg would hide an element on large screens, while .syn-visible-md would make an element only visible on medium screens. Resize the screen to view the changes in the example below.
.syn-hidden-lg
.syn-hidden-md
.syn-hidden-sm
.syn-visible-lg
.syn-visible-md
.syn-visible-sm
<div class="syn-row syn-mb-32">
  <div class="syn-col syn-col-md-4 syn-hidden-lg">
    <!-- Hidden on large screens only -->
  </div>
  <div class="syn-col syn-col-md-4 syn-hidden-md">
    <!-- Hidden on medium screens only -->
  </div>
  <div class="syn-col syn-col-md-4 syn-hidden-sm">
    <!-- Hidden on small screens only -->
  </div>
  <div class="syn-col syn-col-md-4 syn-visible-lg">
    <!-- Visible on large screens only -->
  </div>
  <div class="syn-col syn-col-md-4 syn-visible-md">
    <!-- Visible on medium screens only -->
  </div>
  <div class="syn-col syn-col-md-4 syn-visible-sm">
    <!-- Visible on small screens only -->
  </div>
</div>

Width

Our width utilities take the form .syn-width-full, .syn-width-capped-[width], or .syn-width-capped-[width]-[screen size]. Apply .syn-width-full for a width of 100%, or apply a .syn-width-capped class for a max-width of the provided width. Add -md or -sm for capped width on only tablet or mobile screens.
.syn-width-full
.syn-width-capped-500
.syn-width-capped-400
.syn-width-capped-256
.syn-width-capped-160
.syn-width-capped-104