mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
ba58ba8f00* chore: update ignore rules, remove unused files * refactor(icons): use icons from carbon-icons-svelte@11 * docs(time-picker): fix default value * chore: upgrade carbon-icons-svelte to v11 * docs: update examples to use icons from carbon-icons-svelte@11 * docs: update number of icons [ci skip]
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%;"
|
|
>
|
|
<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(--cds-icon-01)"
|
|
/>
|
|
<Launch size="{20}" style="fill: var(--cds-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(--cds-ui-03);
|
|
}
|
|
|
|
.borderBottom {
|
|
border-bottom: 1px solid var(--cds-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(--cds-spacing-02));
|
|
margin-bottom: var(--cds-spacing-01);
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--cds-text-02);
|
|
}
|
|
|
|
@media (max-width: 671px) {
|
|
.card-wrapper,
|
|
.borderRight {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--cds-ui-03);
|
|
}
|
|
}
|
|
</style>
|