
<View direction="row" gap={0}>
  <div
    style={{
      background: "var(--uic-color-background-neutral)",
      borderRadius: "var(--uic-unit-radius-small)",
      width: 60,
      height: 60,
    }}
  />
  <div
    style={{
      borderBottom: "1px solid var(--uic-color-border-critical)",
      width: "var(--uic-unit-x10)",
      textAlign: "center",
      position: "relative",
      top: "var(--uic-unit-x3)",
    }}
  >
    <div
      style={{
        width: 1,
        height: "var(--uic-unit-x4)",
        background: "var(--uic-color-border-critical)",
        position: "absolute",
        left: 0,
        bottom: "calc(var(--uic-unit-x2) * -1)",
      }}
    />
    x10
    <div
      style={{
        width: 1,
        height: "var(--uic-unit-x4)",
        background: "var(--uic-color-border-critical)",
        position: "absolute",
        right: 0,
        bottom: "calc(var(--uic-unit-x2) * -1)",
      }}
    />
  </div>
  <div
    style={{
      background: "var(--uic-color-background-neutral)",
      borderRadius: "var(--uic-unit-radius-small)",
      width: 60,
      height: 60,
    }}
  />
</View>

UIC unit system is based on one base value defined in the theme, which is 4px in the default theme. We generate multipliers from 1 to 10 to be used in the product directly.

--uic-unit-x1
...
--uic-unit-x10

/* Usage */
.element {
  margin-top: var(--uic-unit-x4);
}

Sometimes these multiplier variables are not enough, so you can multiply the value yourself in CSS.

.element {
  height: calc(var(--uic-unit-x1) * 40);
}

Typography

Radius