Vocabulary

1export const LAYOUT_VOCABULARY_VERSION = 2;
2
3export const VOCABULARY = Object.freeze({
4  composition: ["layered-overlay", "split", "stack", "grid", "rail", "scroll-narrative", "freeform"],
5  canvasWidth: ["full-bleed", "bounded"],
6  canvasHeight: ["viewport", "content", "fixed-ratio", "scroll-driven"],
7  backgroundKind: ["none", "color", "gradient", "image", "video", "composite"],
8  container: ["full", "bounded"],
9  regionRole: ["heading", "body-copy", "media", "action", "tabs", "tab", "navigation", "content"],
10  placement: [
11    "top-left", "top-center", "top-right",
12    "center-left", "center", "center-right",
13    "bottom-left", "bottom-center", "bottom-right",
14  ],
15  layerRole: ["base", "media", "scrim", "decoration", "content"],
16  mediaFit: ["cover", "contain", "fill", "natural"],
17  textWrapPolicy: ["single-line", "wrapped", "clipped-or-overflowing"],
18});