Draggable app-cards

See the Miro SDK docs on more info on how to make the cards draggable.

Test card title

Size: 5 Profile photo Mettin Done MIRO-123

Longer title than most titles but still decent

Size: 5 Profile photo Mettin Done MIRO-123

Third title

Size: 5 Profile photo Mettin Done MIRO-123

Fourth already?

Size: 5 Profile photo Mettin Done MIRO-123

Hidden title

Size: 5 Profile photo Mettin Done MIRO-123

html

<div class="grid">
	<form class="cs1 ce12">
		<div class="form-group">
			<input class="input" type="text" placeholder="Search"/>
		</div>

			<div class="app-card" style="--accent-color: var(--brandPink700)">
				<h1 class="app-card--title p-medium">Test card title</h1>
				<div class="app-card--body">
					<div class="app-card--tags">
						<span class="tag" style="--background: var(--accent-color); --color: #fff">Size: 5</span>
						<span class="tag icon icon-eye"></span>
						<span class="tag">
							<img class="tag-image" alt="Profile photo" width="16" height="16" src="/profile.png"/>
							Mettin
						</span>
						<span class="tag">Done</span>
						<span class="tag icon icon-link">MIRO-123</span>
					</div>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="app-card--app-logo">
						<path d="M16.4935 2H13.5821L16.1666 6.00648L10.7024 2H7.79099L10.3755 7.24944L4.91135 2H2L4.5421 8.77602L2 22H4.91135L10.3755 7.82089L7.79099 22H10.7024L16.1666 6.57793L13.5821 22H16.4935L22 5.05978L16.4935 2Z" fill="#050038"/>
					</svg>
				</div>
			</div>


			<div class="app-card" style="--accent-color: var(--indigo700)">
				<h1 class="app-card--title p-medium">Longer title than most titles but still decent</h1>
				<div class="app-card--body">
					<div class="app-card--tags">
						<span class="tag" style="--background: var(--accent-color); --color: #fff">Size: 5</span>
						<span class="tag icon icon-eye"></span>
						<span class="tag">
							<img class="tag-image" alt="Profile photo" width="16" height="16" src="/profile.png"/>
							Mettin
						</span>
						<span class="tag">Done</span>
						<span class="tag icon icon-link">MIRO-123</span>
					</div>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="app-card--app-logo">
						<path d="M16.4935 2H13.5821L16.1666 6.00648L10.7024 2H7.79099L10.3755 7.24944L4.91135 2H2L4.5421 8.77602L2 22H4.91135L10.3755 7.82089L7.79099 22H10.7024L16.1666 6.57793L13.5821 22H16.4935L22 5.05978L16.4935 2Z" fill="#050038"/>
					</svg>
				</div>
			</div>


			<div class="app-card" style="--accent-color: var(--brandBlue700)">
				<h1 class="app-card--title p-medium">Third title</h1>
				<div class="app-card--body">
					<div class="app-card--tags">
						<span class="tag" style="--background: var(--accent-color); --color: #fff">Size: 5</span>
						<span class="tag icon icon-eye"></span>
						<span class="tag">
							<img class="tag-image" alt="Profile photo" width="16" height="16" src="/profile.png"/>
							Mettin
						</span>
						<span class="tag">Done</span>
						<span class="tag icon icon-link">MIRO-123</span>
					</div>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="app-card--app-logo">
						<path d="M16.4935 2H13.5821L16.1666 6.00648L10.7024 2H7.79099L10.3755 7.24944L4.91135 2H2L4.5421 8.77602L2 22H4.91135L10.3755 7.82089L7.79099 22H10.7024L16.1666 6.57793L13.5821 22H16.4935L22 5.05978L16.4935 2Z" fill="#050038"/>
					</svg>
				</div>
			</div>


			<div class="app-card" style="--accent-color: var(--red700)">
				<h1 class="app-card--title p-medium">Fourth already?</h1>
				<div class="app-card--body">
					<div class="app-card--tags">
						<span class="tag" style="--background: var(--accent-color); --color: #fff">Size: 5</span>
						<span class="tag icon icon-eye"></span>
						<span class="tag">
							<img class="tag-image" alt="Profile photo" width="16" height="16" src="/profile.png"/>
							Mettin
						</span>
						<span class="tag">Done</span>
						<span class="tag icon icon-link">MIRO-123</span>
					</div>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="app-card--app-logo">
						<path d="M16.4935 2H13.5821L16.1666 6.00648L10.7024 2H7.79099L10.3755 7.24944L4.91135 2H2L4.5421 8.77602L2 22H4.91135L10.3755 7.82089L7.79099 22H10.7024L16.1666 6.57793L13.5821 22H16.4935L22 5.05978L16.4935 2Z" fill="#050038"/>
					</svg>
				</div>
			</div>


			<div class="app-card" style="--accent-color: var(--black)">
				<h1 class="app-card--title p-medium">Hidden title</h1>
				<div class="app-card--body">
					<div class="app-card--tags">
						<span class="tag" style="--background: var(--accent-color); --color: #fff">Size: 5</span>
						<span class="tag icon icon-eye"></span>
						<span class="tag">
							<img class="tag-image" alt="Profile photo" width="16" height="16" src="/profile.png"/>
							Mettin
						</span>
						<span class="tag">Done</span>
						<span class="tag icon icon-link">MIRO-123</span>
					</div>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="app-card--app-logo">
						<path d="M16.4935 2H13.5821L16.1666 6.00648L10.7024 2H7.79099L10.3755 7.24944L4.91135 2H2L4.5421 8.77602L2 22H4.91135L10.3755 7.82089L7.79099 22H10.7024L16.1666 6.57793L13.5821 22H16.4935L22 5.05978L16.4935 2Z" fill="#050038"/>
					</svg>
				</div>
			</div>

</div>