mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: extract TileCard component

Browse source
This commit is contained in:
Eric Liu 2020-08-08 15:49:16 -07:00
commit 12ff171784
6 changed files with 209 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

61
docs/src/components/TileCard.svelte Normal file
View file

@ -0,0 +1,61 @@
<script>
export let title = "";
import { Tile, Button, ButtonSet } from "carbon-components-svelte";
import Code16 from "carbon-icons-svelte/lib/Code16";
</script>
<style>
:global(.tile-card) {
display: flex;
flex-direction: column;
height: 100%;
min-height: 12rem;
}
.title {
font-size: 0.75rem;
}
.tile-card__preview {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
.tile-card__actions {
display: flex;
justify-content: flex-end;
margin-right: -1rem;
margin-bottom: -1rem;
}
</style>
<Tile class="tile-card">
<div class="title">{title}</div>
<div class="tile-card__preview">
<slot />
</div>
<div class="tile-card__actions">
<div>
<Button
hasIconOnly
kind="ghost"
size="small"
icon={Code16}
iconDescription="Usage"
tooltipAlignment="center"
tooltipPosition="top" />
<Button
hasIconOnly
kind="ghost"
size="small"
icon={Code16}
iconDescription="Usage"
tooltipAlignment="center"
tooltipPosition="top" />
</div>
</div>
</Tile>