
<div
  style={{
    borderBottom: "1px solid var(--uic-color-border-critical)",
    width: 320,
    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)",
    }}
  />
  uic-viewport-s
  <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>

UIC is following a mobile-first approach. This means that we treat the smallest viewport size as a default one. Other viewports are used to override the mobile styles.

There is no native support for custom media queries in CSS, so we expose them using the PostCSS custom media plugin.

--uic-viewport-m
--uic-viewport-l
--uic-viewport-xl

/* Usage */
.element {
  background: var(--uic-color-background-neutral);
}

@media (--uic-viewport-m) {
  .element {
    background: var(--uic-color-background-primary);
  }
}

If you still want to make an exception for the mobile viewport, we still expose the small screen media query.

--uic-viewport-s

Some of the components support responsive properties syntax in JSX code. For example, you can check View utility with multiple responsive properties supported.