Draggable app-cards

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

Open on CodeSandbox

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(--blue500)">
			<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="https://mirotone.xyz/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="https://mirotone.xyz/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(--blue700)">
			<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="https://mirotone.xyz/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="https://mirotone.xyz/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="https://mirotone.xyz/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>

🏓 Interactive playground