Alert

Sed ut perspiciatis unde omnis iste natus error sit voluptatem
        
Sed ut perspiciatis unde omnis iste natus error sit voluptatem

Avatar

        

Modifier

Size c-avatar--small(60x60)
c-avatar--medium(80x80)
c-avatar--large(120x120)

Bar

Bar
        
Bar

Modifier

Shadow c-bar--shadow-top
c-bar--shadow-bottom
Size c-bar--medium
c-bar--small
Fixed c-bar--fixed-top
c-bar--fixed-bottom

Button

T

          
          T
          

Size

          
          
          
          
          
          

Display

          
          

Card

Title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia

Bottom

          

Title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia

Bottom

Clamp

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia

          

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia

Modifier

Size c-clamp--size-2
c-clamp--size-3
c-clamp--size-4
c-clamp--size-5

Container

Content
          
Content

Modifier

Size c-container--small
c-container--full

Form

Input required

              

Input required

Textarea

              

Select

              

Checkbox

              

Radio

              

Table Form

input required
Select
Checkbox
Radio
            
input required

Error

必須項目です

              

必須項目です

Grid

Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
          
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col
Col

Modifier

Vertical Align c-grid--top
c-grid--middle
c-grid--top
c-grid--stretch
c-grid--baseline
Align c-grid--left
c-grid--center
c-grid--right
c-grid--between
Other c-grid--row
c-grid--reverse
c-grid--gutters
c-grid--query

Hero

Hero Title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia

          

Hero Title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia

Image

Hero Title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia

          

Hero Title

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia

Modifier

Type c-hero--basic
c-hero--image
Animation c-hero--anim
Other c-hero--mt-large
c-hero--mt-middle
c-hero--mt-small

Label

Default Highlight
          Default
          Highlight
        

Media

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia

          

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia

Table

Basic

title description
title description
title description
title description
            
title description
title description
title description
title description

Separate

Title1 Title2 Title3 Title4 Title5
description1 description2 description3 description4 description5
description1 description2 description3 description4 description5
            
Title1 Title2 Title3 Title4 Title5
description1 description2 description3 description4 description5
description1 description2 description3 description4 description5

Overflow

Type Color Price Area
Apple Red 200 Aomori
Orange Orange 350 Ehime
Grape Purple 400 Yamanasi
Melon Yellow green 800 hokkaido
            
Type Color Price Area
Apple Red 200 Aomori
Orange Orange 350 Ehime
Grape Purple 400 Yamanasi
Melon Yellow green 800 hokkaido

Text

Primary

Secondary

Highlight

White

          

Primary

Secondary

Highlight

White