Basic

The twilight component enables global dark mode switching for the entire page, and also supports localized dark mode toggling.

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 deform morphing button component can switch between multiple expression forms, such as transforming from a menu button to a close button. It supports info, menu, add, close, left, right, up, down, menuStart, and menuEnd form types, with multiple ...

The callout component can convey: notifications, announcements, alerts, warnings, notices, and other informational messages. It serves as a replacement for alert and notice components.

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...

This framework comes with a built-in icon font (iconfont). Icons can be used either by applying the _icon[-*] style classes, or by writing the main name of the icon inside the tag and then applying the icon font to that tag. The icon font library wil...

Utilizes various fonts and font sizes to meet general webpage display needs for headings and body text

By controlling the aspect-ratio property, block elements can automatically maintain proportional dimensions based on either width or height, supporting common media sizes.

The text formatting styles were previously scattered across CSS and native HTML tags, making them inconvenient to use. This framework has now integrated commonly used text formats into CSS, standardizing their implementation through CSS classes rathe...

The category component is used to create section titles. It can be used for large sections on a page or small sections in a sidebar, serving to separate adjacent sections and indicate the main content of the current section.

The _bd or _bd-* classes represent standalone border styling (outline-like borders) that can be applied to any element. These styles support border positioning and sizing, with all _bd[-*] variants using solid borders. Unlike outline, these borders o...

The article tag is one of HTML5's semantic elements, and the main body of an article should be placed within this tag. This framework has optimized and improved the article tag, ensuring that its internal child elements display with excellent layout ...

Flexible layout, also known as flex layout, is the mainstream layout method for web pages today. It solves the collapse issue of float layouts and the 4px gap problem of inline-block elements. Most importantly, flex layout is inherently suitable for ...

Users can independently control width and height using _w-* and _h-* style classes. Dimensions use input height as the base unit (e.g., _w-1 equals 40px, _w-6 equals 40*6px). Includes three special sizes: neat (matches input width), half (50%), and f...

Margin controls outer spacing while padding handles inner spacing. The _m[-*] utility classes independently configure element margins with support for size and positioning. Similarly, _p[-*] classes independently set element padding with size and pos...

Use _bg[-*] style classes to independently define section background colors. Supports color schemes including prim, succ, error, etc. Additionally, _bg-stage can be used for the current page's background color scheme (defaults to white).

The grid layout system can replace traditional table layouts; it can simulate tables for data display while also mimicking flexbox for multi-column layouts. This framework primarily uses flexbox and grid layouts.

Atomic processing of display properties; alignment is divided into two main categories: inline element alignment (left/center/right) and flex child element alignment; parent alignment can be independently configured using _a[-*] classes.

Gradients are typically used for section backgrounds. For standard web pages, it's best not to use too many colors, so OrcaUI's gradient system only employs two-color gradients. It supports gradients with all primary colors across 8 directions, using...

Use _sd[-*] style classes to independently apply shadows to elements. In this framework, shadows are categorized by style rather than size. For example, shadows can simulate borders without occupying space, or create diffused spreading effects to evo...

Empty includes styles or states displayed for blank content or empty tags

Direction refers to the writing direction. Latin and Chinese scripts are written left-to-right (LTR), while Arabic and Hebrew are written right-to-left (RTL), often requiring RTL configuration.

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...

This framework resets the styles of some commonly used native HTML elements to align with the framework's design language. While it overrides default element styles, it preserves their core functionality and ensures accessibility compliance, avoiding...

Displays the CSS animations integrated in this framework, including transition animations and keyframe animations, which can meet daily usage needs.

Explains the relationship between color utility classes and CSS variables for color generation. This article provides a clear understanding of how OrcaUI's color theme system works, empowering users to customize their own theme styles after mastering...

The icon component is primarily used to display an icon. The form of the icon is not limited to iconfont icon fonts; it can also be images such as SVG, PNG, or JPG. It supports theme color themes and the use of label text, as well as various mixed st...

Universal webpage header with adaptive width, capable of accommodating logos, navigation, menus, search bars, buttons, etc.

The footer of a website is the least prominent area of a webpage, typically used to display disclaimers or contact information. OrcaUI's footer component comes with built-in sub-elements for users to combine, including icon button groups, auxiliary n...

Tab groups are a form of tab headers that have been integrated into the Tab component module. Built with CSS+HTML, they can be used anywhere in the webpage body and may also be packaged/referenced by other custom components or modules.

Flex groups are a form of tab headers that have been integrated into the Tab component module. Built with CSS+HTML, they can be used anywhere in the webpage body and may also be packaged/referenced by other custom components or modules.

Button groups are a form of tab headers that have been integrated into the Tab component module. Since they are built with CSS+HTML, they can be used anywhere in the webpage body and can also be packaged and referenced by other custom components or m...

While native HTML tags provide basic text formatting, certain special text formats still require custom CSS or JavaScript implementations. The format component currently supports several specialized text formats, including pinyin annotations, line br...

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 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

Use _r[-*] style classes to independently set an element's border radius, supporting customization of size and position. The sizing is based on a 3px increment (e.g., _r-3 means 3px*3).