Watson Platform Component Library

Content

Headers

    
Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

<h1 class="base--h1">Header 1</h1>

<h2 class="base--h2">Header 2</h2>

<h3 class="base--h3">Header 3</h3>

<h4 class="base--h4">Header 4</h4>

<h5 class="base--h5">Header 5</h5>

<h6 class="base--h6">Header 6</h6>

Paragraph

Visual Recognition uses deep learning algorithms to analyze images for scenes, objects, faces, text, and other subjects that can give you insights into your visual content.

    
<p class="base--p">Visual Recognition uses deep learning algorithms to analyze images for scenes, objects, faces, text, and other subjects that can give you insights into your visual content.</p>
<p class="base--p base--p_light">Visual Recognition uses deep learning algorithms to analyze images for scenes, objects, faces, text, and other subjects that can give you insights into your visual content.</p>

Link, Emphasized, Strong

Hyperlink emphasized text Strong Text

    
<a href="#" class="base--a">Hyperlink</a>

<em class="base--em">emphasized text</em>

<strong class="base--strong">Strong Text</strong>

Typography Settings

      
$TypographySettings: (
  'sans serif': ('Helvetica Neue', Helvetica, 'Open Sans', Arial, 'Lucida Grande', 'Roboto', sans-serif),
  'monospace': (source-code-pro, Menlo, Consolas, monospace),
  'weight bold': 700,
  'weight normal': 400,
  'weight light': 200,
  'rhythm': 2rem
);

Colors

Colors Settings

      
$ColorScheme: (
  'primary color': color('purple', 50),
  'secondary color': color('teal', 50),
  'background color': color('white', 10),
  'text color': color('gray', 80),
  'white': color('white', 10),
  'black': color('gray', 100)
);

set-text-color Function

The set-text-color function can find a contrasting text color given a background color.

              
.element-with-dark-text {
  display: block;
  padding: get('rhythm') / 2;
  background-color: color('purple', 20);
  color: set-text-color(color('purple', 20));
  }

  .element-with-light-text {
  display: block;
  padding: get('rhythm') / 2;
  background-color: color('purple', 80);
  color: set-text-color(color('purple', 80));
}
        
      
    

        Dark text, light background
      

        Light text, dark background
      

color Function

The color function can pull a color from the IBM Design Color palette given a color name and tone.

              
.lots-of-colors {
  display: block;
  padding: get('rhythm') / 2;
  background-color: color('white', 40);

  span:nth-of-type(1) {
    color: color('green', 50);
  }

  span:nth-of-type(2) {
    color: color('blue', 40);
  }

  span:nth-of-type(3) {
    color: color('yellow', 30);
  }
}
        
      
    

        green 50
        blue 40
        yellow 30
      

get Function

The get function can look up a key in any global setting (Breakpoints, Typography, etc.) defined in the Sass library.

              
.get-example {
  display: block;
  padding: get('rhythm') / 2;
  background-color: get('background color');
  color: get('primary color');

  @include breakpoint(get('medium')) {
    @include grid(6);

    &:nth-of-type(2) {
      margin-right: 0rem;
    }
  }
}
        
        Get
      
        Get

Container

Containers define main body layouts and contain responsive grid elements.

      
<div class="_container">
  <div class="row">
    <!-- responsive grid elements -->
  </div>
</div>

In this library, there are containers of different widths.

      
<!-- max-width of 768px -->
<div class="_container"></div>
<!-- max-width of 1024px -->
<div class="_container _container_large"></div>
<!-- max-width of 1200px -->
<div class="_container _container_x-large"></div>
<!-- max-width of 1280px -->
<div class="_container _container_xx-large"></div>

Grid Mixin

For layouts designed with responsive grids, you can use the grid mixin.

              
.column-1 {
  @include grid(6);
  background-color: color('purple', 50);
  height: 3rem;
}

.column-2 {
  @include grid(3);
  background-color: color('teal', 50);
  height: 3rem;
  margin-top: 0rem;
}

.column-3 {
  @include grid(3, $has-right-gutter: false);
  background-color: color('gray', 50);
  height: 3rem;
  margin-top: 0rem;
}
        
      
    

Divisions Mixin

For layouts made with basic divisions, you can use the divisions mixin.

              
.left-division {
  @include divisions(2);
  background-color: color('purple', 30);
  height: 7rem;
}

.right-division {
  @include divisions(2);
  margin-top: 0rem;
  background-color: color('teal', 30);
  height: 7rem;
}
        
      
    

Divisions is also useful for ui like grid-view list items that don't align with a responsive grid layout.

              
.grid-item {
  @include divisions(5);
  background-color: color('purple', 50);
  height: 3rem;
  margin-top: 0rem;

  &:nth-of-type(2n) {
    background-color: color('teal', 50);
  }
}
        
      
    

Breakpoints

Below is a basic usage of defining responsive breakpoints using the Breakpoints-Sass mixin.

        first item
      

        second item
      

              
.breakpoint-example-1 {
  display: block;
  background-color: color('purple', 50);

  @include breakpoint(get('large')) {
    @include grid(6);
  }
  }

  .breakpoint-example-2 {
  display: block;
  background-color: color('teal', 50);

  @include breakpoint(get('large')) {
    @include grid(6);
  }
}
        
      
    

Breakpoint Settings

      
$BreakpointSettings: (
  'xx-small': 320px,
  'x-small': 360px,
  'small': 640px,
  'medium': 768px,
  'large': 1024px,
  'x-large': 1200px,
  'xx-large': 1280px
);