<Box />

base/box.svelte

"Boxes, essentially, contain other boxes. That's the meaning we'll find if we open them ."
B. Franklin, 1854
Component Box examples :
Using slots
component Box demo using slots
Title of the box
Content of the box
bottom zoone
isOpen boolean
showCloseControl boolean
code 

	<Box class="marg">
		<span slot="titleSlot">Title of the box</span>
		<Icon  slot="iconSlot" fontSize="small" icon="clock" />
		<div class="pad-2">
			Content of the box
		</div>
		<div  slot="bottomZone" class="flex-h gap-small pad border-t marg-ii-1">
			bottom zoone
		</div>
	</Box>
Using props
component Box demo using props
A smart title on a smart box
Some content as text / html
bottomZone as text / html
title string
content string
bottomZone string
icon icon
isOpen boolean
showCloseControl boolean
Api preview :
__propDef: {
    props: {
        [x: string]: any;
        class?: string | undefined;
        element?: HTMLDivElement | null | undefined;
        style?: string | undefined;
        isOpen?: boolean | undefined;
        showCloseControl?: boolean | undefined;
        hasMenu?: boolean | undefined;
        title?: string | undefined;
        icon?: string | undefined;
        iconFamily?: string | undefined;
        content?: string | undefined;
        bottomZone?: string | undefined;
        actions?: any;
    };
    events: {
        [evt: string]: CustomEvent<any>;
    };
    slots: {
        titleBarTitle: {
            slot: string;
        };
        titleBarIcon: {
            slot: string;
        };
        default: {};
        boxBottomZone: {};
    };
};
Link to api :
Api for component "Box"