Components

Buttons default style

<button class="sg-btn sg-btn-default">Default</button>
<button class="sg-btn sg-btn-primary">Primary</button>
<button class="sg-btn sg-btn-success">Success</button>
<button class="sg-btn sg-btn-info">Info</button>
<button class="sg-btn sg-btn-warning">Warning</button>
<button class="sg-btn sg-btn-alarm">Alarm</button>

Buttons flat style

<button class="sg-btn sg-btn-flat-default">Default</button>
<button class="sg-btn sg-btn-flat-primary">Primary</button>
<button class="sg-btn sg-btn-flat-success">Success</button>
<button class="sg-btn sg-btn-flat-info">Info</button>
<button class="sg-btn sg-btn-flat-warning">Warning</button>
<button class="sg-btn sg-btn-flat-alarm">Alarm</button>

Buttons light style

<button class="sg-btn sg-btn-light-default">Default</button>
<button class="sg-btn sg-btn-light-primary">Primary</button>
<button class="sg-btn sg-btn-light-success">Success</button>
<button class="sg-btn sg-btn-light-info">Info</button>
<button class="sg-btn sg-btn-light-warning">Warning</button>
<button class="sg-btn sg-btn-light-alarm">Alarm</button>

Buttons inverse style

<div class="demo-btn-title demo-bg-black">
	<button class="sg-btn sg-btn-inverse-default">Default</button>
	<button class="sg-btn sg-btn-inverse-primary">Primary</button>
	<button class="sg-btn sg-btn-inverse-success">Success</button>
	<button class="sg-btn sg-btn-inverse-info">Info</button>
	<button class="sg-btn sg-btn-inverse-warning">Warning</button>
	<button class="sg-btn sg-btn-inverse-alarm">Alarm</button>
</div>

Use the button style on different tags, like a tag, or input tag.

<a class="sg-btn sg-btn-default" href="###">Link</a>
<input class="sg-btn sg-btn-default" type="button" value="Input" />
<input class="sg-btn sg-btn-default" type="submit" value="Submit" />

Buttons size

<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-xlarge">Extra large button</button>
	<button class="sg-btn sg-btn-flat-primary sg-btn-xlarge">Extra large button</button>
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-large">Large button</button>
	<button class="sg-btn sg-btn-flat-primary sg-btn-large">Large button</button>
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default">Default button</button>
	<button class="sg-btn sg-btn-flat-primary">Default button</button>
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-small">Small button</button>
	<button class="sg-btn sg-btn-flat-primary sg-btn-small">Small button</button>
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-xsmall">Extra small button</button>
	<button class="sg-btn sg-btn-flat-primary sg-btn-xsmall">Extra small button</button>
</div>

Block level

<div class="demo-btn-level sg-card sg-card--bordered">
	<div class="sg-card-container sg-scroll--y">
		<p>
			<button class="sg-btn sg-btn-default sg-btn-large sg-btn-block">Block level button</button>
			<button class="sg-btn sg-btn-flat-primary sg-btn-large sg-btn-block">Block level button</button>
		</p>
	</div>
</div>

Buttons active state

Anchor element
Button element
<div class="demo-btn-title">
	Anchor element
</div>
<div class="demo-btn-paragraph">
	<a class="sg-btn sg-btn-default sg-btn-large sg-state--active">Active state</a>
	<a class="sg-btn sg-btn-primary sg-btn-large sg-state--active">Active state</a>
</div>
<div class="demo-btn-paragraph">
	<a class="sg-btn sg-btn-flat-default sg-btn-large sg-state--active">Active state</a>
	<a class="sg-btn sg-btn-flat-primary sg-btn-large sg-state--active">Active state</a>
</div>
<div class="demo-btn-paragraph">
	<a class="sg-btn sg-btn-inverse-default sg-btn-large sg-state--active">Active state</a>
	<a class="sg-btn sg-btn-inverse-primary sg-btn-large sg-state--active">Active state</a>
</div>

<div class="demo-btn-title">
	Button element
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-large sg-state--active">Active state</button>
	<button class="sg-btn sg-btn-primary sg-btn-large sg-state--active">Active state</button>
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-flat-default sg-btn-large sg-state--active">Active state</button>
	<button class="sg-btn sg-btn-flat-primary sg-btn-large sg-state--active">Active state</button>
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-inverse-default sg-btn-large sg-state--active">Active state</button>
	<button class="sg-btn sg-btn-inverse-primary sg-btn-large sg-state--active">Active state</button>
</div>

Buttons disable state

Anchor element
Button element
<div class="demo-btn-title">
	Anchor element
</div>
<div class="demo-btn-paragraph">
	<a class="sg-btn sg-btn-default sg-btn-large sg-state--disable">Disable state</a>
	<a class="sg-btn sg-btn-primary sg-btn-large sg-state--disable">Disable state</a>
</div>
<div class="demo-btn-paragraph">
	<a class="sg-btn sg-btn-flat-default sg-btn-large sg-state--disable">Disable state</a>
	<a class="sg-btn sg-btn-flat-primary sg-btn-large sg-state--disable">Disable state</a>
</div>
<div class="demo-btn-paragraph">
	<a class="sg-btn sg-btn-inverse-default sg-btn-large sg-state--disable">Disable state</a>
	<a class="sg-btn sg-btn-inverse-primary sg-btn-large sg-state--disable">Disable state</a>
</div>

<div class="demo-btn-title">
	Button element
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-large sg-state--disable">Disable state</button>
	<button class="sg-btn sg-btn-primary sg-btn-large sg-state--disable">Disable state</button>
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-flat-default sg-btn-large sg-state--disable">Disable state</button>
	<button class="sg-btn sg-btn-flat-primary sg-btn-large sg-state--disable">Disable state</button>
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-inverse-default sg-btn-large sg-state--disable">Disable state</button>
	<button class="sg-btn sg-btn-inverse-primary sg-btn-large sg-state--disable">Disable state</button>
</div>

Buttons with icon

Button with icon and text
Button with icon
Icon only
Community website icons
<div class="demo-btn-title">
	Button with icon and text
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default">
    <i class="icon-download"></i><span class="sg-btn-txt">Download</span>
  </button>
	<button class="sg-btn sg-btn-default">
    <i class="icon-trash-o"></i><span class="sg-btn-txt">Delete</span>
  </button>
	<button class="sg-btn sg-btn-default">
    <i class="icon-print"></i><span class="sg-btn-txt">Print</span>
  </button>
	<button class="sg-btn sg-btn-default">
    <i class="icon-search"></i><span class="sg-btn-txt">Search</span>
  </button>
	<button class="sg-btn sg-btn-default">
    <i class="icon-chevron-left"></i><span class="sg-btn-txt">Prev</span>
  </button>
	<button class="sg-btn sg-btn-default">
    <span class="sg-btn-txt">Next</span><i class="icon-chevron-right"></i>
  </button>
</div>

<div class="demo-btn-title">
	Button with icon
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-square">
    <i class="icon-download"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-square">
    <i class="icon-trash-o"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-square">
    <i class="icon-print"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-square">
    <i class="icon-search"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-square">
    <i class="icon-chevron-left"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-square">
    <i class="icon-chevron-right"></i>
  </button>
</div>

<div class="demo-btn-title">
	Icon only
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-icon">
    <i class="icon-download"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-icon">
    <i class="icon-trash-o"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-icon">
    <i class="icon-print"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-icon">
    <i class="icon-search"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-icon">
    <i class="icon-chevron-left"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-icon">
    <i class="icon-chevron-right"></i>
  </button>
</div>

<div class="demo-btn-title">
	Community website icons
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-square sg-btn-facebook">
    <i class="icon-facebook"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-square sg-btn-twitter">
    <i class="icon-twitter"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-square sg-btn-youtube">
    <i class="icon-youtube"></i>
  </button>
</div>

witdh number

<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-square">1</button>
	<button class="sg-btn sg-btn-default sg-btn-square">2</button>
	<button class="sg-btn sg-btn-default sg-btn-square">3</button>
	<button class="sg-btn sg-btn-default sg-btn-square">4</button>
	<button class="sg-btn sg-btn-default sg-btn-square">5</button>
	<button class="sg-btn sg-btn-default sg-btn-square">6</button>
	<button class="sg-btn sg-btn-default sg-btn-square">7</button>
	<button class="sg-btn sg-btn-default sg-btn-square">8</button>
	<button class="sg-btn sg-btn-default sg-btn-square">9</button>
	<button class="sg-btn sg-btn-default sg-btn-square">10</button>
	<button class="sg-btn sg-btn-default sg-btn-square">11</button>
</div>

circult style

icon
social
number
<div class="demo-btn-title">
	icon
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-circle">
    <i class="icon-download"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-circle">
    <i class="icon-trash-o"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-circle">
    <i class="icon-print"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-circle">
    <i class="icon-search"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-circle">
    <i class="icon-chevron-left"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-circle">
    <i class="icon-chevron-right"></i>
  </button>
</div>

<div class="demo-btn-title">
	social
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-circle sg-btn-facebook">
    <i class="icon-facebook"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-circle sg-btn-twitter">
    <i class="icon-twitter"></i>
  </button>
	<button class="sg-btn sg-btn-default sg-btn-circle sg-btn-youtube">
    <i class="icon-youtube"></i>
  </button>
</div>

<div class="demo-btn-title">
	number
</div>
<div class="demo-btn-paragraph">
	<button class="sg-btn sg-btn-default sg-btn-circle">1</button>
	<button class="sg-btn sg-btn-default sg-btn-circle">2</button>
	<button class="sg-btn sg-btn-default sg-btn-circle">3</button>
	<button class="sg-btn sg-btn-default sg-btn-circle">4</button>
	<button class="sg-btn sg-btn-default sg-btn-circle">5</button>
	<button class="sg-btn sg-btn-default sg-btn-circle">6</button>
	<button class="sg-btn sg-btn-default sg-btn-circle">7</button>
	<button class="sg-btn sg-btn-default sg-btn-circle">8</button>
	<button class="sg-btn sg-btn-default sg-btn-circle">9</button>
	<button class="sg-btn sg-btn-default sg-btn-circle">10</button>
	<button class="sg-btn sg-btn-default sg-btn-circle">11</button>
</div>

Button group

horizontal
vartical
<div class="demo-btn-title">
	horizontal
</div>
<div class="demo-btn-paragraph">
	<div class="sg-btn-group">
		<button class="sg-btn sg-btn-default">Left</button>
		<button class="sg-btn sg-btn-default">Middle</button>
		<button class="sg-btn sg-btn-default">Right</button>
	</div>
</div>

<div class="demo-btn-title">
	vartical
</div>
<div class="demo-btn-paragraph">
	<div class="sg-btn-group-vartical">
		<button class="sg-btn sg-btn-default">button</button>
		<button class="sg-btn sg-btn-default">button</button>
		<button class="sg-btn sg-btn-default">button</button>
	</div>
</div>

Button toolbar

<div class="demo-btn-paragraph">
	<div class="sg-btn-toolbar">
		<div class="sg-btn-group">
			<button class="sg-btn sg-btn-default">text</button>
			<button class="sg-btn sg-btn-default">text</button>
		</div>
		<div class="sg-btn-group">
			<button class="sg-btn sg-btn-default sg-btn-square"><i class="icon-trash-o"></i></button>
			<button class="sg-btn sg-btn-default sg-btn-square"><i class="icon-print"></i></button>
			<button class="sg-btn sg-btn-default sg-btn-square"><i class="icon-search"></i></button>
		</div>
		<div class="sg-btn-group">
			<button class="sg-btn sg-btn-default sg-btn-square"><i class="icon-chevron-left"></i></button>
			<button class="sg-btn sg-btn-default sg-btn-square"><i class="icon-chevron-right"></i></button>
		</div>
	</div>
</div>

Basic card structure.

Title

Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.

<div class="demo-basic-card sg-card sg-card--bordered">
	<div class="sg-card-header">Title</div>
	<div class="sg-card-container sg-scroll--y">
		<p>
			Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
		</p>
	</div>
	<div class="sg-card-footer">
		<a href="#" role="button" class="sg-btn sg-btn-darklink">Cancel</a>
		<a href="#" role="button" class="sg-btn sg-btn-link">Confirm</a>
	</div>
</div>

Basic card structure with badge.

Title
99+

Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.

<div class="demo-basic-card sg-card sg-card--bordered">
	<div class="sg-card-header sg-cell-group">
		<div class="sg-cell">Title</div>
		<div class="sg-cell">
			<span class="sg-badge">99+</span>
		</div>
	</div>
	<div class="sg-card-container sg-scroll--y">
		<p>
			Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
		</p>
	</div>
	<div class="sg-card-footer">
		<a href="#" role="button" class="sg-btn sg-btn-darklink">Cancel</a>
		<a href="#" role="button" class="sg-btn sg-btn-link">Confirm</a>
	</div>
</div>

Different button type.

Title

Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.

<div class="demo-basic-card sg-card sg-card--bordered">
	<div class="sg-card-header">Title</div>
	<div class="sg-card-container sg-scroll--y">
		<p>
			Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
		</p>
	</div>
	<div class="sg-card-footer sg-card-footer--inner-btn">
		<button href="#" role="button" class="sg-btn  sg-btn-default">Cancel</button>
		<button href="#" role="button" class="sg-btn sg-btn-flat-primary sg-card-footer-btn--primary">Confirm</button>
	</div>
</div>

Different button type.

Using "button"
Title
99+

Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.

Using "a"
Title
99+

Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.

<div>Using "button"</div>
<div class="demo-basic-card sg-card sg-card--bordered">
	<div class="sg-card-header sg-cell-group">
		<div class="sg-cell">Title</div>
		<div class="sg-cell">
			<span class="sg-badge">99+</span>
		</div>
	</div>
	<div class="sg-card-container sg-scroll--y">
		<p>
			Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
		</p>
	</div>
	<div class="sg-card-footer sg-cell-group sg-cell--fixed">
		<div class="sg-cell"><button class="sg-btn sg-btn-default sg-card-footer-btn--primary">Confirm</button></div>
		<div class="sg-cell"><button class="sg-btn sg-btn-default">Cancel</button></div>
	</div>
</div>

<div>Using "a"</div>
<div class="demo-basic-card sg-card sg-card--bordered">
	<div class="sg-card-header sg-cell-group">
		<div class="sg-cell">Title</div>
		<div class="sg-cell">
			<span class="sg-badge">99+</span>
		</div>
	</div>
	<div class="sg-card-container sg-scroll--y">
		<p>
			Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
		</p>
	</div>
	<div class="sg-card-footer sg-cell-group sg-cell--fixed">
		<div class="sg-cell"><a href="#" role="button" class="sg-btn sg-btn-default sg-card-footer-btn--primary">Confirm</a></div>
		<div class="sg-cell"><a href="#" role="button" class="sg-btn sg-btn-default">Cancel</a></div>
	</div>
</div>

Add a hero image at header of card.

Header

Title
Subtitle

Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.

<div class="demo-hero-card sg-card sg-card--hero sg-shadow--blur__1dp">
	<div class="sg-card-header" style="background-image: url('./img/card-header-pic.png');">
		<h4>Header</h4>
	</div>
	<div class="sg-card-container sg-scroll--y">
		<div class="title">
			Title
		</div>
		<div class="sub-title">
			Subtitle
		</div>
		<p>
			Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem,
			amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
		</p>
	</div>
	<div class="sg-card-footer sg-cell-group sg-cell--fixed">
		<div class="sg-cell"><button class="sg-btn sg-btn-default sg-card-footer-btn--primary">Confirm</button></div>
		<div class="sg-cell"><button class="sg-btn sg-btn-default">Cancel</button></div>
	</div>
</div>

Click the share button to demo interactive button

Header

Title
Subtitle

Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.

<div id="hero-card" class="demo-hero-card sg-card sg-card--hero sg-shadow--blur__1dp">
	<div class="sg-card-header" style="background-image: url('./img/card-header-pic.png');">
		<h4>Header</h4>
	</div>
	<div class="sg-card-container sg-scroll--y">
		<div class="title">
			Title
		</div>
		<div class="sub-title">
			Subtitle
		</div>
		<p>
			Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem,
			amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
		</p>
	</div>
	<div class="sg-card-interactive">
		<button class="sg-btn sg-btn-default sg-btn-circle sg-state--selected"><i class="icon-heart"></i></button>
		<button class="sg-btn sg-btn-default sg-btn-circle"><i class="icon-comment"></i></button>
		<div id="interbtn-area" class="sg-interbtn">
			<button class="sg-btn sg-btn-light-default sg-btn-circle sg-interbtn--mainbtn"><i class="icon-share"></i></button>
			<button class="sg-btn sg-btn-light-default sg-btn-circle sg-interbtn--subtn first"><i class="icon-facebook"></i></button>
			<button class="sg-btn sg-btn-light-default sg-btn-circle sg-interbtn--subtn second"><i class="icon-twitter"></i></button>
			<button class="sg-btn sg-btn-light-default sg-btn-circle sg-interbtn--subtn third"><i class="icon-tumblr"></i></button>
		</div>
		<button class="sg-btn sg-btn-default sg-btn-square"><i class="icon-ellipsis-v"></i></button>
	</div>
	<div class="sg-card-footer sg-cell-group sg-cell--fixed">
		<div class="sg-cell"><button class="sg-btn sg-btn-default sg-card-footer-btn--primary">Confirm</button></div>
		<div class="sg-cell"><button class="sg-btn sg-btn-default">Cancel</button></div>
	</div>
</div>

Add scroll shadow utility

Header

Title
Subtitle

Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.

<div id="hero-card" class="demo-hero-card sg-card sg-card--hero sg-shadow--blur__1dp">
	<div class="sg-card-header" style="background-image: url('./img/card-header-pic.png');">
		<h4>Header</h4>
	</div>
	<div class="sg-card-container sg-scroll--y sg-scrollshadow-v">
		<div class="title">
			Title
		</div>
		<div class="sub-title">
			Subtitle
		</div>
		<p>
			Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem,
			amet dicat quaeque ad est. Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.
		</p>
	</div>
	<div class="sg-card-footer sg-cell-group sg-cell--fixed">
		<div class="sg-cell">
			<button class="sg-btn sg-btn-default sg-card-footer-btn--primary">Confirm</button>
		</div>
		<div class="sg-cell">
			<button class="sg-btn sg-btn-default">Cancel</button>
		</div>
	</div>
</div>

Icon at left

Account locked out

You have entered an incorrect password 5 times, cannot be log on to in 15 minutes

<div class="demo-icon-card sg-card sg-card--icon sg-card--icon__left sg-shadow--blur__1dp">
	<div class="sg-card-header">
		<h4><i class="icon-lock" style="color:#EB5000;"></i></h4>
	</div>
	<div class="sg-card-container sg-scroll--y">
		<div class="title">
			Account locked out
		</div>
		<p>
			You have entered an incorrect password 5 times, cannot be log on to in 15 minutes
		</p>
	</div>
	<div class="sg-card-footer sg-cell-group sg-cell--fixed">
		<div class="sg-cell"><button class="sg-btn sg-btn-default sg-card-footer-btn--primary">Confirm</button></div>
	</div>
</div>

As lightbox, dialog or alert

Congrats!

Let’s Get Started

Upload Finished

Oops!

Check your connection

New update avaliable

version 1.2.8

Update now

Account locked out

You have entered an incorrect password 5 times, cannot be log on to in 15 minutes

<div class="demo-icon-card sg-card sg-card--icon sg-shadow--blur__1dp">
	<div class="sg-card-header">
		<h4><i class="icon-thumbs-up" style="color:#0e86fe;"></i></h4>
	</div>
	<div class="sg-card-container sg-scroll--y">
		<div class="title">
			Congrats!
		</div>
		<p>
			Let’s Get Started
		</p>
	</div>
	<div class="sg-card-footer sg-cell-group sg-cell--fixed">
		<div class="sg-cell"><button class="sg-btn sg-btn-default sg-card-footer-btn--primary">Confirm</button></div>
	</div>
</div>
<div class="demo-icon-card sg-card sg-card--icon sg-shadow--blur__1dp">
	<div class="sg-card-header">
		<h4><i class="icon-check" style="color:#2BCD86;"></i></h4>
	</div>
	<div class="sg-card-container sg-scroll--y">
		<div class="title">
			Upload Finished
		</div>
	</div>
	<div class="sg-card-footer sg-cell-group sg-cell--fixed">
		<div class="sg-cell"><button class="sg-btn sg-btn-default sg-card-footer-btn--primary">Confirm</button></div>
	</div>
</div>
<div class="demo-icon-card sg-card sg-card--icon sg-shadow--blur__1dp">
	<div class="sg-card-header">
		<h4><i class="icon-warning" style="color:#FFB400;"></i></h4>
	</div>
	<div class="sg-card-container sg-scroll--y">
		<div class="title">
			Oops!
		</div>
		<p>
			Check your connection
		</p>
	</div>
	<div class="sg-card-footer sg-cell-group sg-cell--fixed">
		<div class="sg-cell"><button class="sg-btn sg-btn-default sg-card-footer-btn--primary">Confirm</button></div>
	</div>
</div>
<div class="demo-icon-card sg-card sg-card--icon sg-shadow--blur__1dp">
	<div class="sg-card-header">
		<h4><i class="icon-refresh" style="color:#00C3FF;"></i></h4>
	</div>
	<div class="sg-card-container sg-scroll--y">
		<div class="title">
			New update avaliable
		</div>
		<p>
			version 1.2.8
		</p>
		<p>
			<a href="">Update now</a>
		</p>
	</div>
	<div class="sg-card-footer sg-cell-group sg-cell--fixed">
		<div class="sg-cell"><button class="sg-btn sg-btn-default sg-card-footer-btn--primary">Confirm</button></div>
	</div>
</div>
<div class="demo-icon-card sg-card sg-card--icon sg-shadow--blur__1dp">
	<div class="sg-card-header">
		<h4><i class="icon-lock" style="color:#EB5000;"></i></h4>
	</div>
	<div class="sg-card-container sg-scroll--y">
		<div class="title">
			Account locked out
		</div>
		<p>
			You have entered an incorrect password 5 times, cannot be log on to in 15 minutes
		</p>
	</div>
	<div class="sg-card-footer sg-cell-group sg-cell--fixed">
		<div class="sg-cell"><button class="sg-btn sg-btn-default sg-card-footer-btn--primary">Confirm</button></div>
	</div>
</div>

Basic checkbox style

<label class="demo-checkbox-inline sg-checkbox-label">
	<input type="checkbox" class="sg-checkbox" name="basic-checkbox"/>
	<span>Checkbox 1</span>
</label>

<label class="demo-checkbox-inline sg-checkbox-label">
	<input type="checkbox" class="sg-checkbox" name="basic-checkbox"/>
	<span>Checkbox 2</span>
</label>

<label class="demo-checkbox-inline sg-checkbox-label">
	<input type="checkbox" class="sg-checkbox" name="basic-checkbox"/>
	<span>Checkbox 3</span>
</label>

<label class="demo-checkbox-inline sg-checkbox-label">
	<input type="checkbox" class="sg-checkbox" name="basic-checkbox"/>
	<span>Checkbox 4</span>
</label>

Disable checkbox

<label class="demo-checkbox-inline sg-checkbox-label sg-state--disable">
	<input type="checkbox" class="sg-checkbox" name="basic-checkbox"/>
	<span>Checkbox 5</span>
</label>

<label class="demo-checkbox-inline sg-checkbox-label sg-state--disable">
	<input type="checkbox" class="sg-checkbox" name="basic-checkbox" checked/>
	<span>Checkbox 6</span>
</label>

Round checkbox

<label class="demo-checkbox-inline sg-checkbox-label sg-checkbox-label--circle sg-state--disable">
	<input type="checkbox" class="sg-checkbox" name="basic-checkbox" disabled/>
	<span>Checkbox 7</span>
</label>

<label class="demo-checkbox-inline sg-checkbox-label sg-checkbox-label--circle sg-state--disable">
	<input type="checkbox" class="sg-checkbox" name="basic-checkbox" checked/>
	<span>Checkbox 8</span>
</label>


<label class="demo-checkbox-inline sg-checkbox-label sg-checkbox-label--circle">
	<input type="checkbox" class="sg-checkbox" name="basic-checkbox"/>
	<span>Checkbox 9</span>
</label>

<label class="demo-checkbox-inline sg-checkbox-label sg-checkbox-label--circle">
	<input type="checkbox" class="sg-checkbox" name="basic-checkbox" checked/>
	<span>Checkbox 10</span>
</label>
Collapse1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Collapse2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<div class="sg-collapse">
	<div class="sg-collapse--title">Collapse1<i class="icon-chevron-down" aria-hidden="true"></i></div>
	<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	<div class="sg-collapse--title">Collapse2<i class="icon-chevron-down" aria-hidden="true"></i></div>
	<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
  • Collapse1
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • Collapse2
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<ul class="sg-collapse sg-collapse--bordered">
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse1<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse2<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
</ul>
  • Collapse1
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • Collapse2
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<ul class="sg-collapse  sg-collapse--inverse">
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse1<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse2<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
</ul>
  • Collapse1
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • Collapse2
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<ul class="sg-collapse sg-collapse--inverse sg-collapse--bordered">
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse1<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse2<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
</ul>
  • Collapse1
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • Collapse2
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • Collapse3
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<ul class="sg-collapse sg-collapse--mix sg-collapse--bordered">
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse1<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse2<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse3<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
</ul>
  • Collapse1
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • Collapse2
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • Collapse3
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • Collapse1
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • Collapse2
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  • Collapse3
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<ul class="sg-collapse sg-collapse--bordered sg-collapse--separate">
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse1<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse2<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse3<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
</ul>

<ul class="sg-collapse sg-collapse--inverse sg-collapse--separate sg-collapse--bordered">
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse1<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse2<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
	<li class="sg-collapse-container">
		<div class="sg-collapse--title">Collapse3<i class="icon-chevron-down" aria-hidden="true"></i></div>
		<div class="sg-collapse--content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
	</li>
</ul>

Placeholder only (no labels)

<div class="sg-input-item sg-placeholder">
	<input type="text" placeholder="First Name" class="sg-input">
</div>

<div class="sg-input-item sg-placeholder">
	<input type="text" placeholder="Last Name" class="sg-input">
</div>

Basic label style

Full Name
Email
Gender
Brief Intro
<!-- Full Name -->
<div class="sg-input-item">
	<span class="sg-input-label">Full Name</span>
	<div class="sg-input-group sg-state--multiple-cell">
		<span class="sg-input-group__cell"><input type="text" placeholder="First Name" class="sg-input"></span>
		<span class="sg-input-group__cell"><input type="text" placeholder="Last Name" class="sg-input"></span>
	</div>
</div>

<!-- Email -->
<div class="sg-input-item">
	<span class="sg-input-label">Email</span>
	<input type="text" placeholder="Enter email" class="sg-input">
</div>

<!-- Gender -->
<div class="sg-input-item">
	<span class="sg-input-label">Gender</span>
	<button type="button" class="sg-btn sg-btn-default sg-btn-block sg-dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sg-btn-txt">Male</span><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu">
		<li><a href="#">Male</a></li>
		<li><a href="#">Female</a></li>
		<li><a href="#">Other</a></li>
	</ul>
	</span>
</div>

<!-- Tel -->
<div class="sg-input-item">
	<span class="sg-input-label">Tel</span>
	<div class="sg-input-group sg-state--multiple-cell">
		<span class="sg-input-group__btns">
        <button 
          type="button" 
          class="sg-btn sg-btn-default sg-dropdown-toggle" 
          data-toggle="dropdown" 
          aria-haspopup="true" 
          aria-expanded="false"><span class="sg-btn-txt">Taiwan(+886)</span><span class="sg-caret"></span></button>
		<ul class="sg-dropdown-menu">
			<li><a href="#">Taiwan(+886)</a></li>
			<li><a href="#">Taiwan(+886)</a></li>
			<li><a href="#">Taiwan(+886)</a></li>
		</ul>
		</span>
		<span class="sg-input-group__addon">
      <span class="sg-txt">+0</span>
		<input type="text" class="sg-input">
		</span>
		<span class="sg-input-group__cell"><input type="text" placeholder="Phone number..." class="sg-input"></span>
		<span class="sg-input-group__addon">Ext</span>
		<span class="sg-input-group__cell sg-cell--2"><input type="text" placeholder="" class="sg-input"></span>
	</div>
</div>

<!-- Brief Intro -->
<div class="sg-input-item">
	<span class="sg-input-label">Brief Intro</span>
	<textarea class="sg-input" placeholder="Introduce yourself..." rows="5"></textarea>
</div>

Floating labels

First Name
Last Name
<div class="sg-input-item sg-input-floating">
	<span class="sg-input-label">First Name</span>
	<input type="text" placeholder="Enter first Name" class="sg-input">
</div>

<div class="sg-input-item sg-input-floating">
	<span class="sg-input-label">Last Name</span>
	<input type="text" placeholder="Enter last Name" class="sg-input">
</div>

Inline labels

align-left (default)
Full Name
Email
Gender
Brief Intro
align-right
Full Name
Email
Gender
Brief Intro
<div class="demo-btn-title">
	align-left (default)
</div>
<div class="demo-btn-paragraph">

	<!-- Full Name -->
	<div class="sg-input-item sg-input-inline">
		<span class="sg-input-label">Full Name</span>
		<span class="sg-input-inline__content">
      <div class="sg-input-group sg-state--multiple-cell">
        <span class="sg-input-group__cell"><input type="text" placeholder="First Name" class="sg-input"></span>
		<span class="sg-input-group__cell"><input type="text" placeholder="Last Name" class="sg-input"></span>
	</div>
	</span>
</div>

<!-- Email -->
<div class="sg-input-item sg-input-inline">
	<span class="sg-input-label">Email</span>
	<input type="text" placeholder="Enter email" class="sg-input">
</div>

<!-- Gender -->
<div class="sg-input-item sg-input-inline">
	<span class="sg-input-label">Gender</span>
	<span class="sg-input-inline__content">
      <button 
        type="button" 
        class="sg-btn sg-btn-default sg-btn-block sg-dropdown-toggle" 
        data-toggle="dropdown" 
        aria-haspopup="true" 
        aria-expanded="false"><span class="sg-btn-txt">Male</span><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu sg-state--right">
		<li><a href="#">Male</a></li>
		<li><a href="#">Female</a></li>
		<li><a href="#">Other</a></li>
	</ul>
	</span>
</div>

<!-- Tel -->
<div class="sg-input-item sg-input-inline">
	<span class="sg-input-label">Tel</span>
	<span class="sg-input-inline__content">
      <div class="sg-input-group sg-state--multiple-cell">
        <span class="sg-input-group__btns">
          <button 
            type="button" 
            class="sg-btn sg-btn-default sg-dropdown-toggle" 
            data-toggle="dropdown" 
            aria-haspopup="true" 
            aria-expanded="false"><span class="sg-btn-txt">Taiwan(+886)</span><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu">
		<li><a href="#">Taiwan(+886)</a></li>
		<li><a href="#">Taiwan(+886)</a></li>
		<li><a href="#">Taiwan(+886)</a></li>
	</ul>
	</span>
	<span class="sg-input-group__addon">
          <span class="sg-txt">+0</span>
	<input type="text" class="sg-input">
	</span>
	<span class="sg-input-group__cell"><input type="text" placeholder="Phone number..." class="sg-input"></span>
	<span class="sg-input-group__addon">Ext</span>
	<span class="sg-input-group__cell sg-cell--2"><input type="text" placeholder="" class="sg-input"></span>
</div>
</span>
</div>

<!-- Brief Intro -->
<div class="sg-input-item sg-input-inline">
	<span class="sg-input-label">Brief Intro</span>
	<span class="sg-input-inline__content">
      <textarea class="sg-input" placeholder="Introduce yourself..." rows="5"></textarea>
    </span>
</div>

</div>


<div class="demo-btn-title">
	align-right
</div>
<div class="demo-btn-paragraph">

	<!-- Full Name -->
	<div class="sg-input-item sg-input-inline sg-txt--right">
		<span class="sg-input-label">Full Name</span>
		<span class="sg-input-inline__content">
      <div class="sg-input-group sg-state--multiple-cell">
        <span class="sg-input-group__cell"><input type="text" placeholder="First Name" class="sg-input"></span>
		<span class="sg-input-group__cell"><input type="text" placeholder="Last Name" class="sg-input"></span>
	</div>
	</span>
</div>

<!-- Email -->
<div class="sg-input-item sg-input-inline sg-txt--right">
	<span class="sg-input-label">Email</span>
	<input type="text" placeholder="Enter email" class="sg-input">
</div>

<!-- Gender -->
<div class="sg-input-item sg-input-inline sg-txt--right">
	<span class="sg-input-label">Gender</span>
	<span class="sg-input-inline__content">
      <button 
        type="button" 
        class="sg-btn sg-btn-default sg-btn-block sg-dropdown-toggle" 
        data-toggle="dropdown" 
        aria-haspopup="true" 
        aria-expanded="false"><span class="sg-btn-txt">Male</span><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu sg-state--right">
		<li><a href="#">Male</a></li>
		<li><a href="#">Female</a></li>
		<li><a href="#">Other</a></li>
	</ul>
	</span>
</div>

<!-- Tel -->
<div class="sg-input-item sg-input-inline sg-txt--right">
	<span class="sg-input-label">Tel</span>
	<span class="sg-input-inline__content">
      <div class="sg-input-group sg-state--multiple-cell">
        <span class="sg-input-group__btns">
          <button 
            type="button" 
            class="sg-btn sg-btn-default sg-dropdown-toggle" 
            data-toggle="dropdown" 
            aria-haspopup="true" 
            aria-expanded="false"><span class="sg-btn-txt">Taiwan(+886)</span><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu">
		<li><a href="#">Taiwan(+886)</a></li>
		<li><a href="#">Taiwan(+886)</a></li>
		<li><a href="#">Taiwan(+886)</a></li>
	</ul>
	</span>
	<span class="sg-input-group__addon">
          <span class="sg-txt">+0</span>
	<input type="text" class="sg-input">
	</span>
	<span class="sg-input-group__cell"><input type="text" placeholder="Phone number..." class="sg-input"></span>
	<span class="sg-input-group__addon">Ext</span>
	<span class="sg-input-group__cell sg-cell--2"><input type="text" placeholder="" class="sg-input"></span>
</div>
</span>
</div>

<!-- Brief Intro -->
<div class="sg-input-item sg-input-inline sg-txt--right">
	<span class="sg-input-label">Brief Intro</span>
	<span class="sg-input-inline__content">
      <textarea class="sg-input" placeholder="Introduce yourself..." rows="5"></textarea>
    </span>
</div>

</div>

Required

Placeholder only
Basic Label
First Name
Last Name
Floating Label
First Name
Last Name
Inline Label
First Name
Last Name
Inline Label (align-right)
First Name
Last Name
<div class="demo-btn-title">
	Placeholder only
</div>
<div class="demo-btn-paragraph">
	<div class="sg-input-item sg-placeholder sg-state--required">
		<input type="text" placeholder="First Name" class="sg-input">
	</div>
	<div class="sg-input-item sg-placeholder sg-state--required">
		<input type="text" placeholder="Last Name" class="sg-input">
	</div>
</div>

<div class="demo-btn-title">
	Basic Label
</div>
<div class="demo-btn-paragraph">
	<div class="sg-input-item sg-state--required">
		<span class="sg-input-label">First Name</span>
		<input type="text" placeholder="Enter your first name" class="sg-input">
	</div>
	<div class="sg-input-item sg-state--required">
		<span class="sg-input-label">Last Name</span>
		<input type="text" placeholder="Enter your last name" class="sg-input">
	</div>
</div>

<div class="demo-btn-title">
	Floating Label
</div>
<div class="demo-btn-paragraph">
	<div class="sg-input-item sg-input-floating sg-state--required">
		<span class="sg-input-label">First Name</span><input type="text" placeholder="Enter your first name" class="sg-input">
	</div>
	<div class="sg-input-item sg-input-floating sg-state--required">
		<span class="sg-input-label">Last Name</span><input type="text" placeholder="Enter your last name" class="sg-input">
	</div>
</div>

<div class="demo-btn-title">
	Inline Label
</div>
<div class="demo-btn-paragraph">
	<div class="sg-input-item sg-input-inline sg-state--required">
		<span class="sg-input-label">First Name</span>
		<input type="text" placeholder="First Name" class="sg-input">
	</div>
	<div class="sg-input-item sg-input-inline sg-state--required">
		<span class="sg-input-label">Last Name</span>
		<input type="text" placeholder="Last Name" class="sg-input">
	</div>
</div>

<div class="demo-btn-title">
	Inline Label (align-right)
</div>
<div class="demo-btn-paragraph">
	<div class="sg-input-item sg-txt--right sg-input-inline sg-state--required">
		<span class="sg-input-label">First Name</span>
		<input type="text" placeholder="First Name" class="sg-input">
	</div>
	<div class="sg-input-item sg-txt--right sg-input-inline sg-state--required">
		<span class="sg-input-label">Last Name</span>
		<input type="text" placeholder="Last Name" class="sg-input">
	</div>
</div>

Add hint or direction to input fields. If use <div class=".sg-input-group.sg-state--multiple-cell"></div> structure, then it's child must be <span class="sg-input-group__cell">...</span>

Full Name
Example: James Allen
User Name
Username is available
This is a alternate name for your account, used by some network services. Enter 8 lowercase characters or fewer with no spaces. Example: jallen
Password
Password strength: weak
Email
Please enter a valid email address
Password
Your account has been locked because you have reached the maximum number of invalid logon attempts.
Birthday
MM
DD
Required
YYYY
Tel
+0
Enter the Area code After “0”
Ext
please omit if there is no extension number
<!-- default -->
<div class="sg-input-item sg-input-inline">
	<span class="sg-input-label">Full Name</span>
	<div class="sg-input-inline__content sg-state--has-hint">
		<div class="sg-input-item">
			<input type="text" value="Dieter Rams" placeholder="Full Name" class="sg-input">
		</div>
		<div class="sg-hint">Example: James Allen</div>
	</div>
</div>

<!-- success -->
<div class="sg-input-item sg-state--success sg-input-inline">
	<span class="sg-input-label">User Name</span>
	<div class="sg-input-inline__content sg-state--has-hint">
		<div class="sg-input-item sg-state--icon-right">
			<input type="text" value="dramsign" placeholder="User Name" class="sg-input">
			<i class="icon-check"></i>
		</div>
		<div class="sg-hint sg-hint--highlight">Username is available</div>
		<div class="sg-hint">This is a alternate name for your account, used by some network services. Enter 8 lowercase characters or fewer with no spaces. Example: jallen</div>
	</div>
</div>

<!-- warning -->
<div class="sg-input-item sg-state--warning sg-input-inline">
	<span class="sg-input-label">Password</span>
	<div class="sg-input-inline__content sg-state--has-hint">
		<div class="sg-input-item">
			<input type="password" value="12345" placeholder="Password" class="sg-input">
		</div>
		<div class="sg-hint sg-hint--highlight">Password strength: weak</div>
	</div>
</div>

<!-- alarm -->
<div class="sg-input-item sg-state--alarm sg-input-inline">
	<span class="sg-input-label">Email</span>
	<div class="sg-input-inline__content sg-state--has-hint">
		<div class="sg-input-item">
			<input type="email" value="dieterams@gmsil.com.tw" placeholder="Email" class="sg-input">
		</div>
		<div class="sg-hint sg-hint--highlight">Please enter a valid email address</div>
	</div>
</div>

<!-- alarm (disabled) -->
<div class="sg-input-item sg-state--alarm sg-state--alarm-disable sg-input-inline">
	<span class="sg-input-label">Password</span>
	<div class="sg-input-inline__content sg-state--has-hint">
		<div class="sg-input-item sg-state--icon-right">
			<input type="password" value="12345" placeholder="Password" class="sg-input">
			<i class="icon-lock"></i>
		</div>
		<div class="sg-hint sg-hint--highlight">Your account has been locked because you have reached the maximum number of invalid logon attempts.</div>
	</div>
</div>

<!-- Birthday -->
<div class="sg-input-item sg-state--alarm sg-input-inline">
	<span class="sg-input-label">Birthday</span>
	<span class="sg-input-inline__content sg-state--has-hint">
    <div class="sg-input-group sg-state--multiple-cell">
      <span class="sg-input-group__cell">
        <div class="sg-input-item">
          <input type="text" value="1" placeholder="Month" class="sg-input">
        </div>
        <div class="sg-hint">MM</div>
      </span>
	<span class="sg-input-group__cell">
        <div class="sg-input-item">
          <input type="text" value="20" placeholder="Day" class="sg-input">
        </div>
        <div class="sg-hint">DD</div>
      </span>
	<span class="sg-input-group__cell">
        <div class="sg-input-item sg-state--focus sg-state--icon-right">
          <input type="text" placeholder="Year" class="sg-input">
          <i class="icon-exclamation-circle"></i>
        </div>
        <div class="sg-hint sg-hint--highlight">Required</div>
        <div class="sg-hint">YYYY</div>
      </span>
</div>
</span>
</div>

<!-- Tel -->
<div class="sg-input-item sg-input-inline">
	<span class="sg-input-label">Tel</span>
	<span class="sg-input-inline__content sg-state--has-hint">
    <div class="sg-input-group sg-state--multiple-cell">
      <span class="sg-input-group__cell sg-cell--fit">
        <span class="sg-input-group__btns">
          <button 
            type="button" 
            class="sg-btn sg-btn-default sg-dropdown-toggle" 
            data-toggle="dropdown" 
            aria-haspopup="true" 
            aria-expanded="false"><span class="sg-btn-txt">Taiwan(+886)</span><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu">
		<li><a href="#">Taiwan(+886)</a></li>
		<li><a href="#">Taiwan(+886)</a></li>
		<li><a href="#">Taiwan(+886)</a></li>
	</ul>
	</span>
	</span>
	<span class="sg-input-group__cell sg-cell--fit">
        <span class="sg-input-group__addon">
          <span class="sg-txt">+0</span>
	<input type="text" class="sg-input">
	</span>
	<div class="sg-hint">Enter the Area code After “0”</div>
	</span>
	<span class="sg-input-group__cell">
        <input type="text" placeholder="Phone number..." class="sg-input">
      </span>
	<span class="sg-input-group__cell sg-cell--fit">
        <span class="sg-input-group__addon">Ext</span>
	</span>
	<span class="sg-input-group__cell sg-cell--2">
        <input type="text" placeholder="" class="sg-input">
        <div class="sg-hint">please omit if there is no extension number</div>
      </span>
</div>
</span>
</div>

Basic input style

<div class="sg-input-item">
	<input type="text" placeholder="First Name" class="sg-input">
</div>

<div class="sg-input-item">
	<input type="text" placeholder="Last Name" class="sg-input">
</div>

Form state

Basic

With Icon

<p class="demo-title">Basic</p>

<!-- Disable state -->
<div class="sg-input-item sg-state--disable">
	<input type="text" placeholder="Disable state" class="sg-input">
</div>

<!-- Alarm state -->
<div class="sg-input-item sg-state--alarm">
	<input type="text" placeholder="Alarm state" class="sg-input">
</div>

<!-- Alarm state not editable (disabled) -->
<div class="sg-input-item sg-state--alarm sg-state--alarm-disable">
	<input type="text" placeholder="Alarm state not editable (disabled)" class="sg-input">
</div>

<!-- Warning state -->
<div class="sg-input-item sg-state--warning">
	<input type="text" placeholder="Warning state" class="sg-input">
</div>

<p class="demo-title">With Icon</p>

<!-- Normal state with icon on the left side -->
<div class="sg-input-item sg-state--icon-left">
	<input type="text" placeholder="Normal state with icon on the left side" class="sg-input">
	<i class="icon-search"></i>
</div>

<!-- Disable state with icon on the right side -->
<div class="sg-input-item sg-state--disable sg-state--icon-right">
	<input type="text" placeholder="Disable state with icon on the right side" class="sg-input">
	<i class="icon-lock"></i>
</div>

<!-- Alarm state with icon on the right side -->
<div class="sg-input-item sg-state--alarm sg-state--icon-right">
	<input type="text" placeholder="Alarm state with icon on the right side" class="sg-input">
	<i class="icon-exclamation"></i>
</div>

<!-- Success state with icon on the right side -->
<div class="sg-input-item sg-state--success sg-state--icon-right">
	<input type="text" placeholder="Success state with icon on the right side" class="sg-input">
	<i class="icon-check"></i>
</div>

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

We do not support multiple add-ons (.input-group-addon or .input-group-btn) on a single side.

We do not support multiple form-controls in a single input group.

https://
kg
$.00
<div class="sg-input-group">
	<span class="sg-input-group__addon">https://</span>
	<input type="text" placeholder="Label Addon on the left side" class="sg-input">
</div>

<div class="sg-input-group">
	<input type="text" placeholder="Label Addon on the right side" class="sg-input">
	<span class="sg-input-group__addon">kg</span>
</div>

<div class="sg-input-group">
	<span class="sg-input-group__addon">$</span>
	<input type="text" placeholder="Label Addons on both side" class="sg-input">
	<span class="sg-input-group__addon">.00</span>
</div>

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

<div class="sg-input-group">
	<span class="sg-input-group__btns">
    <button type="button" class="sg-btn sg-btn-flat-primary">GO</button>
  </span>
	<input type="text" placeholder="Button Addon on the left side" class="sg-input">
</div>

<div class="sg-input-group">
	<input type="text" placeholder="Button Addon on the right side" class="sg-input">
	<span class="sg-input-group__btns">
    <button type="button" class="sg-btn sg-btn-flat-primary">Search</button>
  </span>
</div>

<div class="sg-input-group">
	<input type="text" placeholder="Button Addon on the right side" class="sg-input">
	<span class="sg-input-group__btns">
    <button type="button" class="sg-btn sg-btn-flat-primary">
      <i class="icon-copy"></i><span class="sg-btn-txt">Copy</span>
	</button>
	</span>
</div>
<div class="sg-input-group">
	<span class="sg-input-group__btns">
    <button 
      type="button"  
      class="sg-btn sg-btn-default sg-dropdown-toggle" 
      data-toggle="dropdown" 
      aria-haspopup="true" 
      aria-expanded="false"><span class="sg-btn-txt">Action</span><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li role="separator" class="sg-divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
	</span>
	<input type="text" placeholder="Dropdowns on the left side" class="sg-input">
</div>

<div class="sg-input-group">
	<input type="text" placeholder="Dropdowns on the right side" class="sg-input">
	<span class="sg-input-group__btns">
    <button 
      type="button" 
      class="sg-btn sg-btn-default sg-dropdown-toggle" 
      data-toggle="dropdown" 
      aria-haspopup="true" 
      aria-expanded="false"><span class="sg-btn-txt">Action</span><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu sg-state--right">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li role="separator" class="sg-divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
	</span>
</div>
<div class="sg-input-group">
	<span class="sg-input-group__btns">
    <!-- Buttons and dropdown menu -->
    <button type="button" class="sg-btn sg-btn-default">GO</button>
    <button 
      type="button" 
      class="sg-btn sg-btn-default sg-btn-square sg-dropdown-toggle" 
      data-toggle="dropdown" 
      aria-haspopup="true" 
      aria-expanded="false"><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li role="separator" class="sg-divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
	</span>
	<input type="text" placeholder="Segemented buttons on the left side" class="sg-input">
</div>

<div class="sg-input-group">
	<input type="text" placeholder="Segemented buttons on the right side" class="sg-input">
	<span class="sg-input-group__btns">
    <!-- Buttons and dropdown menu -->
    <button 
      type="button" 
      class="sg-btn sg-btn-default sg-dropdown-toggle" 
      data-toggle="dropdown" 
      aria-haspopup="true" 
      aria-expanded="false"><span class="sg-btn-txt">Category</span><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu sg-state--right">
		<li><a href="#">All</a></li>
		<li><a href="#">Technology</a></li>
		<li><a href="#">Computer Science</a></li>
	</ul>
	<button type="button" class="sg-btn sg-btn-flat-primary">Search</button>
	</span>
</div>

While you can only have one add-on per side, you can have multiple buttons inside a single .input-group-btn.

<div class="sg-input-group">
	<span class="sg-input-group__btns">
    <!-- Buttons -->
    <button type="button" class="sg-btn sg-btn-default sg-btn-square"><i class="sg-icon icon-font"></i></button>
    <button type="button" class="sg-btn sg-btn-default sg-btn-square"><i class="sg-icon icon-bold"></i></button>
    <button type="button" class="sg-btn sg-btn-default sg-btn-square"><i class="sg-icon icon-italic"></i></button>
  </span>
	<input type="text" placeholder="Multiple buttons on the left side" class="sg-input">
</div>

<div class="sg-input-group">
	<input type="text" placeholder="Multiple buttons on the right side" class="sg-input">
	<span class="sg-input-group__btns">
    <!-- Buttons -->
    <button type="button" class="sg-btn sg-btn-default sg-btn-square"><i class="sg-icon icon-question-circle"></i></button>
    <button type="button" class="sg-btn sg-btn-default">Action</button>
  </span>
</div>
<!-- Button icon on the right side -->
<div class="sg-input-item sg-state--icon-right">
	<input type="text" placeholder="Button icon on the right side" class="sg-input">
	<button type="button" class="sg-btn sg-btn-default sg-btn-icon">
    <i class="icon-search"></i>
  </button>
</div>

<!-- Button icon on the left side -->
<div class="sg-input-item sg-state--icon-left">
	<button type="button" class="sg-btn sg-btn-default sg-btn-icon">
    <i class="icon-search"></i>
  </button>
	<input type="text" placeholder="Button icon on the left side" class="sg-input">
</div>

<!-- Show clear field button after input someting -->
<div class="sg-input-item sg-state--icon-clear">
	<input type="text" placeholder="Show clear field button after input someting" class="sg-input">
	<button type="button" class="sg-btn sg-btn-default sg-btn-icon sg-state--clear">
    <i class="icon-times-circle"></i>
  </button>
</div>

<!-- Show clear field button after input someting -->
<div class="sg-input-item sg-state--icon-left sg-state--icon-clear">
	<input type="text" placeholder="Show clear field button after input someting" class="sg-input">
	<i class="icon-search"></i>
	<button type="button" class="sg-btn sg-btn-default sg-btn-icon sg-state--clear">
    <i class="icon-times-circle"></i>
  </button>
</div>

<!-- Show clear field button after input someting -->
<div class="sg-input-item sg-state--icon-right sg-state--icon-clear">
	<input type="text" placeholder="Show clear field button after input someting" class="sg-input">
	<button type="button" class="sg-btn sg-btn-default sg-btn-icon sg-state--clear">
    <i class="icon-times-circle"></i>
  </button>
	<button type="button" class="sg-btn sg-btn-default sg-btn-icon">
    <i class="icon-search"></i>
  </button>
</div>

Defferent input types.

<p class="demo-title">Select</p>
<div class="sg-input-item">
	<button type="button" class="sg-btn sg-btn-default sg-btn-block sg-dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sg-btn-txt">Action</span><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li role="separator" class="sg-divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>

<p class="demo-title">Text Area</p>
<div class="sg-input-item">
	<textarea class="sg-input" placeholder="Type somethine..." rows="5"></textarea>
</div>

Combination of different input type.

<!-- Multiple input column -->
<div class="sg-input-group sg-state--multiple-cell">
	<span class="sg-input-group__cell"><input type="text" placeholder="First Name" class="sg-input"></span>
	<span class="sg-input-group__cell"><input type="text" placeholder="Last Name" class="sg-input"></span>
</div>

<!-- Multiple input column with label addons -->
<div class="sg-input-group sg-state--multiple-cell">
	<span class="sg-input-group__addon"><i class="icon-credit-card"></i></span>
	<span class="sg-input-group__cell"><input type="text" placeholder="0000" class="sg-input"></span>
	<span class="sg-input-group__cell"><input type="text" placeholder="0000" class="sg-input"></span>
	<span class="sg-input-group__cell"><input type="text" placeholder="0000" class="sg-input"></span>
	<span class="sg-input-group__cell"><input type="text" placeholder="0000" class="sg-input"></span>
</div>

<!-- Multiple input column with label addons and button dropdown -->
<div class="sg-input-group sg-state--multiple-cell">
	<span class="sg-input-group__addon">https://github.com/</span>
	<span class="sg-input-group__btns">
      <button 
        type="button" 
        class="sg-btn sg-btn-default sg-dropdown-toggle" 
        data-toggle="dropdown" 
        aria-haspopup="true" 
        aria-expanded="false"><span class="sg-btn-txt">GSS-FED</span><span class="sg-caret"></span></button>
	<ul class="sg-dropdown-menu">
		<li><a href="#">GSS-CSBU</a></li>
		<li><a href="#">GSS-FED</a></li>
		<li><a href="#">GSS-EBSBU</a></li>
		<li><a href="#">GSS-CWEP</a></li>
		<li><a href="#">GSS-KWPI</a></li>
		<li><a href="#">GSS-KWPI</a></li>
	</ul>
	</span>
	</span>
	<span class="sg-input-group__addon">/</span>
	<span class="sg-input-group__cell"><input type="text" placeholder="sooge-ui-kit" class="sg-input"></span>
</div>
  • Item 01
  • Item 02
  • Item 03
<ul class="sg-list">
	<li class="sg-item">
		<span class="sg-item__content">Item 01</span>
	</li>
	<li class="sg-item">
		<span class="sg-item__content">Item 02</span>
	</li>
	<li class="sg-item">
		<span class="sg-item__content">Item 03</span>
	</li>
</ul>

Add badge at right side.

<ul class="sg-list">
	<li class="sg-item">
		<div class="sg-item__content sg-cell-group">
			<div class="sg-content__txt sg-cell">
				Item 01
			</div>
			<div class="sg-content__last sg-cell">
				<span class="sg-badge">99+</span>
			</div>
		</div>
	</li>
	<li class="sg-item">
		<div class="sg-item__content sg-cell-group">
			<div class="sg-content__txt sg-cell">
				Item 02
			</div>
			<div class="sg-content__last sg-cell">
				<span class="sg-badge">6</span>
			</div>
		</div>
	</li>
	<li class="sg-item">
		<a href="" class="sg-item__content sg-item__link sg-cell-group">
			<div class="sg-content__txt sg-cell">
				Item 03
			</div>
			<div class="sg-content__last sg-cell">
				<span class="sg-badge">23</span>
			</div>
			<i class="icon-chevron-right"></i>
		</a>
	</li>
</ul>
<ul class="sg-list">
	<li class="sg-item">
		<div class="sg-item__content">
			<div class="sg-content__txt">
				<h2>Title 01</h2>
				<p>Subtitle 01</p>
			</div>
		</div>
	</li>
	<li class="sg-item">
		<a href="" class="sg-item__content sg-item__link">
			<div class="sg-content__txt">
				<h2>Title 02</h2>
				<p>Subtitle 02</p>
			</div>
			<i class="icon-chevron-right"></i>
		</a>
	</li>
	<li class="sg-item">
		<div class="sg-item__content sg-cell-group">
			<div class="sg-content__txt sg-cell">
				<h2>Title 03</h2>
				<p>Subtitle 03</p>
			</div>
			<div class="sg-content__last sg-cell">
				<span class="sg-badge">99+</span>
			</div>
		</div>
	</li>
</ul>

Add a avatar at begining.

<ul class="sg-list">
	<li class="sg-item">
		<div class="sg-item__content">
			<div class="demo-avatar sg-avatar sg-avatar--large sg-avatar--circle"></div>
			<div class="sg-content__txt sg-item-avatar--large">
				<h2>Title 01</h2>
				<p>Subtitle 01</p>
			</div>
		</div>
	</li>
	<li class="sg-item">
		<a href="" class="sg-item__content sg-item__link">
			<div class="demo-avatar sg-avatar sg-avatar--large"></div>
			<div class="sg-content__txt sg-item-avatar--large">
				<h2>Title 02</h2>
				<p>Subtitle 02</p>
			</div>
			<i class="icon-chevron-right sg-pull--right"></i>
		</a>
	</li>
	<li class="sg-item">
		<div class="sg-item__content sg-cell-group">
			<div class="sg-cell">
				<div class="demo-avatar sg-avatar sg-avatar--large"></div>
				<div class="sg-content__txt sg-item-avatar--large">
					<h2>Title 03</h2>
					<p>Subtitle 03</p>
				</div>
			</div>
			<div class="sg-content__last sg-cell">
				<span class="sg-badge">99+</span>
			</div>
		</div>
	</li>
</ul>






<ul class="sg-list sg-list--dark">
	<li class="sg-item">
		<a href="" class="sg-item__content sg-item__link">
			Item 01
			<i class="icon-chevron-right sg-pull--right"></i>
		</a>
	</li>
	<li class="sg-item">
		<a href="" class="sg-item__content sg-item__link">
			Item 02
			<i class="icon-chevron-right"></i>
		</a>
	</li>
	<li class="sg-item">
		<a href="" class="sg-item__content sg-item__link">
			Item 03
			<i class="icon-chevron-right sg-pull--right"></i>
		</a>
	</li>
</ul>

<br/><br/>

<ul class="sg-list sg-list--dark">
	<li class="sg-item">
		<div class="sg-item__content sg-cell-group">
			<div class="sg-content__txt sg-cell">
				Item 01
			</div>
			<div class="sg-content__last sg-cell">
				<span class="sg-badge">99+</span>
			</div>
		</div>
	</li>
	<li class="sg-item">
		<div class="sg-item__content sg-cell-group">
			<div class="sg-content__txt sg-cell">
				Item 02
			</div>
			<div class="sg-content__last sg-cell">
				<span class="sg-badge">6</span>
			</div>
		</div>
	</li>
	<li class="sg-item">
		<a href="" class="sg-item__content sg-item__link sg-cell-group">
			<div class="sg-content__txt sg-cell">
				Item 03
			</div>
			<div class="sg-content__last sg-cell">
				<span class="sg-badge">23</span>
			</div>
			<i class="icon-chevron-right"></i>
		</a>
	</li>
</ul>

<br/><br/>

<ul class="sg-list sg-list--dark">
	<li class="sg-item">
		<div class="sg-item__content">
			<div class="sg-content__txt">
				<h2>Title 01</h2>
				<p>Subtitle 01</p>
			</div>
		</div>
	</li>
	<li class="sg-item">
		<a href="" class="sg-item__content sg-item__link">
			<div class="sg-content__txt">
				<h2>Title 02</h2>
				<p>Subtitle 02</p>
			</div>
			<i class="icon-chevron-right"></i>
		</a>
	</li>
	<li class="sg-item">
		<div class="sg-item__content sg-cell-group">
			<div class="sg-content__txt sg-cell">
				<h2>Title 03</h2>
				<p>Subtitle 03</p>
			</div>
			<div class="sg-content__last sg-cell">
				<span class="sg-badge">99+</span>
			</div>
		</div>
	</li>
</ul>

<br/><br/>

<ul class="sg-list sg-list--dark">
	<li class="sg-item">
		<div class="sg-item__content">
			<div class="demo-avatar sg-avatar sg-avatar--large sg-avatar--circle"></div>
			<div class="sg-content__txt sg-item-avatar--large">
				<h2>Title 01</h2>
				<p>Subtitle 01</p>
			</div>
		</div>
	</li>
	<li class="sg-item">
		<a href="" class="sg-item__content sg-item__link">
			<div class="demo-avatar sg-avatar sg-avatar--large"></div>
			<div class="sg-content__txt sg-item-avatar--large">
				<h2>Title 02</h2>
				<p>Subtitle 02</p>
			</div>
			<i class="icon-chevron-right sg-pull--right"></i>
		</a>
	</li>
	<li class="sg-item">
		<div class="sg-item__content sg-cell-group">
			<div class="sg-cell">
				<div class="demo-avatar sg-avatar sg-avatar--large"></div>
				<div class="sg-content__txt sg-item-avatar--large">
					<h2>Title 03</h2>
					<p>Subtitle 03</p>
				</div>
			</div>
			<div class="sg-content__last sg-cell">
				<span class="sg-badge">99+</span>
			</div>
		</div>
	</li>
</ul>

Basic radio style

<label class="demo-radio-inline sg-radio-label">
	<input type="radio" class="sg-radio" name="basic-radio" checked/>
	<span>Radio 1</span>
</label>

<label class="demo-radio-inline sg-radio-label">
	<input type="radio" class="sg-radio" name="basic-radio" />
	<span>Radio 2</span>
</label>
<label class="demo-radio-inline sg-radio-label">
	<input type="radio" class="sg-radio" name="basic-radio" />
	<span>Radio 3</span>
</label>
<label class="demo-radio-inline sg-radio-label">
	<input type="radio" class="sg-radio" name="basic-radio" />
	<span>Radio 4</span>
</label>

disable radio

<label class="demo-radio-inline sg-radio-label sg-state--disable" for="radio-5">
	<input type="radio" class="sg-radio" name="basic-radio-2" id="radio-5"/>
	<span>Radio 5</span>
</label>

<label class="demo-radio-inline sg-radio-label sg-state--disable" for="radio-6">
	<input type="radio" class="sg-radio" name="basic-radio-2" id="radio-6" checked/>
	<span>Radio 6</span>
</label>

Basic switch style

<div class="sg-switches demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-1" />
	<label class="sg-switch-label" for="switch-1">
  	<div class="sg-switch-btn"></div>
  </label>
</div>

<div class="sg-switches demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-2" checked/>
	<label class="sg-switch-label" for="switch-2">
  	<div class="sg-switch-btn"></div>
  </label>
</div>

<div class="sg-switches sg-switches--circle demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-3" />
	<label class="sg-switch-label" for="switch-3">
  	<div class="sg-switch-btn"></div>
  </label>
</div>

<div class="sg-switches sg-switches--circle demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-4" checked/>
	<label class="sg-switch-label" for="switch-4">
  	<div class="sg-switch-btn"></div>
  </label>
</div>

<div class="sg-switches demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-5" disabled/>
	<label class="sg-switch-label" for="switch-5">
  	<div class="sg-switch-btn"></div>
  </label>
</div>

<div class="sg-switches sg-switches--circle demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-6" disabled/>
	<label class="sg-switch-label" for="switch-6">
  	<div class="sg-switch-btn"></div>
  </label>
</div>

Switch with icon in button or background


<div class="sg-switches sg-switches--icon demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-7" />
	<label class="sg-switch-label" for="switch-7">
  	<div class="sg-switch-btn">
      <i class="icon-wifi"></i>
    </div>
  </label>
</div>

<div class="sg-switches sg-switches--icon demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-8" checked/>
	<label class="sg-switch-label" for="switch-8">
  	<div class="sg-switch-btn">
      <i class="icon-wifi"></i>
    </div>
  </label>
</div>

<div class="sg-switches sg-switches--circle sg-switches--icon demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-9" />
	<label class="sg-switch-label" for="switch-9">
  	<div class="sg-switch-btn">
      <i class="icon-wifi"></i>
    </div>
  </label>
</div>

<div class="sg-switches sg-switches--circle sg-switches--icon demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-10" checked/>
	<label class="sg-switch-label" for="switch-10">
  	<div class="sg-switch-btn">
      <i class="icon-wifi"></i>
    </div>
  </label>
</div>

<div class="sg-switches sg-switches--icon demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-11" disabled/>
	<label class="sg-switch-label" for="switch-11">
  	<div class="sg-switch-btn">
      <i class="icon-wifi"></i>
    </div>
  </label>
</div>

<div class="sg-switches sg-switches--circle sg-switches--icon demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-12" disabled/>
	<label class="sg-switch-label" for="switch-12">
  	<div class="sg-switch-btn">
      <i class="icon-wifi"></i>
    </div>
  </label>
</div>

<br/>

<div class="sg-switches sg-switches--circle sg-switches--txt demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-13" />
	<label class="sg-switch-label" for="switch-13">
    <div class="text"><i class="icon-wifi"></i></div>
    <div class="sg-switch-btn"></div>
  </label>
</div>

<div class="sg-switches sg-switches--circle sg-switches--txt demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-14" />
	<label class="sg-switch-label" for="switch-14">
    <div class="text off">Off</div>
    <div class="text on">On</div>
    <div class="sg-switch-btn"></div>
  </label>
</div>

<div class="sg-switches sg-switches--circle sg-switches--txt demo-switches--example">
	<input class="sg-switch-input" type="checkbox" id="switch-15" />
	<label class="sg-switch-label" for="switch-15">
    <div class="text off"><i class="icon-close"></i></div>
    <div class="text on"><i class="icon-check"></i></div>
    <div class="sg-switch-btn"></div>
  </label>
</div>
Caption
NameAgeGender
Jennifer30Female
Oliver18Male
Jordan53Male
<table class="sg-table">
	<caption>Caption</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Gender</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Jennifer</td>
			<td>30</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Oliver</td>
			<td>18</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Jordan</td>
			<td>53</td>
			<td>Male</td>
		</tr>
	</tbody>
</table>

Add border-bottom in each row.

Caption
NameAgeGender
Jennifer30Female
Oliver18Male
Jordan53Male
Caption
NameAgeGender
Jennifer30Female
Oliver18Male
Jordan53Male
<table class="sg-table sg-table--bordered">
	<caption>Caption</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Gender</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Jennifer</td>
			<td>30</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Oliver</td>
			<td>18</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Jordan</td>
			<td>53</td>
			<td>Male</td>
		</tr>
	</tbody>
</table>

<table class="sg-table sg-table--bordered sg-table--bordered__vertical">
	<caption>Caption</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Gender</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Jennifer</td>
			<td>30</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Oliver</td>
			<td>18</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Jordan</td>
			<td>53</td>
			<td>Male</td>
		</tr>
	</tbody>
</table>

Add background color in each odd row.

Caption
NameAgeGender
Jennifer30Female
Oliver18Male
Jordan53Male
<table class="sg-table sg-table--striped sg-table--bordered sg-table--bordered__vertical">
	<caption>Caption</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Gender</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Jennifer</td>
			<td>30</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Oliver</td>
			<td>18</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Jordan</td>
			<td>53</td>
			<td>Male</td>
		</tr>
	</tbody>
</table>

Change background color of rows whrn hovering.

Caption
NameAgeGender
Jennifer30Female
Oliver18Male
Jordan53Male
<table class="sg-table sg-table--highlight sg-table--bordered sg-table--bordered__vertical">
	<caption>Caption</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Gender</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Jennifer</td>
			<td>30</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Oliver</td>
			<td>18</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Jordan</td>
			<td>53</td>
			<td>Male</td>
		</tr>
	</tbody>
</table>

Table horizontally scrollable on small screen.

Caption
NameAgeGender
Jennifer30Female
Oliver18Male
Jordan53Male
Neil24Male
Grace18Female
Evan27Male
Woody20Male
Jane18Female
Robert21Male
<table class="sg-table sg-table--responsive sg-table--bordered  sg-table--striped  sg-table--highlight">
	<caption>Caption</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Gender</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Jennifer</td>
			<td>30</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Oliver</td>
			<td>18</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Jordan</td>
			<td>53</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Neil</td>
			<td>24</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Grace</td>
			<td>18</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Evan</td>
			<td>27</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Woody</td>
			<td>20</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Jane</td>
			<td>18</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Robert</td>
			<td>21</td>
			<td>Male</td>
		</tr>
	</tbody>
</table>

Using sg-txt--center or sg-txt--right to change align.

Caption
NameAgeGender
Jennifer30Female
Oliver18Male
Jordan53Male
<table class="sg-table sg-txt--center">
	<caption>Caption</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>Gender</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Jennifer</td>
			<td>30</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Oliver</td>
			<td>18</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Jordan</td>
			<td>53</td>
			<td>Male</td>
		</tr>
	</tbody>
</table>

Example for form elements in Table.

Caption
NameAgeGenderDescriptionothers
Jennifer30FemaleCutenone
Oliver18MaleCutenone
Jordan53MaleCutenone
<table class="sg-table sg-table--headfixed sg-table--highlight sg-table--bordered sg-table--bordered__th-bordered">
	<caption>Caption</caption>
	<thead>
		<tr>
			<th class="sg-table-th--headfixed">
				<label class="demo-checkbox-inline sg-checkbox-label">
          <input type="checkbox" class="sg-checkbox" name="checkbox-table-all" id="checkbox-table-all" />
          <span></span>
        </label>
			</th>
			<th>Name</th>
			<th>Age</th>
			<th>Gender</th>
			<th>Description</th>
			<th>others</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<label class="demo-checkbox-inline sg-checkbox-label">
          <input type="checkbox" class="sg-checkbox" name="checkbox-table" id="checkbox-table-td-1" />
          <span></span>
        </label>
			</td>
			<td>Jennifer</td>
			<td>30</td>
			<td>Female</td>
			<td>Cute</td>
			<td>none</td>
		</tr>
		<tr>
			<td>
				<label class="demo-checkbox-inline sg-checkbox-label">
          <input type="checkbox" class="sg-checkbox" name="checkbox-table" id="checkbox-table-td-2" />
          <span></span>
        </label>
			</td>
			<td>Oliver</td>
			<td>18</td>
			<td>Male</td>
			<td>Cute</td>
			<td>none</td>
		</tr>
		<tr>
			<td>
				<label class="demo-checkbox-inline sg-checkbox-label">
          <input type="checkbox" class="sg-checkbox" name="checkbox-table" id="checkbox-table-td-3" />
          <span></span>
        </label>
			</td>
			<td>Jordan</td>
			<td>53</td>
			<td>Male</td>
			<td>Cute</td>
			<td>none</td>
		</tr>
	</tbody>
</table>

Basic tabs.

Tab 1
Tab 2
Tab 3
<div class="sg-tab-wrapper">
	<div class="sg-tab sg-state--active">
		<span class="sg-inline-txt">Tab 1</span>
	</div>
	<div class="sg-tab">
		<span class="sg-inline-txt">Tab 2</span>
	</div>
	<div class="sg-tab">
		<span class="sg-inline-txt">Tab 3</span>
	</div>
</div>

Basic tabs.

Tab 1
Tab 2
Tab 3
<div class="sg-tab-wrapper sg-txt--right">
	<div class="sg-tab sg-state--active">
		<span class="sg-inline-txt">Tab 1</span>
	</div>
	<div class="sg-tab">
		<span class="sg-inline-txt">Tab 2</span>
	</div>
	<div class="sg-tab">
		<span class="sg-inline-txt">Tab 3</span>
	</div>
</div>

Tabs with badge.

Tab 199+
Tab 2
Tab 3
<div class="sg-tab-wrapper">
	<div class="sg-tab sg-state--active">
		<span class="sg-inline-txt">Tab 1</span>
		<span class="sg-badge">99+</span>
	</div>
	<div class="sg-tab">
		<span class="sg-inline-txt">Tab 2</span>
	</div>
	<div class="sg-tab">
		<span class="sg-inline-txt">Tab 3</span>
	</div>
</div>

Tabs with colored-background.

Tab 199+
Tab 2
Tab 399+
<div class="sg-tab-wrapper sg-tab-light">
	<div class="sg-tab sg-state--active">
		<span class="sg-inline-txt">Tab 1</span>
		<span class="sg-badge">99+</span>
	</div>
	<div class="sg-tab">
		<span class="sg-inline-txt">Tab 2</span>
	</div>
	<div class="sg-tab">
		<span class="sg-inline-txt">Tab 3</span>
		<span class="sg-badge">99+</span>
	</div>
</div>

Tabs with colored-background.

Tab 199+
Tab 2
Tab 399+
<div class="sg-tab-wrapper sg-tab-dark">
	<div class="sg-tab sg-state--active">
		<span class="sg-inline-txt">Tab 1</span>
		<span class="sg-badge">99+</span>
	</div>
	<div class="sg-tab">
		<span class="sg-inline-txt">Tab 2</span>
	</div>
	<div class="sg-tab">
		<span class="sg-inline-txt">Tab 3</span>
		<span class="sg-badge">99+</span>
	</div>
</div>

Basic tooltip.

Position Top
Position Left
Position Right
Position Bottom
<div class="sg-btn sg-btn-default" data-tooltip="show words on top" data-position="top">Position Top</div>
<div class="sg-btn sg-btn-default" data-tooltip="show words on left" data-position="left">Position Left</div>
<div class="sg-btn sg-btn-default" data-tooltip="show words on right" data-position="right">Position Right</div>
<div class="sg-btn sg-btn-default" data-tooltip="show words on bottom" data-position="bottom">Position Bottom</div>