Sketch Component
Hand-drawn sketch style elements using irregular border-radius and SVG mask decorations. Includes frames, underlines, highlights, dividers, strikethrough, circling marks, and wrong/cross marks.
Notes
- Frames:
sketch-frame / sketch-frame1 ~ sketch-frame20. Uses irregular border-radius. Combine with border-* classes for color.
- Underline:
sketch-underline. Thickness: sketch-underline-1px. Color: sketch-underline-* (e.g. sketch-underline-primary).
- Highlight:
sketch-mark. Color: sketch-mark-*.
- Divider:
sketch-divider/sketch-divider-h (horizontal), sketch-divider-v (vertical). Color: sketch-divider-*.
- Strikethrough:
sketch-through. Circle: sketch-circling. Cross: sketch-wrong. Each supports sketch-wrong-1px (thin) and sketch-wrong-* (color).
Frames
sketch-frame (default)
Default sketch frame
Regular frames (sketch-frame1 ~ 10)
1
2
3
4
5
6
7
8
9
10
Irregular frames (sketch-frame11 ~ 20)
11
12
13
14
15
16
17
18
19
20
Frame colors
primary
secondary
success
error
red
blue
Underline
sketch-underline (default)
Hand-drawn underline
sketch-underline-1px (thin)
1px thin underline
Colored underline
primary
success
error
Different font sizes
Large text
Medium text
Small text
Highlight (sketch-mark)
Default
Hand-drawn highlight
Colored highlight
warning
success
error
Strikethrough (sketch-through)
Default
Hand-drawn strikethrough
sketch-through-1px (thin)
1px thin strikethrough
Colored strikethrough
error
primary
success
Different font sizes
Large
Medium
Small
Circle mark (sketch-circling)
Default
Hand-drawn circle
sketch-circling-1px (thin)
1px thin circle
Colored circle
error
primary
warning
Wrong cross (sketch-wrong)
Default
Hand-drawn cross
sketch-wrong-1px (thin)
1px thin cross
Colored cross
error
primary
warning
Divider
sketch-divider (horizontal)
Above
Below
sketch-divider-1px (thin)
Above
Below
sketch-divider-v (vertical)
Combination example
Sketch Card
A card with a sketch frame, highlighted text, and a divider.
— Sketch style demo