mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 19:01:05 +00:00
86 lines
1.9 KiB
Svelte
86 lines
1.9 KiB
Svelte
<script>
|
|
export let href = undefined;
|
|
export let title = "";
|
|
export let subtitle = "";
|
|
export let borderRight = false;
|
|
export let borderBottom = false;
|
|
|
|
import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
|
|
import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
|
|
import Launch from "carbon-icons-svelte/lib/Launch.svelte";
|
|
|
|
$: tileComponent = href ? ClickableTile : Tile;
|
|
</script>
|
|
|
|
<div class="card-wrapper" class:borderRight class:borderBottom>
|
|
<AspectRatio>
|
|
<svelte:component
|
|
this="{tileComponent}"
|
|
href="{href}"
|
|
{...$$restProps}
|
|
style="height: 100%; width: 100%; position: absolute;"
|
|
>
|
|
<div class="card">
|
|
<div>
|
|
<h5 class="title">{title}</h5>
|
|
{#if subtitle}
|
|
<div class="subtitle">{subtitle}</div>
|
|
{/if}
|
|
</div>
|
|
<div class="card-footer">
|
|
<svelte:component
|
|
this="{LogoGithub}"
|
|
size="{32}"
|
|
style="fill: var(--bx-icon-01)"
|
|
/>
|
|
<Launch size="{20}" style="fill: var(--bx-icon-01)" />
|
|
</div>
|
|
</div>
|
|
</svelte:component>
|
|
</AspectRatio>
|
|
</div>
|
|
|
|
<style>
|
|
.card-wrapper {
|
|
border-right: 1px solid transparent;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
.borderRight {
|
|
border-right: 1px solid var(--bx-ui-03);
|
|
}
|
|
|
|
.borderBottom {
|
|
border-bottom: 1px solid var(--bx-ui-03);
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
}
|
|
|
|
.card-footer {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title {
|
|
margin-top: calc(-1 * var(--bx-spacing-02));
|
|
margin-bottom: var(--bx-spacing-01);
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--bx-text-02);
|
|
}
|
|
|
|
@media (max-width: 671px) {
|
|
.card-wrapper,
|
|
.borderRight {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--bx-ui-03);
|
|
}
|
|
}
|
|
</style>
|