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

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

Size

Display

Card

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

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

checkbox1 checkbox2

              
                checkbox

Radio

radio1 radio2

              
                radio

Table Form

input required
Select
Checkbox	checkbox1 checkbox2
Radio	radio1 radio2

Error

必須項目です

Grid

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

          
            
              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

          
            
              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

Style	c-menu--border

Nav

Modifier

Size	c-nav--large c-nav--medium c-nav--small
Length	c-nav--len3 c-nav--len4 c-nav--len5

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