@hyper-elements/react 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/GUIDE.md +47 -28
- package/README.md +24 -5
- package/REFERENCE.md +487 -485
- package/dist/builder.cjs +795 -206
- package/dist/builder.cjs.map +1 -1
- package/dist/builder.js +795 -206
- package/dist/builder.js.map +1 -1
- package/dist/image.cjs +1 -1
- package/dist/image.cjs.map +1 -1
- package/dist/image.js +1 -1
- package/dist/image.js.map +1 -1
- package/dist/inspect.cjs +3601 -0
- package/dist/inspect.cjs.map +1 -0
- package/dist/inspect.d.cts +472 -0
- package/dist/inspect.d.ts +472 -0
- package/dist/inspect.js +3572 -0
- package/dist/inspect.js.map +1 -0
- package/dist/pdf.cjs +54 -9
- package/dist/pdf.cjs.map +1 -1
- package/dist/pdf.js +54 -9
- package/dist/pdf.js.map +1 -1
- package/dist/primitives.cjs +738 -142
- package/dist/primitives.cjs.map +1 -1
- package/dist/primitives.d.cts +558 -158
- package/dist/primitives.d.ts +558 -158
- package/dist/primitives.js +736 -143
- package/dist/primitives.js.map +1 -1
- package/package.json +10 -1
package/REFERENCE.md
CHANGED
|
@@ -7,8 +7,8 @@ Every component, what it holds, and every prop and style it takes, with its defa
|
|
|
7
7
|
Every component also takes:
|
|
8
8
|
|
|
9
9
|
- `style={{ … }}`: the styles listed under it. A number is px (`padding: 16` is `16px`).
|
|
10
|
-
- `
|
|
11
|
-
- `
|
|
10
|
+
- `style={{ mobile: { … } }}`: style overrides on phones, in an `Email` or a `Page`, for the styles listed under "`style.mobile`".
|
|
11
|
+
- `style={{ hover: { … } }}`: styles on hover, for the ones listed under "`style.hover`".
|
|
12
12
|
- `hidden={{ mobile: true }}` or `hidden={{ desktop: true }}`: shown on one only.
|
|
13
13
|
- `id`: an id of your own, written into the HTML.
|
|
14
14
|
|
|
@@ -21,6 +21,7 @@ What a property takes, where it says *kind*:
|
|
|
21
21
|
- *fontFamily*: a font stack, as CSS writes it ("Inter, Arial, sans-serif")
|
|
22
22
|
- *fontWeight*: 100 to 900 in hundreds, "normal" or "bold"
|
|
23
23
|
- *lineHeight*: a multiple of the font size (1.5), a percentage ("150%"), px ("24px") or "normal" (the font's own)
|
|
24
|
+
- *breakpoints*: { mobile }: the phone width in px (from 240)
|
|
24
25
|
- *insets*: px for all sides, "8px 16px" (1 to 4 values), [v, h] or [t, r, b, l], or { top, right, bottom, left }
|
|
25
26
|
- *border*: "1px solid #ccc", { width, style, color } for all sides, or { top, right, bottom, left } with one of those each
|
|
26
27
|
- *radius*: px for every corner, [topLeft, topRight, bottomRight, bottomLeft], or { topLeft, topRight, bottomRight, bottomLeft }
|
|
@@ -39,7 +40,7 @@ A template is one of these, and the root decides the output: `render()` writes a
|
|
|
39
40
|
|
|
40
41
|
An email. Its children are stacked down the content width, centered in the window.
|
|
41
42
|
|
|
42
|
-
Holds: Section, Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
43
|
+
Holds: Section, Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
43
44
|
|
|
44
45
|
Props:
|
|
45
46
|
- `width`: a length (a number of px) (default `600`)
|
|
@@ -50,56 +51,57 @@ Props:
|
|
|
50
51
|
- `fonts`: *fontFaces*. The font files the template loads: a family's file for each weight and style it uses. Text names a family in its fontFamily stack, before the fonts to show where it can't load.
|
|
51
52
|
|
|
52
53
|
`style`:
|
|
53
|
-
- `color`: *color* (default `"#000000"`, inherited)
|
|
54
|
-
- `fontFamily`: *fontFamily* (default `"Arial, Helvetica, sans-serif"`, inherited)
|
|
55
|
-
- `fontSize`: a length (a number of px) (default `16`, inherited)
|
|
56
|
-
- `fontWeight`: *fontWeight* (default `400`, inherited)
|
|
57
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
58
|
-
- `lineHeight`: *lineHeight* (default `1.5`, inherited)
|
|
59
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
60
|
-
- `textAlign`: one of "left", "center", "right", "justify" (default `"left"`, inherited)
|
|
61
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
62
|
-
- `backgroundColor`: *color
|
|
63
|
-
- `gap`: a length (a number of px). Space between children.
|
|
64
|
-
- `alignItems`: one of "start", "center", "end", "stretch". Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
54
|
+
- `color`: *color* (default `"#000000"`, inherited, Typography)
|
|
55
|
+
- `fontFamily`: *fontFamily* (default `"Arial, Helvetica, sans-serif"`, inherited, Typography)
|
|
56
|
+
- `fontSize`: a length (a number of px) (default `16`, inherited, Typography)
|
|
57
|
+
- `fontWeight`: *fontWeight* (default `400`, inherited, Typography)
|
|
58
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
59
|
+
- `lineHeight`: *lineHeight* (default `1.5`, inherited, Typography)
|
|
60
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
61
|
+
- `textAlign`: one of "left", "center", "right", "justify" (default `"left"`, inherited, Typography)
|
|
62
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
63
|
+
- `backgroundColor`: *color* (Background). The window's background, behind the content.
|
|
64
|
+
- `gap`: a length (a number of px) (Spacing). Space between children.
|
|
65
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (Layout). Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
65
66
|
|
|
66
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `gap`.
|
|
67
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `gap`.
|
|
67
68
|
|
|
68
69
|
### Page
|
|
69
70
|
|
|
70
71
|
A web page. Its children are stacked down the content width, centered in the window.
|
|
71
72
|
|
|
72
|
-
Holds: Section, Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
73
|
+
Holds: Section, Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
73
74
|
|
|
74
75
|
Props:
|
|
75
76
|
- `width`: a length (a number of px) (default `1200`). The widest the content gets.
|
|
76
77
|
- `description`: text. The page's meta description.
|
|
78
|
+
- `breakpoints`: *breakpoints*. Where its phone styles start: mobile, the widest window they apply to, in px (480 where it's not set).
|
|
77
79
|
- `title`: text. The document's title (shown in a browser tab, and by some email clients).
|
|
78
80
|
- `lang`: text. Its language, as a BCP 47 tag ("en", "ar").
|
|
79
81
|
- `dir`: one of "ltr", "rtl", "auto"
|
|
80
82
|
- `fonts`: *fontFaces*. The font files the template loads: a family's file for each weight and style it uses. Text names a family in its fontFamily stack, before the fonts to show where it can't load.
|
|
81
83
|
|
|
82
84
|
`style`:
|
|
83
|
-
- `color`: *color* (default `"#000000"`, inherited)
|
|
84
|
-
- `fontFamily`: *fontFamily* (default `"Arial, Helvetica, sans-serif"`, inherited)
|
|
85
|
-
- `fontSize`: a length (a number of px) (default `16`, inherited)
|
|
86
|
-
- `fontWeight`: *fontWeight* (default `400`, inherited)
|
|
87
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
88
|
-
- `lineHeight`: *lineHeight* (default `1.5`, inherited)
|
|
89
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
90
|
-
- `textAlign`: one of "left", "center", "right", "justify" (default `"left"`, inherited)
|
|
91
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
92
|
-
- `backgroundColor`: *color
|
|
93
|
-
- `gap`: a length (a number of px). Space between children.
|
|
94
|
-
- `alignItems`: one of "start", "center", "end", "stretch". Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
85
|
+
- `color`: *color* (default `"#000000"`, inherited, Typography)
|
|
86
|
+
- `fontFamily`: *fontFamily* (default `"Arial, Helvetica, sans-serif"`, inherited, Typography)
|
|
87
|
+
- `fontSize`: a length (a number of px) (default `16`, inherited, Typography)
|
|
88
|
+
- `fontWeight`: *fontWeight* (default `400`, inherited, Typography)
|
|
89
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
90
|
+
- `lineHeight`: *lineHeight* (default `1.5`, inherited, Typography)
|
|
91
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
92
|
+
- `textAlign`: one of "left", "center", "right", "justify" (default `"left"`, inherited, Typography)
|
|
93
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
94
|
+
- `backgroundColor`: *color* (Background). The window's background, behind the content.
|
|
95
|
+
- `gap`: a length (a number of px) (Spacing). Space between children.
|
|
96
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (Layout). Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
95
97
|
|
|
96
|
-
`mobile` (on phones): `
|
|
98
|
+
`style.mobile` (on phones): `gap`.
|
|
97
99
|
|
|
98
100
|
### Document
|
|
99
101
|
|
|
100
102
|
A printed document: its children on pages of its size (Document.Page, or split by PageBreaks), a PageHeader and a PageFooter on each. Renders to print HTML, and to PDF with @hyper-elements/react/pdf.
|
|
101
103
|
|
|
102
|
-
Holds: Section, Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html, Document.Page, PageBreak, PageHeader, PageFooter.
|
|
104
|
+
Holds: Section, Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html, Document.Page, PageBreak, PageHeader, PageFooter.
|
|
103
105
|
|
|
104
106
|
Props:
|
|
105
107
|
- `size`: one of "A3", "A4", "A5", "Letter", "Legal", "Tabloid" (default `"A4"`)
|
|
@@ -111,26 +113,24 @@ Props:
|
|
|
111
113
|
- `fonts`: *fontFaces*. The font files the template loads: a family's file for each weight and style it uses. Text names a family in its fontFamily stack, before the fonts to show where it can't load.
|
|
112
114
|
|
|
113
115
|
`style`:
|
|
114
|
-
- `color`: *color* (default `"#000000"`, inherited)
|
|
115
|
-
- `fontFamily`: *fontFamily* (default `"Arial, Helvetica, sans-serif"`, inherited)
|
|
116
|
-
- `fontSize`: a length (a number of px) (default `16`, inherited)
|
|
117
|
-
- `fontWeight`: *fontWeight* (default `400`, inherited)
|
|
118
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
119
|
-
- `lineHeight`: *lineHeight* (default `1.5`, inherited)
|
|
120
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
121
|
-
- `textAlign`: one of "left", "center", "right", "justify" (default `"left"`, inherited)
|
|
122
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
123
|
-
- `backgroundColor`: *color
|
|
124
|
-
- `gap`: a length (a number of px). Space between children.
|
|
125
|
-
- `alignItems`: one of "start", "center", "end", "stretch". Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
126
|
-
|
|
127
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `gap`.
|
|
116
|
+
- `color`: *color* (default `"#000000"`, inherited, Typography)
|
|
117
|
+
- `fontFamily`: *fontFamily* (default `"Arial, Helvetica, sans-serif"`, inherited, Typography)
|
|
118
|
+
- `fontSize`: a length (a number of px) (default `16`, inherited, Typography)
|
|
119
|
+
- `fontWeight`: *fontWeight* (default `400`, inherited, Typography)
|
|
120
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
121
|
+
- `lineHeight`: *lineHeight* (default `1.5`, inherited, Typography)
|
|
122
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
123
|
+
- `textAlign`: one of "left", "center", "right", "justify" (default `"left"`, inherited, Typography)
|
|
124
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
125
|
+
- `backgroundColor`: *color* (Background). Each page's background, out to its edges.
|
|
126
|
+
- `gap`: a length (a number of px) (Spacing). Space between children.
|
|
127
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (Layout). Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
128
128
|
|
|
129
129
|
### Canvas
|
|
130
130
|
|
|
131
131
|
An image of a fixed size (a social card, a banner): its children laid out in it as on a page. Written as PNG or SVG with @hyper-elements/react/image.
|
|
132
132
|
|
|
133
|
-
Holds: Section, Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
133
|
+
Holds: Section, Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
134
134
|
|
|
135
135
|
Props:
|
|
136
136
|
- `width`: a length (a number of px) (default `1200`). The image's width, in px.
|
|
@@ -141,22 +141,20 @@ Props:
|
|
|
141
141
|
- `fonts`: *fontFaces*. The font files the template loads: a family's file for each weight and style it uses. Text names a family in its fontFamily stack, before the fonts to show where it can't load.
|
|
142
142
|
|
|
143
143
|
`style`:
|
|
144
|
-
- `color`: *color* (default `"#000000"`, inherited)
|
|
145
|
-
- `fontFamily`: *fontFamily* (default `"Arial, Helvetica, sans-serif"`, inherited)
|
|
146
|
-
- `fontSize`: a length (a number of px) (default `16`, inherited)
|
|
147
|
-
- `fontWeight`: *fontWeight* (default `400`, inherited)
|
|
148
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
149
|
-
- `lineHeight`: *lineHeight* (default `1.5`, inherited)
|
|
150
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
151
|
-
- `textAlign`: one of "left", "center", "right", "justify" (default `"left"`, inherited)
|
|
152
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
153
|
-
- `backgroundColor`: *color
|
|
154
|
-
- `gap`: a length (a number of px). Space between children.
|
|
155
|
-
- `alignItems`: one of "start", "center", "end", "stretch". Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
156
|
-
- `padding`: *insets*
|
|
157
|
-
- `justifyContent`: one of "start", "center", "end", "space-between". Where children sit along the layout's direction, as CSS justify-content.
|
|
158
|
-
|
|
159
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `gap`, `padding`.
|
|
144
|
+
- `color`: *color* (default `"#000000"`, inherited, Typography)
|
|
145
|
+
- `fontFamily`: *fontFamily* (default `"Arial, Helvetica, sans-serif"`, inherited, Typography)
|
|
146
|
+
- `fontSize`: a length (a number of px) (default `16`, inherited, Typography)
|
|
147
|
+
- `fontWeight`: *fontWeight* (default `400`, inherited, Typography)
|
|
148
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
149
|
+
- `lineHeight`: *lineHeight* (default `1.5`, inherited, Typography)
|
|
150
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
151
|
+
- `textAlign`: one of "left", "center", "right", "justify" (default `"left"`, inherited, Typography)
|
|
152
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
153
|
+
- `backgroundColor`: *color* (Background). The window's background, behind the content.
|
|
154
|
+
- `gap`: a length (a number of px) (Spacing). Space between children.
|
|
155
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (Layout). Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
156
|
+
- `padding`: *insets* (Spacing)
|
|
157
|
+
- `justifyContent`: one of "start", "center", "end", "space-between" (Layout). Where children sit along the layout's direction, as CSS justify-content.
|
|
160
158
|
|
|
161
159
|
## Sections and layout
|
|
162
160
|
|
|
@@ -166,159 +164,159 @@ Bands and boxes that arrange blocks. None is required: a root stacks its childre
|
|
|
166
164
|
|
|
167
165
|
A band across the whole window, directly in an Email or Page: its background spans the window, its children are stacked at the content width.
|
|
168
166
|
|
|
169
|
-
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
167
|
+
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
170
168
|
|
|
171
169
|
`style`:
|
|
172
|
-
- `color`: *color* (inherited)
|
|
173
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
174
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
175
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
176
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
177
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
178
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
179
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
180
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
181
|
-
- `backgroundColor`: *color*
|
|
182
|
-
- `padding`: *insets*
|
|
183
|
-
- `border`: *border*
|
|
184
|
-
- `gap`: a length (a number of px). Space between children.
|
|
185
|
-
- `alignItems`: one of "start", "center", "end", "stretch". Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
170
|
+
- `color`: *color* (inherited, Typography)
|
|
171
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
172
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
173
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
174
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
175
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
176
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
177
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
178
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
179
|
+
- `backgroundColor`: *color* (Background)
|
|
180
|
+
- `padding`: *insets* (Spacing)
|
|
181
|
+
- `border`: *border* (Border)
|
|
182
|
+
- `gap`: a length (a number of px) (Spacing). Space between children.
|
|
183
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (Layout). Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
186
184
|
|
|
187
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `padding`, `border`, `gap`.
|
|
185
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `padding`, `border`, `gap`.
|
|
188
186
|
|
|
189
187
|
### Row
|
|
190
188
|
|
|
191
189
|
Lays its children out side by side. A child takes its width, or a share of what's left (its flex, 1 by default).
|
|
192
190
|
|
|
193
|
-
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
191
|
+
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
194
192
|
|
|
195
193
|
Props:
|
|
196
194
|
- `stackOnMobile`: true or false (default `true`). Its children stack full-width on phones (in an Email or a Page).
|
|
197
195
|
- `dir`: one of "ltr", "rtl", "auto". Its text's direction, where it differs from the template's; it starts on that side unless aligned otherwise.
|
|
198
196
|
|
|
199
197
|
`style`:
|
|
200
|
-
- `color`: *color* (inherited)
|
|
201
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
202
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
203
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
204
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
205
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
206
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
207
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
208
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
209
|
-
- `width`: a length (a number of px, %)
|
|
210
|
-
- `minWidth`: a length (a number of px, %)
|
|
211
|
-
- `maxWidth`: a length (a number of px, %)
|
|
212
|
-
- `height`: a length (a number of px)
|
|
213
|
-
- `padding`: *insets*
|
|
214
|
-
- `backgroundColor`: *color*
|
|
215
|
-
- `border`: *border*
|
|
216
|
-
- `borderRadius`: *radius*
|
|
217
|
-
- `overflow`: one of "visible", "hidden". Whether content past a set height is cut off.
|
|
218
|
-
- `gap`: a length (a number of px). Space between children.
|
|
219
|
-
- `alignItems`: one of "start", "center", "end", "stretch". Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
220
|
-
- `justifyContent`: one of "start", "center", "end", "space-between". Where children sit along the layout's direction, as CSS justify-content.
|
|
221
|
-
- `flexWrap`: one of "nowrap", "wrap", "words". "wrap": children that don't fit wrap onto another line, as CSS flex-wrap (in an email, in a Row kept side by side on phones, with no gap between the lines). "words": in an email, also a space of the text's font apart, on lines at least as tall as its, as words are.
|
|
222
|
-
- `flex`: *flex
|
|
223
|
-
|
|
224
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`, `gap`.
|
|
198
|
+
- `color`: *color* (inherited, Typography)
|
|
199
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
200
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
201
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
202
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
203
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
204
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
205
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
206
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
207
|
+
- `width`: a length (a number of px, %) (Size)
|
|
208
|
+
- `minWidth`: a length (a number of px, %) (Size)
|
|
209
|
+
- `maxWidth`: a length (a number of px, %) (Size)
|
|
210
|
+
- `height`: a length (a number of px) (Size)
|
|
211
|
+
- `padding`: *insets* (Spacing)
|
|
212
|
+
- `backgroundColor`: *color* (Background)
|
|
213
|
+
- `border`: *border* (Border)
|
|
214
|
+
- `borderRadius`: *radius* (Border)
|
|
215
|
+
- `overflow`: one of "visible", "hidden" (Layout). Whether content past a set height is cut off.
|
|
216
|
+
- `gap`: a length (a number of px) (Spacing). Space between children.
|
|
217
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (Layout). Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
218
|
+
- `justifyContent`: one of "start", "center", "end", "space-between" (Layout). Where children sit along the layout's direction, as CSS justify-content.
|
|
219
|
+
- `flexWrap`: one of "nowrap", "wrap", "words" (Layout). "wrap": children that don't fit wrap onto another line, as CSS flex-wrap (in an email, in a Row kept side by side on phones, with no gap between the lines). "words": in an email, also a space of the text's font apart, on lines at least as tall as its, as words are.
|
|
220
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
221
|
+
|
|
222
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`, `gap`.
|
|
225
223
|
|
|
226
224
|
### Column
|
|
227
225
|
|
|
228
226
|
Stacks its children vertically, with its own spacing and box.
|
|
229
227
|
|
|
230
|
-
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
231
|
-
|
|
232
|
-
`style`:
|
|
233
|
-
- `color`: *color* (inherited)
|
|
234
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
235
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
236
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
237
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
238
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
239
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
240
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
241
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
242
|
-
- `width`: a length (a number of px, %)
|
|
243
|
-
- `minWidth`: a length (a number of px, %)
|
|
244
|
-
- `maxWidth`: a length (a number of px, %)
|
|
245
|
-
- `height`: a length (a number of px)
|
|
246
|
-
- `padding`: *insets*
|
|
247
|
-
- `backgroundColor`: *color*
|
|
248
|
-
- `border`: *border*
|
|
249
|
-
- `borderRadius`: *radius*
|
|
250
|
-
- `overflow`: one of "visible", "hidden". Whether content past a set height is cut off.
|
|
251
|
-
- `gap`: a length (a number of px). Space between children.
|
|
252
|
-
- `alignItems`: one of "start", "center", "end", "stretch". Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
253
|
-
- `justifyContent`: one of "start", "center", "end", "space-between". Where children sit along the layout's direction, as CSS justify-content.
|
|
254
|
-
- `flex`: *flex
|
|
255
|
-
|
|
256
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`, `gap`.
|
|
228
|
+
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
229
|
+
|
|
230
|
+
`style`:
|
|
231
|
+
- `color`: *color* (inherited, Typography)
|
|
232
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
233
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
234
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
235
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
236
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
237
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
238
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
239
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
240
|
+
- `width`: a length (a number of px, %) (Size)
|
|
241
|
+
- `minWidth`: a length (a number of px, %) (Size)
|
|
242
|
+
- `maxWidth`: a length (a number of px, %) (Size)
|
|
243
|
+
- `height`: a length (a number of px) (Size)
|
|
244
|
+
- `padding`: *insets* (Spacing)
|
|
245
|
+
- `backgroundColor`: *color* (Background)
|
|
246
|
+
- `border`: *border* (Border)
|
|
247
|
+
- `borderRadius`: *radius* (Border)
|
|
248
|
+
- `overflow`: one of "visible", "hidden" (Layout). Whether content past a set height is cut off.
|
|
249
|
+
- `gap`: a length (a number of px) (Spacing). Space between children.
|
|
250
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (Layout). Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
251
|
+
- `justifyContent`: one of "start", "center", "end", "space-between" (Layout). Where children sit along the layout's direction, as CSS justify-content.
|
|
252
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
253
|
+
|
|
254
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`, `gap`.
|
|
257
255
|
|
|
258
256
|
### Grid
|
|
259
257
|
|
|
260
258
|
Its children in columns of equal width, row after row; on phones, one under another.
|
|
261
259
|
|
|
262
|
-
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
260
|
+
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
263
261
|
|
|
264
262
|
Props:
|
|
265
263
|
- `columns`: an integer from 1 to 12 (default `2`). How many children to a row.
|
|
266
264
|
- `stackOnMobile`: true or false (default `true`). Its children one under another on phones (in an Email or a Page).
|
|
267
265
|
|
|
268
266
|
`style`:
|
|
269
|
-
- `color`: *color* (inherited)
|
|
270
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
271
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
272
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
273
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
274
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
275
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
276
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
277
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
278
|
-
- `width`: a length (a number of px, %)
|
|
279
|
-
- `minWidth`: a length (a number of px, %)
|
|
280
|
-
- `maxWidth`: a length (a number of px, %)
|
|
281
|
-
- `height`: a length (a number of px)
|
|
282
|
-
- `padding`: *insets*
|
|
283
|
-
- `backgroundColor`: *color*
|
|
284
|
-
- `border`: *border*
|
|
285
|
-
- `borderRadius`: *radius*
|
|
286
|
-
- `overflow`: one of "visible", "hidden". Whether content past a set height is cut off.
|
|
287
|
-
- `gap`: a length (a number of px). Space between its children, across and down (unless rowGap is set).
|
|
288
|
-
- `rowGap`: a length (a number of px). Space between its rows (gap by default); on phones, where the children stack, gap is between them.
|
|
289
|
-
- `alignItems`: one of "start", "center", "end", "stretch". Where each child sits in its row's height, as CSS align-items.
|
|
290
|
-
- `flex`: *flex
|
|
291
|
-
|
|
292
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`, `gap`, `rowGap`.
|
|
267
|
+
- `color`: *color* (inherited, Typography)
|
|
268
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
269
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
270
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
271
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
272
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
273
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
274
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
275
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
276
|
+
- `width`: a length (a number of px, %) (Size)
|
|
277
|
+
- `minWidth`: a length (a number of px, %) (Size)
|
|
278
|
+
- `maxWidth`: a length (a number of px, %) (Size)
|
|
279
|
+
- `height`: a length (a number of px) (Size)
|
|
280
|
+
- `padding`: *insets* (Spacing)
|
|
281
|
+
- `backgroundColor`: *color* (Background)
|
|
282
|
+
- `border`: *border* (Border)
|
|
283
|
+
- `borderRadius`: *radius* (Border)
|
|
284
|
+
- `overflow`: one of "visible", "hidden" (Layout). Whether content past a set height is cut off.
|
|
285
|
+
- `gap`: a length (a number of px) (Spacing). Space between its children, across and down (unless rowGap is set).
|
|
286
|
+
- `rowGap`: a length (a number of px) (Spacing). Space between its rows (gap by default); on phones, where the children stack, gap is between them.
|
|
287
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (Layout). Where each child sits in its row's height, as CSS align-items.
|
|
288
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
289
|
+
|
|
290
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`, `gap`, `rowGap`.
|
|
293
291
|
|
|
294
292
|
### Layer
|
|
295
293
|
|
|
296
|
-
Its children over each other, in one box as tall as the tallest: an image
|
|
297
|
-
|
|
298
|
-
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
299
|
-
|
|
300
|
-
`style`:
|
|
301
|
-
- `color`: *color* (inherited)
|
|
302
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
303
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
304
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
305
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
306
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
307
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
308
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
309
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
310
|
-
- `width`: a length (a number of px, %)
|
|
311
|
-
- `minWidth`: a length (a number of px, %)
|
|
312
|
-
- `maxWidth`: a length (a number of px, %)
|
|
313
|
-
- `backgroundColor`: *color*
|
|
314
|
-
- `border`: *border*
|
|
315
|
-
- `borderRadius`: *radius*
|
|
316
|
-
- `height`: a length (a number of px). Its height: the image under its children covers it, cut at its sides or its top and bottom.
|
|
317
|
-
- `alignItems`: one of "start", "center", "end", "stretch" (default `"start"
|
|
318
|
-
- `justifyItems`: one of "start", "center", "end", "stretch" (default `"stretch"
|
|
319
|
-
- `flex`: *flex
|
|
320
|
-
|
|
321
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `border`.
|
|
294
|
+
Its children over each other, in one box as tall as the tallest: words on an image (a background image, its first child). In an email, an Image with one child over it.
|
|
295
|
+
|
|
296
|
+
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
297
|
+
|
|
298
|
+
`style`:
|
|
299
|
+
- `color`: *color* (inherited, Typography)
|
|
300
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
301
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
302
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
303
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
304
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
305
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
306
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
307
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
308
|
+
- `width`: a length (a number of px, %) (Size)
|
|
309
|
+
- `minWidth`: a length (a number of px, %) (Size)
|
|
310
|
+
- `maxWidth`: a length (a number of px, %) (Size)
|
|
311
|
+
- `backgroundColor`: *color* (Background)
|
|
312
|
+
- `border`: *border* (Border)
|
|
313
|
+
- `borderRadius`: *radius* (Border)
|
|
314
|
+
- `height`: a length (a number of px) (Size). Its height: the image under its children covers it, cut at its sides or its top and bottom.
|
|
315
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (default `"start"`, Layout). Where its children sit in its height, as CSS align-items.
|
|
316
|
+
- `justifyItems`: one of "start", "center", "end", "stretch" (default `"stretch"`, Layout). Where its children sit across its width, as CSS justify-items: stretched to it by default.
|
|
317
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
318
|
+
|
|
319
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `border`.
|
|
322
320
|
|
|
323
321
|
## Blocks
|
|
324
322
|
|
|
@@ -328,7 +326,7 @@ Content, stacked down whatever holds it.
|
|
|
328
326
|
|
|
329
327
|
Shapes (Rect, Circle, Ellipse, Line, Polygon, Path) drawn in a box of its own: its width and height, and the coordinates its viewBox gives them.
|
|
330
328
|
|
|
331
|
-
Holds: Rect, Circle, Ellipse, Line, Polygon, Path.
|
|
329
|
+
Holds: Rect, Circle, Ellipse, Line, Polygon, Path. Not in an Email.
|
|
332
330
|
|
|
333
331
|
Props:
|
|
334
332
|
- `width`: a number from 0 (required)
|
|
@@ -337,80 +335,80 @@ Props:
|
|
|
337
335
|
- `title`: text. What it shows, read out by screen readers.
|
|
338
336
|
|
|
339
337
|
`style`:
|
|
340
|
-
- `padding`: *insets*
|
|
341
|
-
- `backgroundColor`: *color*
|
|
342
|
-
- `border`: *border*
|
|
343
|
-
- `borderRadius`: *radius*
|
|
344
|
-
- `flex`: *flex
|
|
338
|
+
- `padding`: *insets* (Spacing)
|
|
339
|
+
- `backgroundColor`: *color* (Background)
|
|
340
|
+
- `border`: *border* (Border)
|
|
341
|
+
- `borderRadius`: *radius* (Border)
|
|
342
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
345
343
|
|
|
346
|
-
`mobile` (on phones): `padding`, `border`.
|
|
344
|
+
`style.mobile` (on phones): `padding`, `border`.
|
|
347
345
|
|
|
348
346
|
### Text
|
|
349
347
|
|
|
350
348
|
A paragraph of text.
|
|
351
349
|
|
|
352
|
-
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag, Image.
|
|
350
|
+
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag, Image.
|
|
353
351
|
|
|
354
352
|
Props:
|
|
355
353
|
- `dir`: one of "ltr", "rtl", "auto". Its text's direction, where it differs from the template's; it starts on that side unless aligned otherwise.
|
|
356
354
|
|
|
357
355
|
`style`:
|
|
358
|
-
- `color`: *color* (inherited)
|
|
359
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
360
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
361
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
362
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
363
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
364
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
365
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
366
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
367
|
-
- `textDecoration`: one of "none", "underline", "line-through"
|
|
368
|
-
- `width`: a length (a number of px, %)
|
|
369
|
-
- `maxWidth`: a length (a number of px, %)
|
|
370
|
-
- `padding`: *insets*
|
|
371
|
-
- `backgroundColor`: *color*
|
|
372
|
-
- `border`: *border*
|
|
373
|
-
- `borderRadius`: *radius*
|
|
374
|
-
- `flex`: *flex
|
|
375
|
-
|
|
376
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`.
|
|
356
|
+
- `color`: *color* (inherited, Typography)
|
|
357
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
358
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
359
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
360
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
361
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
362
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
363
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
364
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
365
|
+
- `textDecoration`: one of "none", "underline", "line-through" (Typography)
|
|
366
|
+
- `width`: a length (a number of px, %) (Size)
|
|
367
|
+
- `maxWidth`: a length (a number of px, %) (Size)
|
|
368
|
+
- `padding`: *insets* (Spacing)
|
|
369
|
+
- `backgroundColor`: *color* (Background)
|
|
370
|
+
- `border`: *border* (Border)
|
|
371
|
+
- `borderRadius`: *radius* (Border)
|
|
372
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
373
|
+
|
|
374
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`.
|
|
377
375
|
|
|
378
376
|
### Heading
|
|
379
377
|
|
|
380
378
|
A heading, from level 1 (the page's title) to 6.
|
|
381
379
|
|
|
382
|
-
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag.
|
|
380
|
+
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag.
|
|
383
381
|
|
|
384
382
|
Props:
|
|
385
383
|
- `level`: one of 1, 2, 3, 4, 5, 6 (default `1`)
|
|
386
384
|
- `dir`: one of "ltr", "rtl", "auto". Its text's direction, where it differs from the template's; it starts on that side unless aligned otherwise.
|
|
387
385
|
|
|
388
386
|
`style`:
|
|
389
|
-
- `color`: *color* (inherited)
|
|
390
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
391
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
392
|
-
- `fontWeight`: *fontWeight* (default `700`, inherited)
|
|
393
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
394
|
-
- `lineHeight`: *lineHeight* (default `1.25`, inherited)
|
|
395
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
396
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
397
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
398
|
-
- `textDecoration`: one of "none", "underline", "line-through"
|
|
399
|
-
- `width`: a length (a number of px, %)
|
|
400
|
-
- `maxWidth`: a length (a number of px, %)
|
|
401
|
-
- `padding`: *insets*
|
|
402
|
-
- `backgroundColor`: *color*
|
|
403
|
-
- `border`: *border*
|
|
404
|
-
- `borderRadius`: *radius*
|
|
405
|
-
- `flex`: *flex
|
|
406
|
-
|
|
407
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`.
|
|
387
|
+
- `color`: *color* (inherited, Typography)
|
|
388
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
389
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
390
|
+
- `fontWeight`: *fontWeight* (default `700`, inherited, Typography)
|
|
391
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
392
|
+
- `lineHeight`: *lineHeight* (default `1.25`, inherited, Typography)
|
|
393
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
394
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
395
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
396
|
+
- `textDecoration`: one of "none", "underline", "line-through" (Typography)
|
|
397
|
+
- `width`: a length (a number of px, %) (Size)
|
|
398
|
+
- `maxWidth`: a length (a number of px, %) (Size)
|
|
399
|
+
- `padding`: *insets* (Spacing)
|
|
400
|
+
- `backgroundColor`: *color* (Background)
|
|
401
|
+
- `border`: *border* (Border)
|
|
402
|
+
- `borderRadius`: *radius* (Border)
|
|
403
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
404
|
+
|
|
405
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`.
|
|
408
406
|
|
|
409
407
|
### Button
|
|
410
408
|
|
|
411
409
|
A link drawn as a button.
|
|
412
410
|
|
|
413
|
-
Holds: text; Span, MergeTag, LineBreak.
|
|
411
|
+
Holds: text; Span, MergeTag, LineBreak.
|
|
414
412
|
|
|
415
413
|
Props:
|
|
416
414
|
- `href`: *link* (required)
|
|
@@ -419,35 +417,35 @@ Props:
|
|
|
419
417
|
- `attrs`: *attributes*. More attributes for its link: a class, a `data-` attribute.
|
|
420
418
|
|
|
421
419
|
`style`:
|
|
422
|
-
- `color`: *color* (default `"#ffffff"`, inherited)
|
|
423
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
424
|
-
- `fontSize`: a length (a number of px) (default `14`, inherited)
|
|
425
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
426
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
427
|
-
- `lineHeight`: *lineHeight* (default `1.2`, inherited)
|
|
428
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
429
|
-
- `textAlign`: one of "left", "center", "right", "justify" (default `"center"`, inherited)
|
|
430
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
431
|
-
- `textDecoration`: one of "none", "underline", "line-through"
|
|
432
|
-
- `width`: a length (a number of px, %)
|
|
433
|
-
- `maxWidth`: a length (a number of px, %)
|
|
434
|
-
- `padding`: *insets* (default `{"top":10,"right":20,"bottom":10,"left":20}
|
|
435
|
-
- `backgroundColor`: *color* (default `"#0879a1"
|
|
436
|
-
- `border`: *border*
|
|
437
|
-
- `borderRadius`: *radius* (default `4
|
|
438
|
-
- `boxSizing`: one of "border-box", "content-box". Whether its width holds its padding and border (border-box), or they go on top of it (content-box).
|
|
439
|
-
- `alignSelf`: one of "start", "center", "end". Where it sits in its stack, whatever the stack's alignItems: on phones too, another place than on desktop.
|
|
440
|
-
- `flex`: *flex
|
|
441
|
-
|
|
442
|
-
`hover`: `color`, `backgroundColor`.
|
|
443
|
-
|
|
444
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`, `alignSelf`.
|
|
420
|
+
- `color`: *color* (default `"#ffffff"`, inherited, Typography)
|
|
421
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
422
|
+
- `fontSize`: a length (a number of px) (default `14`, inherited, Typography)
|
|
423
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
424
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
425
|
+
- `lineHeight`: *lineHeight* (default `1.2`, inherited, Typography)
|
|
426
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
427
|
+
- `textAlign`: one of "left", "center", "right", "justify" (default `"center"`, inherited, Typography)
|
|
428
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
429
|
+
- `textDecoration`: one of "none", "underline", "line-through" (Typography)
|
|
430
|
+
- `width`: a length (a number of px, %) (Size)
|
|
431
|
+
- `maxWidth`: a length (a number of px, %) (Size)
|
|
432
|
+
- `padding`: *insets* (default `{"top":10,"right":20,"bottom":10,"left":20}`, Spacing)
|
|
433
|
+
- `backgroundColor`: *color* (default `"#0879a1"`, Background)
|
|
434
|
+
- `border`: *border* (Border)
|
|
435
|
+
- `borderRadius`: *radius* (default `4`, Border)
|
|
436
|
+
- `boxSizing`: one of "border-box", "content-box" (Size). Whether its width holds its padding and border (border-box), or they go on top of it (content-box).
|
|
437
|
+
- `alignSelf`: one of "start", "center", "end" (Layout). Where it sits in its stack, whatever the stack's alignItems: on phones too, another place than on desktop.
|
|
438
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
439
|
+
|
|
440
|
+
`style.hover`: `color`, `backgroundColor`.
|
|
441
|
+
|
|
442
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`, `alignSelf`.
|
|
445
443
|
|
|
446
444
|
### Image
|
|
447
445
|
|
|
448
446
|
An image in the content. Without a width it takes its own size, no wider than its parent.
|
|
449
447
|
|
|
450
|
-
Holds: nothing.
|
|
448
|
+
Holds: nothing.
|
|
451
449
|
|
|
452
450
|
Props:
|
|
453
451
|
- `src`: *asset* (required)
|
|
@@ -455,93 +453,93 @@ Props:
|
|
|
455
453
|
- `title`: text. Shown as a tooltip by mail clients and browsers that show one.
|
|
456
454
|
|
|
457
455
|
`style`:
|
|
458
|
-
- `width`: a length (a number of px, %)
|
|
459
|
-
- `maxWidth`: a length (a number of px, %)
|
|
460
|
-
- `height`: a length (a number of px)
|
|
461
|
-
- `border`: *border*
|
|
462
|
-
- `borderRadius`: *radius*
|
|
463
|
-
- `flex`: *flex
|
|
464
|
-
- `alignSelf`: one of "start", "center", "end". Where it sits in its stack on phones, where that's another place than on desktop.
|
|
465
|
-
- `verticalAlign`: one of "top", "middle". Where it sits in a line of text it's in.
|
|
456
|
+
- `width`: a length (a number of px, %) (Size)
|
|
457
|
+
- `maxWidth`: a length (a number of px, %) (Size)
|
|
458
|
+
- `height`: a length (a number of px) (Size)
|
|
459
|
+
- `border`: *border* (Border)
|
|
460
|
+
- `borderRadius`: *radius* (Border)
|
|
461
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
462
|
+
- `alignSelf`: one of "start", "center", "end" (Layout). Where it sits in its stack on phones, where that's another place than on desktop.
|
|
463
|
+
- `verticalAlign`: one of "top", "middle" (Layout). Where it sits in a line of text it's in.
|
|
466
464
|
|
|
467
|
-
`mobile` (on phones): `width`, `maxWidth`, `border`, `alignSelf`.
|
|
465
|
+
`style.mobile` (on phones): `width`, `maxWidth`, `border`, `alignSelf`.
|
|
468
466
|
|
|
469
467
|
### Divider
|
|
470
468
|
|
|
471
469
|
A horizontal line.
|
|
472
470
|
|
|
473
|
-
Holds: nothing.
|
|
471
|
+
Holds: nothing.
|
|
474
472
|
|
|
475
473
|
`style`:
|
|
476
|
-
- `borderTop`: *line* (default `{"width":1,"style":"solid","color":"#bbbbbb"}
|
|
477
|
-
- `width`: a length (a number of px, %) (default `"100%"
|
|
478
|
-
- `padding`: *insets*
|
|
474
|
+
- `borderTop`: *line* (default `{"width":1,"style":"solid","color":"#bbbbbb"}`, Border). The line, as CSS border-top: "1px solid #bbbbbb".
|
|
475
|
+
- `width`: a length (a number of px, %) (default `"100%"`, Size)
|
|
476
|
+
- `padding`: *insets* (Spacing)
|
|
479
477
|
|
|
480
|
-
`mobile` (on phones): `width`, `padding`.
|
|
478
|
+
`style.mobile` (on phones): `width`, `padding`.
|
|
481
479
|
|
|
482
480
|
### List
|
|
483
481
|
|
|
484
482
|
A bulleted or numbered list of ListItems. Its markers sit in a column of their own (indent) before the items.
|
|
485
483
|
|
|
486
|
-
Holds: ListItem.
|
|
484
|
+
Holds: ListItem.
|
|
487
485
|
|
|
488
486
|
Props:
|
|
489
487
|
- `type`: one of "bullet", "number" (default `"bullet"`)
|
|
490
488
|
- `start`: an integer from 0 (default `1`). The first item's number, in a numbered list.
|
|
491
489
|
|
|
492
490
|
`style`:
|
|
493
|
-
- `color`: *color* (inherited)
|
|
494
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
495
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
496
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
497
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
498
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
499
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
500
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
501
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
502
|
-
- `width`: a length (a number of px, %)
|
|
503
|
-
- `maxWidth`: a length (a number of px, %)
|
|
504
|
-
- `padding`: *insets*
|
|
505
|
-
- `backgroundColor`: *color*
|
|
506
|
-
- `border`: *border*
|
|
507
|
-
- `gap`: a length (a number of px). Space between items.
|
|
508
|
-
- `indent`: a length (a number of px) (default `24
|
|
509
|
-
- `flex`: *flex
|
|
510
|
-
|
|
511
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`, `gap`.
|
|
491
|
+
- `color`: *color* (inherited, Typography)
|
|
492
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
493
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
494
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
495
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
496
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
497
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
498
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
499
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
500
|
+
- `width`: a length (a number of px, %) (Size)
|
|
501
|
+
- `maxWidth`: a length (a number of px, %) (Size)
|
|
502
|
+
- `padding`: *insets* (Spacing)
|
|
503
|
+
- `backgroundColor`: *color* (Background)
|
|
504
|
+
- `border`: *border* (Border)
|
|
505
|
+
- `gap`: a length (a number of px) (Spacing). Space between items.
|
|
506
|
+
- `indent`: a length (a number of px) (default `24`, Spacing). The width of the markers' column, before the items.
|
|
507
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
508
|
+
|
|
509
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `padding`, `border`, `gap`.
|
|
512
510
|
|
|
513
511
|
### Table
|
|
514
512
|
|
|
515
513
|
A table of data: TableRows of TableCells. Columns take their cells' widths; the rest share what's left.
|
|
516
514
|
|
|
517
|
-
Holds: TableRow.
|
|
518
|
-
|
|
519
|
-
`style`:
|
|
520
|
-
- `color`: *color* (inherited)
|
|
521
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
522
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
523
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
524
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
525
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
526
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
527
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
528
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
529
|
-
- `width`: a length (a number of px, %)
|
|
530
|
-
- `maxWidth`: a length (a number of px, %)
|
|
531
|
-
- `backgroundColor`: *color*
|
|
532
|
-
- `border`: *border*
|
|
533
|
-
- `cellPadding`: *insets
|
|
534
|
-
- `rowBorder`: *line*
|
|
535
|
-
- `borderCollapse`: one of "separate", "collapse". Whether cells side by side draw a border each (separate) or share one (collapse).
|
|
536
|
-
- `flex`: *flex
|
|
537
|
-
|
|
538
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `border`.
|
|
515
|
+
Holds: TableRow.
|
|
516
|
+
|
|
517
|
+
`style`:
|
|
518
|
+
- `color`: *color* (inherited, Typography)
|
|
519
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
520
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
521
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
522
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
523
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
524
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
525
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
526
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
527
|
+
- `width`: a length (a number of px, %) (Size)
|
|
528
|
+
- `maxWidth`: a length (a number of px, %) (Size)
|
|
529
|
+
- `backgroundColor`: *color* (Background)
|
|
530
|
+
- `border`: *border* (Border)
|
|
531
|
+
- `cellPadding`: *insets* (Spacing). Every cell's padding, where the cell doesn't set its own.
|
|
532
|
+
- `rowBorder`: *line* (Border)
|
|
533
|
+
- `borderCollapse`: one of "separate", "collapse" (Border). Whether cells side by side draw a border each (separate) or share one (collapse).
|
|
534
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
535
|
+
|
|
536
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `width`, `maxWidth`, `border`.
|
|
539
537
|
|
|
540
538
|
### Video
|
|
541
539
|
|
|
542
540
|
A YouTube or Vimeo video: its player on a page; in an email (which can't play one), its thumbnail, linked to it.
|
|
543
541
|
|
|
544
|
-
Holds: nothing.
|
|
542
|
+
Holds: nothing.
|
|
545
543
|
|
|
546
544
|
Props:
|
|
547
545
|
- `src`: *video* (required). The video's YouTube or Vimeo link.
|
|
@@ -549,17 +547,17 @@ Props:
|
|
|
549
547
|
- `title`: text (default `"Video"`). The player's title on a page, the thumbnail's alternate text in an email.
|
|
550
548
|
|
|
551
549
|
`style`:
|
|
552
|
-
- `width`: a length (a number of px, %)
|
|
553
|
-
- `maxWidth`: a length (a number of px, %)
|
|
554
|
-
- `flex`: *flex
|
|
550
|
+
- `width`: a length (a number of px, %) (Size)
|
|
551
|
+
- `maxWidth`: a length (a number of px, %) (Size)
|
|
552
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
555
553
|
|
|
556
|
-
`mobile` (on phones): `width`, `maxWidth`.
|
|
554
|
+
`style.mobile` (on phones): `width`, `maxWidth`.
|
|
557
555
|
|
|
558
556
|
### Social
|
|
559
557
|
|
|
560
558
|
Links to social profiles: a line of the networks' icons, each linked to its profile.
|
|
561
559
|
|
|
562
|
-
Holds: nothing.
|
|
560
|
+
Holds: nothing.
|
|
563
561
|
|
|
564
562
|
Props:
|
|
565
563
|
- `icons`: a list of icons, each { name, href } (required). Each network by name ("Instagram", "LinkedIn") and the link to its profile.
|
|
@@ -567,17 +565,17 @@ Props:
|
|
|
567
565
|
- `size`: an integer from 1 (default `32`). Each icon's width and height, in px.
|
|
568
566
|
|
|
569
567
|
`style`:
|
|
570
|
-
- `gap`: a length (a number of px) (default `5
|
|
571
|
-
- `justifyContent`: one of "start", "center", "end" (default `"center"
|
|
572
|
-
- `flex`: *flex
|
|
568
|
+
- `gap`: a length (a number of px) (default `5`, Spacing). Space between children.
|
|
569
|
+
- `justifyContent`: one of "start", "center", "end" (default `"center"`, Layout). Where the icons sit across the line.
|
|
570
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
573
571
|
|
|
574
|
-
`mobile` (on phones): `gap`.
|
|
572
|
+
`style.mobile` (on phones): `gap`.
|
|
575
573
|
|
|
576
574
|
### Menu
|
|
577
575
|
|
|
578
576
|
A line of links (a site's sections, a footer's), onto more lines where they don't fit, with a separator between them on desktop; or links down a column.
|
|
579
577
|
|
|
580
|
-
Holds: nothing.
|
|
578
|
+
Holds: nothing.
|
|
581
579
|
|
|
582
580
|
Props:
|
|
583
581
|
- `items`: a list of items, each { text, href } (required). Each link's text and where it goes.
|
|
@@ -585,25 +583,25 @@ Props:
|
|
|
585
583
|
- `layout`: one of "horizontal", "vertical" (default `"horizontal"`)
|
|
586
584
|
|
|
587
585
|
`style`:
|
|
588
|
-
- `color`: *color* (default `"#0068A5"`, inherited)
|
|
589
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
590
|
-
- `fontSize`: a length (a number of px) (default `14`, inherited)
|
|
591
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
592
|
-
- `lineHeight`: *lineHeight* (default `1.2`, inherited)
|
|
593
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
594
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
595
|
-
- `separatorColor`: *color* (default `"#444444"
|
|
596
|
-
- `padding`: *insets* (default `{"top":5,"right":15,"bottom":5,"left":15}
|
|
597
|
-
- `justifyContent`: one of "start", "center", "end" (default `"center"
|
|
598
|
-
- `flex`: *flex
|
|
586
|
+
- `color`: *color* (default `"#0068A5"`, inherited, Typography)
|
|
587
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
588
|
+
- `fontSize`: a length (a number of px) (default `14`, inherited, Typography)
|
|
589
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
590
|
+
- `lineHeight`: *lineHeight* (default `1.2`, inherited, Typography)
|
|
591
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
592
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
593
|
+
- `separatorColor`: *color* (default `"#444444"`, Border)
|
|
594
|
+
- `padding`: *insets* (default `{"top":5,"right":15,"bottom":5,"left":15}`, Spacing). Around each link: its sides are the space between them.
|
|
595
|
+
- `justifyContent`: one of "start", "center", "end" (default `"center"`, Layout). Where the links sit.
|
|
596
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
599
597
|
|
|
600
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`.
|
|
598
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`.
|
|
601
599
|
|
|
602
600
|
### Html
|
|
603
601
|
|
|
604
602
|
Markup written as it is, for what no component says (the builder's HTML block): in an email and on a page as given, nothing in it checked or escaped. A Document's PDF and a Canvas's image draw its plain text.
|
|
605
603
|
|
|
606
|
-
Holds: nothing.
|
|
604
|
+
Holds: nothing.
|
|
607
605
|
|
|
608
606
|
Props:
|
|
609
607
|
- `html`: text (required). The markup, written as it is: only markup you trust. Or give it as JSX inside the block, which React writes.
|
|
@@ -617,7 +615,7 @@ Inside text: a styled run, a link, a line break, a merge tag.
|
|
|
617
615
|
|
|
618
616
|
In a Document's text: the number of the page it's on, or (total) how many pages there are.
|
|
619
617
|
|
|
620
|
-
Holds: nothing.
|
|
618
|
+
Holds: nothing. Only in a Document.
|
|
621
619
|
|
|
622
620
|
Props:
|
|
623
621
|
- `total`: true or false (default `false`). How many pages the Document has, instead of this page's number.
|
|
@@ -626,27 +624,27 @@ Props:
|
|
|
626
624
|
|
|
627
625
|
Styled text inside text; raised or lowered (superscript, subscript) with verticalAlign.
|
|
628
626
|
|
|
629
|
-
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag.
|
|
627
|
+
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag.
|
|
630
628
|
|
|
631
629
|
`style`:
|
|
632
|
-
- `color`: *color* (inherited)
|
|
633
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
634
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
635
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
636
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
637
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
638
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
639
|
-
- `textDecoration`: one of "none", "underline", "line-through"
|
|
640
|
-
- `backgroundColor`: *color*
|
|
641
|
-
- `verticalAlign`: one of "baseline", "super", "sub". "super": superscript (®, a footnote mark); "sub": subscript; as CSS vertical-align.
|
|
630
|
+
- `color`: *color* (inherited, Typography)
|
|
631
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
632
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
633
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
634
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
635
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
636
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
637
|
+
- `textDecoration`: one of "none", "underline", "line-through" (Typography)
|
|
638
|
+
- `backgroundColor`: *color* (Background)
|
|
639
|
+
- `verticalAlign`: one of "baseline", "super", "sub" (Layout). "super": superscript (®, a footnote mark); "sub": subscript; as CSS vertical-align.
|
|
642
640
|
|
|
643
|
-
`mobile` (on phones): `fontSize`, `letterSpacing`.
|
|
641
|
+
`style.mobile` (on phones): `fontSize`, `letterSpacing`.
|
|
644
642
|
|
|
645
643
|
### Link
|
|
646
644
|
|
|
647
645
|
A link: text inside text, or around an Image.
|
|
648
646
|
|
|
649
|
-
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag, Image.
|
|
647
|
+
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag, Image.
|
|
650
648
|
|
|
651
649
|
Props:
|
|
652
650
|
- `href`: *link* (required)
|
|
@@ -655,32 +653,32 @@ Props:
|
|
|
655
653
|
- `attrs`: *attributes*. More attributes for it: a class, a `data-` attribute.
|
|
656
654
|
|
|
657
655
|
`style`:
|
|
658
|
-
- `color`: *color* (default `"#0000ee"`, inherited)
|
|
659
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
660
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
661
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
662
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
663
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
664
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
665
|
-
- `textDecoration`: one of "none", "underline", "line-through" (default `"underline"
|
|
666
|
-
- `backgroundColor`: *color*
|
|
667
|
-
- `flex`: *flex
|
|
656
|
+
- `color`: *color* (default `"#0000ee"`, inherited, Typography)
|
|
657
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
658
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
659
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
660
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
661
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
662
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
663
|
+
- `textDecoration`: one of "none", "underline", "line-through" (default `"underline"`, Typography)
|
|
664
|
+
- `backgroundColor`: *color* (Background)
|
|
665
|
+
- `flex`: *flex* (Layout). In a Row: its share of the width left after children with a width (default 1); "none" takes its own size.
|
|
668
666
|
|
|
669
|
-
`hover`: `color`, `textDecoration`, `backgroundColor`.
|
|
667
|
+
`style.hover`: `color`, `textDecoration`, `backgroundColor`.
|
|
670
668
|
|
|
671
|
-
`mobile` (on phones): `fontSize`, `letterSpacing`.
|
|
669
|
+
`style.mobile` (on phones): `fontSize`, `letterSpacing`.
|
|
672
670
|
|
|
673
671
|
### LineBreak
|
|
674
672
|
|
|
675
673
|
Starts a new line inside text.
|
|
676
674
|
|
|
677
|
-
Holds: nothing.
|
|
675
|
+
Holds: nothing.
|
|
678
676
|
|
|
679
677
|
### MergeTag
|
|
680
678
|
|
|
681
679
|
A value the sending service fills in (a name, a link), written in the service's own syntax.
|
|
682
680
|
|
|
683
|
-
Holds: nothing.
|
|
681
|
+
Holds: nothing.
|
|
684
682
|
|
|
685
683
|
Props:
|
|
686
684
|
- `name`: text (required)
|
|
@@ -693,154 +691,148 @@ Only inside the component named: a list's items, a table's rows and cells, a doc
|
|
|
693
691
|
|
|
694
692
|
One page of a Document (Document.Page in JSX): its children stacked down it, inside the Document's margins.
|
|
695
693
|
|
|
696
|
-
Holds: Section, Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
694
|
+
Holds: Section, Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html. Only in a Document.
|
|
697
695
|
|
|
698
696
|
`style`:
|
|
699
|
-
- `color`: *color* (inherited)
|
|
700
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
701
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
702
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
703
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
704
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
705
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
706
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
707
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
708
|
-
- `backgroundColor`: *color
|
|
709
|
-
- `gap`: a length (a number of px). Space between children.
|
|
710
|
-
- `alignItems`: one of "start", "center", "end", "stretch". Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
711
|
-
|
|
712
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `gap`.
|
|
697
|
+
- `color`: *color* (inherited, Typography)
|
|
698
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
699
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
700
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
701
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
702
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
703
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
704
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
705
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
706
|
+
- `backgroundColor`: *color* (Background). The page's background, out to its edges.
|
|
707
|
+
- `gap`: a length (a number of px) (Spacing). Space between children.
|
|
708
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (Layout). Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
713
709
|
|
|
714
710
|
### PageBreak
|
|
715
711
|
|
|
716
712
|
In a Document, where a page ends: what follows starts the next page.
|
|
717
713
|
|
|
718
|
-
Holds: nothing.
|
|
714
|
+
Holds: nothing. Only in a Document.
|
|
719
715
|
|
|
720
716
|
### PageHeader
|
|
721
717
|
|
|
722
718
|
In a Document: drawn at the top of every page, inside its margins.
|
|
723
719
|
|
|
724
|
-
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
720
|
+
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html. Only in a Document.
|
|
725
721
|
|
|
726
722
|
`style`:
|
|
727
|
-
- `color`: *color* (inherited)
|
|
728
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
729
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
730
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
731
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
732
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
733
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
734
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
735
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
736
|
-
- `padding`: *insets*
|
|
737
|
-
- `backgroundColor`: *color*
|
|
738
|
-
- `border`: *border*
|
|
739
|
-
- `gap`: a length (a number of px). Space between children.
|
|
740
|
-
- `alignItems`: one of "start", "center", "end", "stretch". Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
741
|
-
|
|
742
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `padding`, `border`, `gap`.
|
|
723
|
+
- `color`: *color* (inherited, Typography)
|
|
724
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
725
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
726
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
727
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
728
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
729
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
730
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
731
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
732
|
+
- `padding`: *insets* (Spacing)
|
|
733
|
+
- `backgroundColor`: *color* (Background)
|
|
734
|
+
- `border`: *border* (Border)
|
|
735
|
+
- `gap`: a length (a number of px) (Spacing). Space between children.
|
|
736
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (Layout). Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
743
737
|
|
|
744
738
|
### PageFooter
|
|
745
739
|
|
|
746
740
|
In a Document: drawn at the bottom of every page, inside its margins.
|
|
747
741
|
|
|
748
|
-
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html.
|
|
742
|
+
Holds: Row, Column, Grid, Layer, Svg, Text, Heading, Link, Button, Image, Divider, List, Table, Video, Social, Menu, Html. Only in a Document.
|
|
749
743
|
|
|
750
744
|
`style`:
|
|
751
|
-
- `color`: *color* (inherited)
|
|
752
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
753
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
754
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
755
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
756
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
757
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
758
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
759
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
760
|
-
- `padding`: *insets*
|
|
761
|
-
- `backgroundColor`: *color*
|
|
762
|
-
- `border`: *border*
|
|
763
|
-
- `gap`: a length (a number of px). Space between children.
|
|
764
|
-
- `alignItems`: one of "start", "center", "end", "stretch". Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
765
|
-
|
|
766
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `padding`, `border`, `gap`.
|
|
745
|
+
- `color`: *color* (inherited, Typography)
|
|
746
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
747
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
748
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
749
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
750
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
751
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
752
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
753
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
754
|
+
- `padding`: *insets* (Spacing)
|
|
755
|
+
- `backgroundColor`: *color* (Background)
|
|
756
|
+
- `border`: *border* (Border)
|
|
757
|
+
- `gap`: a length (a number of px) (Spacing). Space between children.
|
|
758
|
+
- `alignItems`: one of "start", "center", "end", "stretch" (Layout). Where children sit across the layout's direction (vertically in a Row, horizontally in a Column), as CSS align-items. Across a Column it places what has its own size (a Button, an Image, an Svg, a box with a width); a block of text fills the width, so its words move with its textAlign.
|
|
767
759
|
|
|
768
760
|
### ListItem
|
|
769
761
|
|
|
770
762
|
An item of a List: text, and a List of its own to nest one.
|
|
771
763
|
|
|
772
|
-
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag, List.
|
|
764
|
+
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag, List.
|
|
773
765
|
|
|
774
766
|
Props:
|
|
775
767
|
- `dir`: one of "ltr", "rtl", "auto". Its text's direction, where it differs from the template's; it starts on that side unless aligned otherwise.
|
|
776
768
|
|
|
777
769
|
`style`:
|
|
778
|
-
- `color`: *color* (inherited)
|
|
779
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
780
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
781
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
782
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
783
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
784
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
785
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
786
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
787
|
-
- `textDecoration`: one of "none", "underline", "line-through"
|
|
770
|
+
- `color`: *color* (inherited, Typography)
|
|
771
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
772
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
773
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
774
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
775
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
776
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
777
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
778
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
779
|
+
- `textDecoration`: one of "none", "underline", "line-through" (Typography)
|
|
788
780
|
|
|
789
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`.
|
|
781
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`.
|
|
790
782
|
|
|
791
783
|
### TableRow
|
|
792
784
|
|
|
793
785
|
A row of a Table. A header row's cells are header cells, in bold.
|
|
794
786
|
|
|
795
|
-
Holds: TableCell.
|
|
787
|
+
Holds: TableCell.
|
|
796
788
|
|
|
797
789
|
Props:
|
|
798
790
|
- `header`: true or false (default `false`). Its cells head the columns below them.
|
|
799
791
|
- `footer`: true or false (default `false`). It ends the table (printed, on each page the table runs to).
|
|
800
792
|
|
|
801
793
|
`style`:
|
|
802
|
-
- `color`: *color* (inherited)
|
|
803
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
804
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
805
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
806
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
807
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
808
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
809
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
810
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
811
|
-
- `backgroundColor`: *color*
|
|
812
|
-
- `height`: a length (a number of px)
|
|
794
|
+
- `color`: *color* (inherited, Typography)
|
|
795
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
796
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
797
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
798
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
799
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
800
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
801
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
802
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
803
|
+
- `backgroundColor`: *color* (Background)
|
|
804
|
+
- `height`: a length (a number of px) (Size)
|
|
813
805
|
|
|
814
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`.
|
|
806
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`.
|
|
815
807
|
|
|
816
808
|
### TableCell
|
|
817
809
|
|
|
818
810
|
A cell of a TableRow: text, and images. Its width sets its column's.
|
|
819
811
|
|
|
820
|
-
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag, Image.
|
|
812
|
+
Holds: text; PageNumber, Span, Link, LineBreak, MergeTag, Image.
|
|
821
813
|
|
|
822
814
|
Props:
|
|
823
815
|
- `colSpan`: an integer from 1 (default `1`). How many columns it spans.
|
|
824
816
|
- `dir`: one of "ltr", "rtl", "auto". Its text's direction, where it differs from the template's; it starts on that side unless aligned otherwise.
|
|
825
817
|
|
|
826
818
|
`style`:
|
|
827
|
-
- `color`: *color* (inherited)
|
|
828
|
-
- `fontFamily`: *fontFamily* (inherited)
|
|
829
|
-
- `fontSize`: a length (a number of px) (inherited)
|
|
830
|
-
- `fontWeight`: *fontWeight* (inherited)
|
|
831
|
-
- `fontStyle`: one of "normal", "italic" (inherited)
|
|
832
|
-
- `lineHeight`: *lineHeight* (inherited)
|
|
833
|
-
- `letterSpacing`: a length (a number of px) (inherited)
|
|
834
|
-
- `textAlign`: one of "left", "center", "right", "justify" (inherited)
|
|
835
|
-
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited)
|
|
836
|
-
- `textDecoration`: one of "none", "underline", "line-through"
|
|
837
|
-
- `padding`: *insets*
|
|
838
|
-
- `backgroundColor`: *color*
|
|
839
|
-
- `border`: *border*
|
|
840
|
-
- `width`: a length (a number of px, %). Its column's width (of a cell spanning one column).
|
|
841
|
-
- `verticalAlign`: one of "top", "middle", "bottom"
|
|
842
|
-
|
|
843
|
-
`mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `padding`, `border`.
|
|
819
|
+
- `color`: *color* (inherited, Typography)
|
|
820
|
+
- `fontFamily`: *fontFamily* (inherited, Typography)
|
|
821
|
+
- `fontSize`: a length (a number of px) (inherited, Typography)
|
|
822
|
+
- `fontWeight`: *fontWeight* (inherited, Typography)
|
|
823
|
+
- `fontStyle`: one of "normal", "italic" (inherited, Typography)
|
|
824
|
+
- `lineHeight`: *lineHeight* (inherited, Typography)
|
|
825
|
+
- `letterSpacing`: a length (a number of px) (inherited, Typography)
|
|
826
|
+
- `textAlign`: one of "left", "center", "right", "justify" (inherited, Typography)
|
|
827
|
+
- `textTransform`: one of "none", "uppercase", "lowercase", "capitalize" (inherited, Typography)
|
|
828
|
+
- `textDecoration`: one of "none", "underline", "line-through" (Typography)
|
|
829
|
+
- `padding`: *insets* (Spacing)
|
|
830
|
+
- `backgroundColor`: *color* (Background)
|
|
831
|
+
- `border`: *border* (Border)
|
|
832
|
+
- `width`: a length (a number of px, %) (Size). Its column's width (of a cell spanning one column).
|
|
833
|
+
- `verticalAlign`: one of "top", "middle", "bottom" (Layout)
|
|
834
|
+
|
|
835
|
+
`style.mobile` (on phones): `fontSize`, `lineHeight`, `letterSpacing`, `textAlign`, `padding`, `border`.
|
|
844
836
|
|
|
845
837
|
## Shapes
|
|
846
838
|
|
|
@@ -850,7 +842,7 @@ Only inside an Svg, in its viewBox's units.
|
|
|
850
842
|
|
|
851
843
|
A rectangle at x, y in its Svg, rounded by rx.
|
|
852
844
|
|
|
853
|
-
Holds: nothing.
|
|
845
|
+
Holds: nothing. Not in an Email.
|
|
854
846
|
|
|
855
847
|
Props:
|
|
856
848
|
- `x`: a number (default `0`)
|
|
@@ -860,16 +852,16 @@ Props:
|
|
|
860
852
|
- `rx`: a number from 0
|
|
861
853
|
|
|
862
854
|
`style`:
|
|
863
|
-
- `fill`: *color* (default `"#000000"
|
|
864
|
-
- `stroke`: *color
|
|
865
|
-
- `strokeWidth`: a number from 0
|
|
866
|
-
- `opacity`: a number from 0 to 1
|
|
855
|
+
- `fill`: *color* (default `"#000000"`, Background). Its inside ("transparent" for none).
|
|
856
|
+
- `stroke`: *color* (Border). Its outline's color.
|
|
857
|
+
- `strokeWidth`: a number from 0 (Border)
|
|
858
|
+
- `opacity`: a number from 0 to 1 (Effects)
|
|
867
859
|
|
|
868
860
|
### Circle
|
|
869
861
|
|
|
870
862
|
A circle centered at cx, cy in its Svg.
|
|
871
863
|
|
|
872
|
-
Holds: nothing.
|
|
864
|
+
Holds: nothing. Not in an Email.
|
|
873
865
|
|
|
874
866
|
Props:
|
|
875
867
|
- `cx`: a number (default `0`)
|
|
@@ -877,16 +869,16 @@ Props:
|
|
|
877
869
|
- `r`: a number from 0 (required)
|
|
878
870
|
|
|
879
871
|
`style`:
|
|
880
|
-
- `fill`: *color* (default `"#000000"
|
|
881
|
-
- `stroke`: *color
|
|
882
|
-
- `strokeWidth`: a number from 0
|
|
883
|
-
- `opacity`: a number from 0 to 1
|
|
872
|
+
- `fill`: *color* (default `"#000000"`, Background). Its inside ("transparent" for none).
|
|
873
|
+
- `stroke`: *color* (Border). Its outline's color.
|
|
874
|
+
- `strokeWidth`: a number from 0 (Border)
|
|
875
|
+
- `opacity`: a number from 0 to 1 (Effects)
|
|
884
876
|
|
|
885
877
|
### Ellipse
|
|
886
878
|
|
|
887
879
|
An ellipse centered at cx, cy in its Svg.
|
|
888
880
|
|
|
889
|
-
Holds: nothing.
|
|
881
|
+
Holds: nothing. Not in an Email.
|
|
890
882
|
|
|
891
883
|
Props:
|
|
892
884
|
- `cx`: a number (default `0`)
|
|
@@ -895,16 +887,16 @@ Props:
|
|
|
895
887
|
- `ry`: a number from 0 (required)
|
|
896
888
|
|
|
897
889
|
`style`:
|
|
898
|
-
- `fill`: *color* (default `"#000000"
|
|
899
|
-
- `stroke`: *color
|
|
900
|
-
- `strokeWidth`: a number from 0
|
|
901
|
-
- `opacity`: a number from 0 to 1
|
|
890
|
+
- `fill`: *color* (default `"#000000"`, Background). Its inside ("transparent" for none).
|
|
891
|
+
- `stroke`: *color* (Border). Its outline's color.
|
|
892
|
+
- `strokeWidth`: a number from 0 (Border)
|
|
893
|
+
- `opacity`: a number from 0 to 1 (Effects)
|
|
902
894
|
|
|
903
895
|
### Line
|
|
904
896
|
|
|
905
897
|
A straight line from x1, y1 to x2, y2 in its Svg (drawn by its stroke).
|
|
906
898
|
|
|
907
|
-
Holds: nothing.
|
|
899
|
+
Holds: nothing. Not in an Email.
|
|
908
900
|
|
|
909
901
|
Props:
|
|
910
902
|
- `x1`: a number (default `0`)
|
|
@@ -913,37 +905,47 @@ Props:
|
|
|
913
905
|
- `y2`: a number (default `0`)
|
|
914
906
|
|
|
915
907
|
`style`:
|
|
916
|
-
- `fill`: *color* (default `"#000000"
|
|
917
|
-
- `stroke`: *color
|
|
918
|
-
- `strokeWidth`: a number from 0
|
|
919
|
-
- `opacity`: a number from 0 to 1
|
|
908
|
+
- `fill`: *color* (default `"#000000"`, Background). Its inside ("transparent" for none).
|
|
909
|
+
- `stroke`: *color* (Border). Its outline's color.
|
|
910
|
+
- `strokeWidth`: a number from 0 (Border)
|
|
911
|
+
- `opacity`: a number from 0 to 1 (Effects)
|
|
920
912
|
|
|
921
913
|
### Polygon
|
|
922
914
|
|
|
923
915
|
A closed shape through its points ("0,0 40,0 20,30"), in its Svg.
|
|
924
916
|
|
|
925
|
-
Holds: nothing.
|
|
917
|
+
Holds: nothing. Not in an Email.
|
|
926
918
|
|
|
927
919
|
Props:
|
|
928
920
|
- `points`: text (required)
|
|
929
921
|
|
|
930
922
|
`style`:
|
|
931
|
-
- `fill`: *color* (default `"#000000"
|
|
932
|
-
- `stroke`: *color
|
|
933
|
-
- `strokeWidth`: a number from 0
|
|
934
|
-
- `opacity`: a number from 0 to 1
|
|
923
|
+
- `fill`: *color* (default `"#000000"`, Background). Its inside ("transparent" for none).
|
|
924
|
+
- `stroke`: *color* (Border). Its outline's color.
|
|
925
|
+
- `strokeWidth`: a number from 0 (Border)
|
|
926
|
+
- `opacity`: a number from 0 to 1 (Effects)
|
|
935
927
|
|
|
936
928
|
### Path
|
|
937
929
|
|
|
938
930
|
A shape drawn by an SVG path (d), in its Svg.
|
|
939
931
|
|
|
940
|
-
Holds: nothing.
|
|
932
|
+
Holds: nothing. Not in an Email.
|
|
941
933
|
|
|
942
934
|
Props:
|
|
943
935
|
- `d`: text (required). SVG path data ("M0 0 L40 0 L20 30 Z").
|
|
944
936
|
|
|
945
937
|
`style`:
|
|
946
|
-
- `fill`: *color* (default `"#000000"
|
|
947
|
-
- `stroke`: *color
|
|
948
|
-
- `strokeWidth`: a number from 0
|
|
949
|
-
- `opacity`: a number from 0 to 1
|
|
938
|
+
- `fill`: *color* (default `"#000000"`, Background). Its inside ("transparent" for none).
|
|
939
|
+
- `stroke`: *color* (Border). Its outline's color.
|
|
940
|
+
- `strokeWidth`: a number from 0 (Border)
|
|
941
|
+
- `opacity`: a number from 0 to 1 (Effects)
|
|
942
|
+
|
|
943
|
+
## For tools: where each block is in an Email's HTML
|
|
944
|
+
|
|
945
|
+
`await render(email, { blockMap: true })` also gives `blocks`, for a tool that previews an Email and needs to know which block of the template it's looking at: `{ version, unit: "utf8", entries: [{ path, nodeId?, offset }] }`.
|
|
946
|
+
|
|
947
|
+
- Each block written as an element has an entry: its place in the template (`root.children[2]`, as diagnostics give it), its `id` where it has one, and the UTF-8 byte offset in `html` just after its outermost element's tag name (`<table`, `<div`). That's the first element every email client but classic Outlook reads, else its first in Outlook's own markup.
|
|
948
|
+
- Entries are in the order of their offsets; at one offset, the outer block comes first. A `LineBreak` and a `MergeTag` have none, nor a `Layer`'s `Image` (drawn as the Layer's background).
|
|
949
|
+
- The HTML is the same bytes as without the option. Merge tags are written before the offsets are taken, and the offsets count the whole document, `<head>` included.
|
|
950
|
+
- `version` is `BLOCK_MAP_VERSION`, which changes only when this format does.
|
|
951
|
+
- Not with `pretty`, which indents the HTML after the offsets are taken (`render/block-map-pretty`). Another root than an Email has no `blocks`.
|