Samsung Business
Styleguide

This styleguide represents a gathering of styles and components that can be used in the creation of pages for Samsung Business

Prototype Pages

Home
Education
Contact Us
PDP Spec Component

Grid System

col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-sm-1
col-sm-1
col-sm-1
col-sm-1

Colors

$black: #000
$white: #fff
$darkgray: #333
$lightgray: #d8d8d8
$link-blue: #00a9e0
$section-white: #f7f7f7
$border-gray: #a6a6a6
$form-gray: #f2f2f2

Headings

Heading 1

<h1>Heading 1</h1>

Heading 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>
Heading 5
<h5>Heading 5</h5>

Paragraphs

Paragraph 1

<p class="p1">Paragraph 1</p>

Paragraph 2

<p class="p2">Paragraph 2</p>

Paragraph 3

<p class="p3">Paragraph 3</p>

Copy 1

<p class="cp1">Copy 1</p>

Copy 2

<p class="cp2">Copy 2</p>

Copy 3

<p class="cp3">Copy 3</p>
Link <a class="a1">Link</a>

Buttons

Button 1 <a class="btn-white">Button 1</a>
Button 2 <a class="btn-black">Button 1</a>
Button 3 <a class="btn-footer">Button 1</a>
Button 4 <a class="btn-blue">Button 1</a>

Forms

<input class="form-dark" type="text">
<input class="form-light" type="text">
<input class="form-grey" type="text">
<select name="" id=""> <option value="Education">Education</option> </select>
<div class="checkbox"> <input id="1" class="checkbox" type="checkbox" > <label for="1">Checkbox 1</label> </div>

Icons

<i class="icon-samsung-logo"></i>
icon-carat-up
icon-carat-down
icon-carat-left
icon-carat-right
icon-chat
icon-dropbox
icon-file-pdf
icon-linkedin
icon-location
icon-mail
icon-phone
icon-pinterest
icon-play
icon-search
icon-twitter
icon-vimeo