Sides

A positional object for properties that can vary per side. Used by padding and strokeWeight as an alternative to a single scalar value. Introduced in schema 1.0.0.

interface Sides {
  top?: Style;
  end?: Style;
  bottom?: Style;
  start?: Style;
}

Properties

Property	Type	Required	Description
top	Style	No	Top edge
end	Style	No	Inline-end (right in LTR)
bottom	Style	No	Bottom edge
start	Style	No	Inline-start (left in LTR)

Side names use logical directions (start/end) rather than physical (left/right) for bidirectional layout support.

Examples

When all sides are the same, padding is a scalar:

padding: 16

When sides differ, padding is a Sides object:

padding:
  top: 8
  end: 16
  bottom: 8
  start: 16

Further Reading

• ADR 010 — Sides and Corners Composite Types — replaces flat padding/stroke/corner fields with Sides and Corners composites using logical directions