Utilities

Avatar

Basic

<div class="demo-avatar sg-avatar"></div>
<img class="demo-avatar sg-avatar" src="./img/avatar-pic-01.png" />
<img class="demo-avatar sg-avatar" src="./img/avatar-pic-02.png" />
<img class="demo-avatar sg-avatar" src="./img/avatar-pic-03.png" />
<img class="demo-avatar sg-avatar" src="./img/avatar-pic-04.png" />

Circle Avatar

<div class="demo-avatar sg-avatar sg-avatar--circle"></div>
<img class="demo-avatar sg-avatar sg-avatar--circle" src="./img/avatar-pic-01.png" />
<img class="demo-avatar sg-avatar sg-avatar--circle" src="./img/avatar-pic-02.png" />
<img class="demo-avatar sg-avatar sg-avatar--circle" src="./img/avatar-pic-03.png" />
<img class="demo-avatar sg-avatar sg-avatar--circle" src="./img/avatar-pic-04.png" />

Size

<div class="demo-avatar-size-row">
	<img class="demo-avatar sg-avatar sg-avatar--xsmall" src="./img/avatar-pic-01.png" />
	<img class="demo-avatar sg-avatar sg-avatar--small" src="./img/avatar-pic-02.png" />
	<img class="demo-avatar sg-avatar" src="./img/avatar-pic-03.png" />
	<img class="demo-avatar sg-avatar sg-avatar--large" src="./img/avatar-pic-04.png" />
	<img class="demo-avatar sg-avatar sg-avatar--xlarge" src="./img/avatar-pic-05.png" />
</div>
<div class="demo-avatar-size-row">
	<img class="demo-avatar sg-avatar sg-avatar--xsmall sg-avatar--circle" src="./img/avatar-pic-01.png" />
	<img class="demo-avatar sg-avatar sg-avatar--small sg-avatar--circle" src="./img/avatar-pic-02.png" />
	<img class="demo-avatar sg-avatar sg-avatar--circle" src="./img/avatar-pic-03.png" />
	<img class="demo-avatar sg-avatar sg-avatar--large sg-avatar--circle" src="./img/avatar-pic-04.png" />
	<img class="demo-avatar sg-avatar sg-avatar--xlarge sg-avatar--circle" src="./img/avatar-pic-05.png" />
</div>

With Badge

99+
99+
99+
99+
99+
9
99
99+
99+
99+
99+
99+
99+
99+
99+
99+
99+
99+
9
99
99+
99+
99+
99+
99+
99+
<!-- circle -->
<div class="demo-avatar-badge-row">
	<div class="demo-avatar-badge sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--xsmall">
		<img class="sg-avatar sg-avatar--xsmall sg-avatar--circle" src="./img/avatar-pic-01.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--small">
		<img class="sg-avatar sg-avatar--small sg-avatar--circle" src="./img/avatar-pic-02.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--circle">
		<img class="sg-avatar sg-avatar--circle" src="./img/avatar-pic-03.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--large">
		<img class="sg-avatar sg-avatar--large sg-avatar--circle" src="./img/avatar-pic-04.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--xlarge">
		<img class="sg-avatar sg-avatar--xlarge sg-avatar--circle" src="./img/avatar-pic-05.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--xlarge">
		<img class="sg-avatar sg-avatar--xlarge sg-avatar--circle" src="./img/avatar-pic-05.png" />
		<span class="badge">9</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--xlarge">
		<img class="sg-avatar sg-avatar--xlarge sg-avatar--circle" src="./img/avatar-pic-05.png" />
		<span class="badge">99</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--xlarge">
		<img class="sg-avatar sg-avatar--xlarge sg-avatar--circle" src="./img/avatar-pic-05.png" />
		<span class="badge">99+</span>
	</div>
</div>
<!-- circle with point-->
<div class="demo-avatar-badge-row">
	<div class="demo-avatar-badge sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--xsmall sg-avatar-badge--point">
		<img class="sg-avatar sg-avatar--xsmall sg-avatar--circle" src="./img/avatar-pic-01.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--small sg-avatar-badge--point">
		<img class="sg-avatar sg-avatar--small sg-avatar--circle" src="./img/avatar-pic-02.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--point">
		<img class="sg-avatar sg-avatar--circle" src="./img/avatar-pic-03.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--large sg-avatar-badge--point">
		<img class="sg-avatar sg-avatar--large sg-avatar--circle" src="./img/avatar-pic-04.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--circle sg-avatar-badge--xlarge sg-avatar-badge--point">
		<img class="sg-avatar sg-avatar--xlarge sg-avatar--circle" src="./img/avatar-pic-05.png" />
		<span class="badge badge--circle">99+</span>
	</div>
</div>
<!-- square -->
<div class="demo-avatar-badge-row">
	<div class="demo-avatar-badge sg-avatar-badge sg-avatar-badge--xsmall">
		<img class="sg-avatar sg-avatar--xsmall" src="./img/avatar-pic-01.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge sg-avatar-badge sg-avatar-badge--small">
		<img class="sg-avatar sg-avatar--small" src="./img/avatar-pic-02.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge">
		<img class="sg-avatar" src="./img/avatar-pic-03.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--large">
		<img class="sg-avatar sg-avatar--large" src="./img/avatar-pic-04.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--xlarge">
		<img class="sg-avatar sg-avatar--xlarge" src="./img/avatar-pic-05.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--xlarge">
		<img class="sg-avatar sg-avatar--xlarge" src="./img/avatar-pic-05.png" />
		<span class="badge">9</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--xlarge">
		<img class="sg-avatar sg-avatar--xlarge" src="./img/avatar-pic-05.png" />
		<span class="badge">99</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--xlarge">
		<img class="sg-avatar sg-avatar--xlarge" src="./img/avatar-pic-05.png" />
		<span class="badge">99+</span>
	</div>
</div>
<!-- square with point-->
<div class="demo-avatar-badge-row">
	<div class="demo-avatar-badge sg-avatar-badge sg-avatar-badge--xsmall sg-avatar-badge--point">
		<img class="sg-avatar sg-avatar--xsmall" src="./img/avatar-pic-01.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge sg-avatar-badge sg-avatar-badge--small sg-avatar-badge--point">
		<img class="sg-avatar sg-avatar--small" src="./img/avatar-pic-02.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--point">
		<img class="sg-avatar" src="./img/avatar-pic-03.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--large sg-avatar-badge--point">
		<img class="sg-avatar sg-avatar--large" src="./img/avatar-pic-04.png" />
		<span class="badge badge--circle">99+</span>
	</div>
	<div class="demo-avatar-badge  sg-avatar-badge sg-avatar-badge--xlarge sg-avatar-badge--point">
		<img class="sg-avatar sg-avatar--xlarge" src="./img/avatar-pic-05.png" />
		<span class="badge badge--circle">99+</span>
	</div>
</div>

Clearfix

<div class="sg-clearfix">
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
</div>

<div class="sg-clearfix">
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
</div>

Float

<div>
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
</div>

<div>
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
	<div class="demo-avatar sg-avatar sg-pull--left"></div>
</div>

Grid System

Cell

sg-cell-group is a 12-grid system using display:table.

4
4
4
Cell fit with its content
fit content
normal
normal
Cell stretch width
full content
normal
normal
<div class="demo-cell-group sg-cell-group">
	<div class="sg-cell">4</div>
	<div class="sg-cell">4</div>
	<div class="sg-cell">4</div>
</div>

<div class="demo-btn-title">Cell fit with its content</div>

<div class="demo-cell-group sg-cell-group">
	<div class="sg-cell sg-cell--fit">fit content</div>
	<div class="sg-cell">normal</div>
	<div class="sg-cell">normal</div>
</div>

<div class="demo-btn-title">Cell stretch width</div>

<div class="demo-cell-group sg-cell-group">
	<div class="sg-cell sg-cell--full">full content</div>
	<div class="sg-cell">normal</div>
	<div class="sg-cell">normal</div>
</div>

Cell Fixed

If you want fixed width of cell, add "sg-cell-group-fixed"

1
2
3
4
5
6
7
8
9
10
11
12
2
10
2
10
2
10
3
4
5
<div class="demo-cell-group sg-cell-group sg-cell--fixed">
	<div class="sg-cell sg-cell-1">1</div>
	<div class="sg-cell sg-cell-1">2</div>
	<div class="sg-cell sg-cell-1">3</div>
	<div class="sg-cell sg-cell-1">4</div>
	<div class="sg-cell sg-cell-1">5</div>
	<div class="sg-cell sg-cell-1">6</div>
	<div class="sg-cell sg-cell-1">7</div>
	<div class="sg-cell sg-cell-1">8</div>
	<div class="sg-cell sg-cell-1">9</div>
	<div class="sg-cell sg-cell-1">10</div>
	<div class="sg-cell sg-cell-1">11</div>
	<div class="sg-cell sg-cell-1">12</div>
</div>

<div class="demo-cell-group sg-cell-group sg-cell--fixed">
	<div class="sg-cell sg-cell-2">2</div>
	<div class="sg-cell sg-cell-10">10</div>
</div>

<div class="demo-cell-group sg-cell-group sg-cell--fixed">
	<div class="sg-cell">2</div>
	<div class="sg-cell sg-cell-10">10</div>
</div>

<div class="demo-cell-group sg-cell-group sg-cell--fixed">
	<div class="sg-cell sg-cell-2">2</div>
	<div class="sg-cell">10</div>
</div>

<div class="demo-cell-group sg-cell-group">
	<div class="sg-cell sg-cell-3">3</div>
	<div class="sg-cell sg-cell-4">4</div>
	<div class="sg-cell">5</div>
</div>

Cell Rwd

cell RWD

4-md6-xs12
8-md6-xs12
<div class="demo-cell-group sg-cell-group">
	<div class="sg-cell sg-cell-4 sg-cell-md-6 sg-cell-xs-12">4-md6-xs12</div>
	<div class="sg-cell sg-cell-8 sg-cell-md-6 sg-cell-xs-12">8-md6-xs12</div>
</div>

Grid

sg-col is a 12-grid system using float-left.

3-md6-xs12
3-md6-xs12
3-md6-xs12
3-md6-xs12
<div class="demo-cell-group sg-row">
	<div class="sg-col sg-col-3 sg-col-md-6 sg-col-xs-12">3-md6-xs12</div>
	<div class="sg-col sg-col-3 sg-col-md-6 sg-col-xs-12">3-md6-xs12</div>
	<div class="sg-col sg-col-3 sg-col-md-6 sg-col-xs-12">3-md6-xs12</div>
	<div class="sg-col sg-col-3 sg-col-md-6 sg-col-xs-12">3-md6-xs12</div>
</div>

Scrollable

sg-scroll--x: horizontally scrollable
  • 1____________________________________
  • 2____________________________________
  • 3____________________________________
  • 4____________________________________
  • 5____________________________________
  • 6____________________________________
  • 7____________________________________
  • 8____________________________________
  • 9____________________________________
  • 10____________________________________
sg-scroll--y: vertically scrollable
  • 1____________________________________
  • 2____________________________________
  • 3____________________________________
  • 4____________________________________
  • 5____________________________________
  • 6____________________________________
  • 7____________________________________
  • 8____________________________________
  • 9____________________________________
  • 10____________________________________
sg-scroll: horizontally and vertically scrollable
  • 1____________________________________
  • 2____________________________________
  • 3____________________________________
  • 4____________________________________
  • 5____________________________________
  • 6____________________________________
  • 7____________________________________
  • 8____________________________________
  • 9____________________________________
  • 10____________________________________
sg-scroll--frozen: not scrollable
  • 1____________________________________
  • 2____________________________________
  • 3____________________________________
  • 4____________________________________
  • 5____________________________________
  • 6____________________________________
  • 7____________________________________
  • 8____________________________________
  • 9____________________________________
  • 10____________________________________
<div class="demo-btn-title">sg-scroll--x: horizontally scrollable</div>
<div class="demo-scrollshadow sg-scroll--x">
	<ul>
		<li>1____________________________________</li>
		<li>2____________________________________</li>
		<li>3____________________________________</li>
		<li>4____________________________________</li>
		<li>5____________________________________</li>
		<li>6____________________________________</li>
		<li>7____________________________________</li>
		<li>8____________________________________</li>
		<li>9____________________________________</li>
		<li>10____________________________________</li>
	</ul>
</div>

<div class="demo-btn-title">sg-scroll--y: vertically scrollable</div>
<div class="demo-scrollshadow sg-scroll--y">
	<ul>
		<li>1____________________________________</li>
		<li>2____________________________________</li>
		<li>3____________________________________</li>
		<li>4____________________________________</li>
		<li>5____________________________________</li>
		<li>6____________________________________</li>
		<li>7____________________________________</li>
		<li>8____________________________________</li>
		<li>9____________________________________</li>
		<li>10____________________________________</li>
	</ul>
</div>

<div class="demo-btn-title">sg-scroll: horizontally and vertically scrollable</div>
<div class="demo-scrollshadow sg-scroll">
	<ul>
		<li>1____________________________________</li>
		<li>2____________________________________</li>
		<li>3____________________________________</li>
		<li>4____________________________________</li>
		<li>5____________________________________</li>
		<li>6____________________________________</li>
		<li>7____________________________________</li>
		<li>8____________________________________</li>
		<li>9____________________________________</li>
		<li>10____________________________________</li>
	</ul>
</div>

<div class="demo-btn-title">sg-scroll--frozen: not scrollable</div>
<div class="demo-scrollshadow sg-scroll--frozen">
	<ul>
		<li>1____________________________________</li>
		<li>2____________________________________</li>
		<li>3____________________________________</li>
		<li>4____________________________________</li>
		<li>5____________________________________</li>
		<li>6____________________________________</li>
		<li>7____________________________________</li>
		<li>8____________________________________</li>
		<li>9____________________________________</li>
		<li>10____________________________________</li>
	</ul>
</div>

Shadow

Basic

<div class="demo-shadow sg-shadow__1dp"></div>
<div class="demo-shadow sg-shadow__2dp"></div>
<div class="demo-shadow sg-shadow__3dp"></div>
<div class="demo-shadow sg-shadow__4dp"></div>
<div class="demo-shadow sg-shadow__5dp"></div>

Blur

<div class="demo-shadow sg-shadow--blur__1dp"></div>
<div class="demo-shadow sg-shadow--blur__2dp"></div>
<div class="demo-shadow sg-shadow--blur__3dp"></div>
<div class="demo-shadow sg-shadow--blur__4dp"></div>
<div class="demo-shadow sg-shadow--blur__5dp"></div>

Scroll

scroll shadow

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
<div class="demo-scrollshadow sg-scrollshadow-v">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>11</li>
		<li>12</li>
		<li>13</li>
		<li>14</li>
		<li>15</li>
		<li>16</li>
		<li>17</li>
		<li>18</li>
		<li>19</li>
		<li>20</li>
	</ul>
</div>
<div class="demo-scrollshadow demo-scrollshadow-h sg-scrollshadow-h">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>11</li>
		<li>12</li>
		<li>13</li>
		<li>14</li>
		<li>15</li>
		<li>16</li>
		<li>17</li>
		<li>18</li>
		<li>19</li>
		<li>20</li>
	</ul>
</div>

Text Align

<div style="width: 500px">
	<div class="sg-txt--left"><button class="sg-btn sg-btn-default">sg-txt--left</button></div>
	<div class="sg-txt--center"><button class="sg-btn sg-btn-default">sg-txt--center</button></div>
	<div class="sg-txt--right"><button class="sg-btn sg-btn-default">sg-txt--right</button></div>
</div>

Typography

Ellipsis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien leo, ornare varius finibus in.

<p class="sg-ellipsis demo-ellipsis">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien leo, ornare varius finibus in.
</p>

Headings

H1 Title

H2 Title

H3 Title

H4 Title

H5 Title
H6 Title
<h1>H1 Title</h1>
<h2>H2 Title</h2>
<h3>H3 Title</h3>
<h4>H4 Title</h4>
<h5>H5 Title</h5>
<h6>H6 Title</h6>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien leo, ornare varius finibus in, venenatis non nisl. Donec at leo metus. Vestibulum nec accumsan metus. Aliquam eleifend ante quis laoreet semper. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien leo, ornare varius finibus in, venenatis non nisl. Donec at leo metus. Vestibulum nec accumsan metus. Aliquam eleifend ante quis laoreet semper. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien leo, ornare varius finibus in, venenatis non nisl. Donec at leo metus. Vestibulum nec accumsan metus. Aliquam eleifend ante quis laoreet semper. Interdum et malesuada fames ac ante ipsum primis in faucibus.

<p class="sg-paragraphs" style="width: 500px;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien leo, ornare varius finibus in, venenatis non nisl. Donec at leo metus. Vestibulum nec accumsan metus. Aliquam eleifend ante quis laoreet semper. Interdum et malesuada fames ac ante
	ipsum primis in faucibus.
</p>
<p class="sg-paragraphs" style="width: 500px;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien leo, ornare varius finibus in, venenatis non nisl. Donec at leo metus. Vestibulum nec accumsan metus. Aliquam eleifend ante quis laoreet semper. Interdum et malesuada fames ac ante
	ipsum primis in faucibus.
</p>
<p class="sg-paragraphs" style="width: 500px;">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien leo, ornare varius finibus in, venenatis non nisl. Donec at leo metus. Vestibulum nec accumsan metus. Aliquam eleifend ante quis laoreet semper. Interdum et malesuada fames ac ante
	ipsum primis in faucibus.
</p>

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien leo, ornare varius finibus in, venenatis non nisl.

<p>
	<q class="sg-quote demo-quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sapien leo, ornare varius finibus in, venenatis non nisl.</q>
</p>

Ulol

  • Type-none
  • Type-none
  • Type-none
  • Type-disc
  • Type-disc
  • Type-disc
  • Type-circle
  • Type-circle
  • Type-circle
  • Type-square
  • Type-square
  • Type-square
  1. Type-decimal
  2. Type-decimal
  3. Type-decimal
  1. Type-upper-roman
  2. Type-upper-roman
  3. Type-upper-roman
  1. Type-lower-latin
  2. Type-lower-latin
  3. Type-lower-latin
  1. Type-upper-latin
  2. Type-upper-latin
  3. Type-upper-latin
  1. Type-cjk-ideographic
  2. Type-cjk-ideographic
  3. Type-cjk-ideographic
<div class="demo-ul-wrap">
	<ul class="sg-ul--none">
		<li>Type-none</li>
		<li>Type-none</li>
		<li>Type-none</li>
	</ul>

	<ul class="sg-ul--disc">
		<li>Type-disc</li>
		<li>Type-disc</li>
		<li>Type-disc</li>
	</ul>

	<ul class="sg-ul--circle">
		<li>Type-circle</li>
		<li>Type-circle</li>
		<li>Type-circle</li>
	</ul>

	<ul class="sg-ul--square">
		<li>Type-square</li>
		<li>Type-square</li>
		<li>Type-square</li>
	</ul>
</div>

<div class="demo-ol-wrap">
	<ol class="sg-ol--decimal">
		<li>Type-decimal</li>
		<li>Type-decimal</li>
		<li>Type-decimal</li>
	</ol>

	<ol class="sg-ol--upper-roman">
		<li>Type-upper-roman</li>
		<li>Type-upper-roman</li>
		<li>Type-upper-roman</li>
	</ol>

	<ol class="sg-ol--lower-latin">
		<li>Type-lower-latin</li>
		<li>Type-lower-latin</li>
		<li>Type-lower-latin</li>
	</ol>

	<ol class="sg-ol--upper-latin">
		<li>Type-upper-latin</li>
		<li>Type-upper-latin</li>
		<li>Type-upper-latin</li>
	</ol>

	<ol class="sg-ol--cjk-ideographic">
		<li>Type-cjk-ideographic</li>
		<li>Type-cjk-ideographic</li>
		<li>Type-cjk-ideographic</li>
	</ol>

</div>