Panel

Panel is a flexible view container with an auto-expand content section. Panel is similar to the card component with more flexibility. For example, it can be used to create a conversation layout.

<script>
    import {Button, Panel, Icon} from '$lib'
</script>

<Panel>
    <div slot="header">
        <Icon icon="check" size="1x" color="primary" />
        Svelte-Spectre
    </div>
    <div slot="nav">
        <strong>About</strong>
    </div>
    <div slot="body">
        A Lightweight, Responsive and Modern UI-kit based on spectre.css and powered by Svelte and SvelteKit
    </div>
    <p slot="footer">
        © 2022 — 2023 BASF SE
    </p>
</Panel>