Card

Element type: Dictionary
Availability: 3.1.0+

Draws its children on a rounded surface that you can tint, outline and lift with a shadow. Put several cards in a Row to build a category grid.

Keys

Name	Type	Possible values	Required
Type	String	Card	Required
Components	Array	-	Required
Width	Number	-
Height	Number	-
Alignment	String	Left, Center, Right
BorderColor	String (Color)	-
BackgroundColor	String (Color)	-
BackgroundImage	String	-
Shadow	Boolean	-
Margins	Dictionary (Margins)	-
Border	Dictionary (Border)	-
Condition PRO	String (Condition)	-

Detail

Type Required

Type: String
Explanation: The type of the component which has to be Card.

Components Required

Type: Array
Explanation: The components stacked vertically on the card's surface. The array cannot be empty.

The following components are accepted as children: Text, Button, Image, SFSymbol, Video, Input, Spacer, Row, Column and MonitorsDisplay.

warning

A Spacer child must declare an explicit Height, no child may set ShouldFillSpace to true, and a Card cannot be placed directly inside another Card. A MonitorsDisplay child is accepted only if the card declares a Height — see below.

info

A card nested through a Row is valid: a card may contain a row, and that row may contain other cards. Only a card placed directly in another card's Components is rejected.
A card placed inside a Carousel is not rendered.

Width

Type: Number
Explanation: The share of the container's width taken by the card, between 0 (excluded) and 1 (included). If not specified, the card uses the full available width. A value of 0, or a value greater than 1, makes the configuration fail to load.

Height

Type: Number
Explanation: A fixed height for the card, in points. If not specified, the card is exactly as tall as its content. Content taller than the card is clipped; content shorter than the card is aligned to the top.

info

Giving the same Height to several cards placed in a Row is how you get a grid of equal-height cards.
A MonitorsDisplay child requires this key: the monitors list then fills the card and scrolls inside it.

Alignment

Type: String
Possible values: Left, Center, Right
Default: Center
Explanation: Where the card sits horizontally within the container when it does not take the full width. Has a visible effect only together with the Width key, but the value is validated in every case.

BorderColor

Type: String (Color)
Explanation: The color of the outline drawn around the card. Can be the name of a color defined in ColorStyles, or an inline color.

info

Unlike containers, a card has no default outline: if this key is absent, no stroke is drawn at all.

BackgroundColor

Type: String (Color)
Explanation: The fill of the card's surface. Can be the name of a color defined in ColorStyles, or an inline color. If not specified, the card uses the standard system container background.

BackgroundImage

Type: String
Explanation: The local path or URL of an image drawn on the card's surface. The image keeps its ratio and fills the card, cropping what does not fit. It is drawn over BackgroundColor when both are set.

Shadow

Type: Boolean
Default: false
Explanation: If set to true, a soft drop shadow lifts the card off the slide. In dark mode the shadow is rendered as a subtle light glow so it stays visible.

Margins

Type: Dictionary (Margins)
Explanation: Add padding around the card. The card itself already applies a 15 pt inner padding between its surface and its children.

Border

Type: Dictionary (Border)
Explanation: Add a top or bottom border to a component.

Condition PRO

Type: String (Condition)
Explanation: Allows to hide or show the component using a boolean expression. Hiding a card hides its surface, its shadow and all of its children.

Examples

A tinted card holding a symbol and two lines of text.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>ColorStyles</key>
	<dict>
		<key>Subtle</key>
		<dict>
			<key>DarkMode</key>
			<string>#1c2733</string>
			<key>LightMode</key>
			<string>#e8f0fe</string>
		</dict>
	</dict>
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							<string>Card</string>
							<key>BackgroundColor</key>
							<string>Subtle</string>
							<key>Components</key>
							<array>
								<dict>
									<key>Type</key>
									<string>Text</string>
									<key>Text</key>
									<string>**Tip**</string>
								</dict>
								<dict>
									<key>Type</key>
									<string>Text</string>
									<key>Text</key>
									<string>You can reopen this window from the menu bar at any time.</string>
								</dict>
							</array>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

A grid of two equal-height cards, side by side in a Row.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Components</key>
	<array>
		<dict>
			<key>Type</key>
			<string>Row</string>
			<key>Components</key>
			<array>
				<dict>
					<key>Type</key>
					<string>Card</string>
					<key>Shadow</key>
					<true/>
					<key>Height</key>
					<real>190</real>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							<string>SFSymbol</string>
							<key>Name</key>
							<string>bubble.left.and.bubble.right.fill</string>
							<key>Size</key>
							<real>28</real>
						</dict>
						<dict>
							<key>Type</key>
							<string>Text</string>
							<key>Text</key>
							<string>**Communication**</string>
						</dict>
					</array>
				</dict>
				<dict>
					<key>Type</key>
					<string>Card</string>
					<key>Shadow</key>
					<true/>
					<key>Height</key>
					<real>190</real>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							<string>SFSymbol</string>
							<key>Name</key>
							<string>square.grid.2x2.fill</string>
							<key>Size</key>
							<real>28</real>
						</dict>
						<dict>
							<key>Type</key>
							<string>Text</string>
							<key>Text</key>
							<string>**Productivity**</string>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

An outlined card, narrowed to 60% of the width and pushed to the left.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Components</key>
	<array>
		<dict>
			<key>Type</key>
			<string>Card</string>
			<key>BorderColor</key>
			<string>CardOutline</string>
			<key>Width</key>
			<real>0.6</real>
			<key>Alignment</key>
			<string>Left</string>
			<key>Components</key>
			<array>
				<dict>
					<key>Type</key>
					<string>Text</string>
					<key>Text</key>
					<string>A quieter card: just an outline on the default surface.</string>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>