Draggable app-cards
See the Miro SDK docs on more info on how to make the cards draggable.
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>