Units

Numeric units

Some card properties, such as flex and lines, require pure numeric values. Do not add units such as px or vw after these numbers.

For the value range and type of these numeric values, see the property definitions for each component in General styles. If you provide a non-numeric value, it defaults to 0.

Example:

lines:5;
flex:1;

Time units

Some card properties, such as animation-duration, require a time value. The card supports seconds (s) and milliseconds (ms) as time units.

Example:

animation-duration:2s;

Length units

You can use several different units to represent length in cards. A length consists of a number and a unit, with no space in between. Length units are divided into built-in and custom units.

Built-in units

Relative lengths

Relative length units specify a length relative to another length property. This makes them ideal for designs that need to adapt to different devices.

• vw: Viewport width. 1 vw equals 1% of the viewport width.

• %: A percentage of the viewport height or width.

Example:

font-size: 20vw;
background-size:50%;

Absolute lengths

Absolute length units are fixed values. They are not relative to other properties, and their physical size depends on the output medium rather than the environment, such as the monitor, resolution, or operating system.

• px: Pixel (1 px = 1/96th of 1 in)

• rpx: Calculated based on a 750 baseline, where 2 rpx = 1 px.

Example:

font-size: 17px;
line-height:40rpx;

Click detailLength.zip to download the complete sample code.

Color units

You can specify colors in cards in the following ways:

• Hexadecimal

• RGB color

• Color name

Hexadecimal colors

You can specify a hexadecimal color in several ways:

• #RRGGBB, where RR (red), GG (green), and BB (blue) are two-digit hexadecimal values from 00 to FF.

For example, the value #0000FF is rendered as blue because the blue component is set to its highest value (FF) and the other components are set to 00.

• #RGB, where R (red), G (green), and B (blue) are single-digit hexadecimal values from 0 to F.

For example, the value #00F is rendered as blue because the blue component is set to its highest value (F) and the other components are set to 0.

• 0xrrggbb, where rr (red), gg (green), and bb (blue) are two-digit hexadecimal values from 00 to ff.

For example, the value 0x0000ff is rendered as blue because the blue component is set to its highest value (ff) and the other components are set to 00.

Example:

background-color:#ff0000;
border-top-color:0x0000ff;
border-bottom-color:#00f;

RGB colors

You can specify an RGB color in several ways:

• RGB(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255. For example, the value RGB(0,0,255) is rendered as blue because the blue parameter is set to its highest value, 255, and the others are set to 0.

• RGBA(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, the value RGBA(0,0,255,0.5) is rendered as a semi-transparent blue.

Example:

background-color:rgb(0,0,255);
border-color:rgba(255,0,0,0.5);

Color names

Cards support 147 defined color names, including 17 standard colors and 130 other colors. The following tables list all color names and their corresponding hexadecimal values.

Standard colors

Others

Example

background-color:red;

Click detailColor.zip to download the complete sample code.

Appendix - Color value definitions