Design System

design system about this blog

Colors

Primary
Secondary
Decorative
Info
Error
Success
Warning
Gray
Text
Background

Headings

All HTML headings, <h1> through <h6>, are available.

Heading 2 example

Heading 3 example

Heading 4 example

Heading 5 example
Heading 6 example

List Types

Ordered List

An unordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

  1. List item 1
  2. List item 2
    1. Nested list item A
    2. Nested list item B
  3. List item 3
    • asdf
    • asdf

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets by default:

  • List Item a
  • List Item b
    • Nested list item 1
    • Nested list item 2
      • Double Nested item 1
      • Double Nested item 2
  • List Item 3

Blockquotes

For quoting blocks of content from another source within your document.
Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. - Biron Themes

Alternative blockquote style:


Code

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block. Because we have more specific typographic needs for code, we'll specify Consolas and Monaco ahead of the browser-defined monospace font.

Here are a few examples of code highlighting:

HTML code

CSS code

Javascript code

Inline code

and code

Diff code

Playground

Text-level semantics

Styling for common inline HTML5 elements.

The example
The b element example
The code element example
The em element example
The sub element example
The sub element example
The u element example
The ins element example
The mark element example
The s element example


The details element:

Tables

Table_Header_1Table_Header_2Table_Header_3
单元格1单元格2单元格3
单元格4单元格5单元格6
Table_Header_1Table_Header_2Table_Header_3Table_Header_4Table_Header_5Table_Header_6Table_Header_7
ABCDEFG
HIJKLMN
OPQRSTU

Tasks

  • to do
  • done

Cards


Toggle cards

Alert boxs

Questions? Let's chat

discord logoOPEN DISCORD
6423
members online

A TypeScript Full Stack Blog

Share articles about Typescript, React, Next.js, Node.js and Css from time to time.
No spam, unsubscribe at any time.