Log In Sign Up

Basic

OrcaUI: Native CSS/JS methods with live demos for all components.
HomeDocsBasic
The project has been completed, and we are preparing more content, which will be rolled out gradually in the near future.
Default (ID) Recently Updated Featured Most Viewed
  • The like component is typically used at the end of an article, allowing users to show their support by liking it. While its functionality is singular, it supports rich sub-elements including like counts, icons, labels, and tooltips.
  • A badge is typically displayed in a floating manner at one of the four corners of an element. The flag component is used to define a badge, supporting three badge styles and multiple theme colors.
  • The divider component has similar effects to the hr tag and the oc-line component, as both can create a horizontal dividing line. We define the divider more purely—it simply separates the context and is part of the context itself. Its label text size...
  • The line component displays a divider to distinguish contexts, with the default effect being consistent with the hr tag. In addition to displaying a horizontal divider, the line component can also display a vertical divider and include descriptive te...
  • The OC-BR component is a replacement for the native br tag; this break-row component can create horizontal separation space within the context. br stands for break-row. Additionally, the OC-BC component can create vertical space intervals, where bc s...
  • The OC-BTN custom component represents a button. As one of the most fundamental web elements, this button component supports multiple child elements including prefixes, suffixes, icons, and images. It offers various size options, structural styles, a...
  • Single-line and multi-line ellipsis are essential when dealing with lengthy text. The _ell[-*] style class enables text ellipsis, supporting both single-line and multi-line ellipsis. Multi-line ellipsis accommodates different font sizes, and uses em ...
  • The legend style component is primarily used as a small decorative image and can be placed in any component or module. It includes rep=disk, rep=cube, and rep=image.
  • The poster component defines a cover image for post lists and card lists. It is purely styled with CSS.
  • Increase or decrease the font size, line height, and margin sizes of the page using the num-step and fs-root variables

New Launch: 20% Off All Products

Unlock all examples and development resources