Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Typography
Coral provide typography components for user to align the font styling.
Example
Basic Usage
12px Subtitle / Caption
14px Body
16px Headline in small section
20px Headline in page section
24px Headline in page section
28px Headline
32px Headline
36px Headline
40px Headline
View code
Customization
colorType semNeg1st
color grey
lineHeight 24px
lineHeight ratio 2
fontWeight 700
size 24, fontWeight 400
margin 16px 0
View code
Using the correct HTML tag
It’s important that you always use correct heading levels even regardless the font size. Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
My Notes
What is a Paragraph?
By default, the size is 14 and use div as the HTML tag. You can use as="p" when using it in an article or for a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
View code
References
- A Good Basis for Accessibility: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#Good_semantics
- Heading Accessibility Concerns: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#Accessibility_concerns
- Web Accessibility Tutorials - Heading: https://www.w3.org/WAI/tutorials/page-structure/headings/
API
Body
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |
Caption
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |
Display
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |
Header
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |
Subheader
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |
Subtitle
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |
Text
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| color | string | ||
| colorType | ColorTypes | ||
| fontWeight | FontWeight | ||
| lineHeight | LineHeight<string | number> | ||
| margin | Margin<string | number> | ||
| size | number | 14 |
Title
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |