Font
font-size
16px
20px
24px
28px
32px
36px
40px
44px
48px
52px
64px
font-weight
weight-100
weight-200
weight-300
weight-400
weight-500
weight-600
weight-700
Use:
| Class | Properties |
|---|---|
| font-size-16 | font-size: 16px; |
| font-size-20 | font-size: 20px; |
| font-size-24 | font-size: 24px; |
| font-size-28 | font-size: 28px; |
| font-size-32 | font-size: 32px; |
| font-size-36 | font-size: 36px; |
| font-size-40 | font-size: 40px; |
| font-size-44 | font-size: 44px; |
| font-size-48 | font-size: 48px; |
| font-size-54 | font-size: 54px; |
| font-size-64 | font-size: 64px; |
| Class | Properties |
|---|---|
| font-weight-100 | font-weight: 100; |
| font-weight-200 | font-weight: 200; |
| font-weight-300 | font-weight: 300; |
| font-weight-400 | font-weight: 400; |
| font-weight-500 | font-weight: 500; |
| font-weight-600 | font-weight: 600; |
| font-weight-700 | font-weight: 700; |
Color
black
orange
secondary
yellow
gray
light-gray
Text:
| Class | Properties |
|---|---|
| color-black | color: #000000; |
| color-white | color: #FFFFFF; |
| color-orange | color: #FD4B17; |
| color-secondary | color: #191D3B; |
| color-yellow | color: #FFDA12; |
| color-gray | color: #808080; |
| color-light-gray | color: #DEDEDE; |
Background:
| Class | Properties |
|---|---|
| background-black | background-color: #000000; |
| background-white | background-color: #FFFFFF; |
| background-orange | background-color: #FD4B17; |
| background-secondary | background-color: #191D3B; |
| background-yellow | background-color: #FFDA12; |
| background-gray | background-color: #808080; |
| background-light-gray | background-color: #DEDEDE; |
Border:
| Class | Properties |
|---|---|
| border-black | border-color: #000000; |
| border-white | border-color: #FFFFFF; |
| border-orange | border-color: #FD4B17; |
| border-secondary | border-color: #191D3B; |
| border-yellow | border-color: #FFDA12; |
| border-gray | border-color: #808080; |
| border-light-gray | border-color: #DEDEDE; |
Opacity:
| Class | Properties |
|---|---|
| opacity-15 | opacity: 0.15; |
| opacity-25 | opacity: 0.25; |
| opacity-35 | opacity: 0.25; |
| opacity-45 | opacity: 0.45; |
| opacity-55 | opacity: 0.55; |
| opacity-65 | opacity: 0.65; |
| opacity-75 | opacity: 0.75; |
| opacity-85 | opacity: 0.85; |
| opacity-95 | opacity: 0.95; |
Margin
Padding
Box
Border-Radius
Heading
h1. Heading-01
h2. Heading-02
h3. Heading-03
h4. Heading-04
h5. Heading-05
h6. Heading-06
Use:
| Category | HTML | Properties |
|---|---|---|
| H1 |
|
font-size: 3em; |
| H2 |
|
font-size: 2.4em; |
| H3 |
|
font-size: 2.1em; |
| H4 |
|
font-size: 1.8em; |
| H5 |
|
font-size: 1.5em; |
| H6 |
|
font-size: 1.2em; |
Paragraph
This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.
This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.
This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.
This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.This is a long paragraph.
Use:
| Category | HTML | Properties |
|---|---|---|
| Basic |
|
color:#555; line-height:1.5em; |
Text
Use:
| Category | HTML |
|---|---|
| Basic |
|
| Disabled |
|
| Color |
|
| Underline |
|
| Delete |
|
| Strong |
|
| Italic |
|
| Link |
|
Layout
Grid:
| Class | Properties | Description |
|---|---|---|
| grid-box | display: grid; | Grid 容器定义 |
| grid-columns-x | grid-template-columns: repeat(x, 1fr); | Grid 容器内分 x 列 |
| grid-column-gap-x | grid-column-gap: x px; | Grid 容器列边距 |
| grid-row-gap-x | grid-row-gap: x px; | Grid 容器行边距 |
Flex:
| Class | Properties | Description |
|---|---|---|
| flex | display: flex; | Flex 容器定义 |
| flex-row | flex-direction: row; | Flex 容器内元素横着排 |
| flex-column | flex-direction: column; | Flex 容器内元素竖着排 |
| flex-align-center | align-items: center; | Flex 容器内元素垂直居中 |
| flex-justify-center | align-items: center; | Flex 容器内元素水平居中 |
| flex-center | align-items: center; justify-content: center; |
Flex 容器内元素垂直水平居中 |
| flex-1 | flex: 1; | Flex 容器内元素铺满剩余空间 |
Text:
| Class | Properties | Description |
|---|---|---|
| text-left | text-align: left; | 文字居左 |
| text-center | text-align: center; | 文字居中 |
| text-right | text-align: right; | 文字居右 |
| text-wrap | word-break: break-word; white-space: break-spaces; |
文字强制换行 |
| text-nowrap | white-space: nowrap; | 文字强制不换行 |
Fill:
| Class | Properties | Description |
|---|---|---|
| height-fill | height: 100%; | 元素高度 = 父容器高度 |
| width-fill | width: 100%; | 元素宽度 = 父容器宽度 |
| height-fill-viewport | height: 100vh; | 元素高度 = 可视区高度 |
| width-fill-viewport | width: 100vw; | 元素宽度 = 可视区宽度 |
Image
This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text.
This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text. This is a loooooooooooooooooooooooooooooooong text.
Use:
| Category | HTML |
|---|---|
| Basic |
|
| Animation |
|
| Column |
|
| Image with Text |
|
Video
Basic:
YouTube:
Use:
| Category | HTML |
|---|---|
| Basic |
|
| YouTube |
|
Button
Use:
| Category | HTML |
|---|---|
| Basic |
|
| Black |
|
| Orange |
|
| White |
|
| Ghost |
|
| Link |
|
| AddToCart |
|