Typography
HTML Headings Tags
HTML tags define default Heading styles.
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
Heading Classes
Heading classes when typography style doesn't match the default HTML tag.
v2-heading-style-h1

見出しのサンプル

v2-heading-style-h2

見出しのサンプル

v2-heading-style-h3

見出しのサンプル

v2-heading-style-h4

見出しのサンプル

v2-heading-style-h5

見出しのサンプル

v2-heading-style-h6

見出しのサンプル

v2-text-tagline

見出しのサンプル

Other HTML Tags
HTML tags define default text styles.
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists
  • No bullet list

  • No bullet list

All Unordered Lists
  • No bullet list

  • No bullet list

All Ordered Lists
  1. No bullet list

  2. No bullet list

  3. No bullet list

Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.
v2-text-size-xlarge

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-xlarge
v2-text-weight-medium

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-xlarge
v2-text-weight-bold

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-large

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-large
v2-text-weight-medium

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-large
v2-text-weight-bold

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-medium

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-medium
v2-text-weight-medium

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-medium
v2-text-weight-bold

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-regular

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-regular
v2-text-weight-medium

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-regular
v2-text-weight-bold

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-small

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-small
v2-text-weight-medium

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-small
v2-text-weight-bold

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-tiny

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-tiny
v2-text-weight-medium

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

v2-text-size-tiny
v2-text-weight-bold

The quick brown fox jumps over the lazy dog. これはサンプルテキストです。

Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
v2-text-weight-bold
text-weight-bold (700)
v2-text-weight-medium
text-weight-medium (500)
v2-text-weight-regular
text-weight-regular (400)
Text Styles
Text style classes when typography style doesn't match the default HTML tag.
v2-text-style-italic
text-style-italic
v2-text-style-strikethrough
text-style-strikethrough
v2-text-style-allcaps
text-style-allcaps
v2-text-style-nowrap
text-style-nowrap
v2-text-style-quote
text-style-quote
v2-text-style-link
v2-text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
v2-text-style-3lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
v2-text-style-muted
text-style-muted
v2-text-style-tagline
text-style-tagline
v2-text-color-white
text-color-white
Text Alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.
v2-text-align-left
text-align-left
v2-text-align-center
text-align-center
v2-text-align-right
text-align-right
Rich Text
v2-text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
Colors
Color
UI Elements
Buttons
v2-
button
v-2button
is-small
v-2button
is-secondary
v2-button
is-secondary
is-small
v2-button
is-icon
v2-button
is-small
is-icon
v2-button
is--icon
v2-button
is--icon
v2-button
is-secondary
is-icon
v2-button
is-secondary
is-small
is-icon
v2-button
is-link
v2-button
is-link
is-small
v2-button
is-link
is-icon
v2-button
is-link
is-small
is-icon
Other UI Elements
v2-tab-link
v2-category-filter-link
v2-slider-arrow
Tags
Linkable labels that categorize or highlight information on cards, products and posts
v2-tag
Tag
v2-tag
is-text
Tag
Form Elements
v2-form_field-label
v2-form_input
v2-form_input
is-text-area
v2-form_input
is-select-input
v2-form_checkbox
v2-form_radio
v2-button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons (Image)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom1

Effects
Box Shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
v2-shadow-card