Svelte Preview Card

Linkcube

Basic preview card that can hold an image, made using svelte

Need a Svelte website built?

Hire a professional Svelte developer today.

Svelte-preview-card

Basic card presenting a title, sub-text, and background image ideally for a grid layout. Also has an event emitter for when it has been clicked.

Demo: http://linkcube.github.io/

Styling

This part is going to be fairly rough until I figure out a standard for themeing across my components, but for now it exposes raw color values for the text and background states.

Usage

let src = "my picture";
<PreviewCard
    background_source={src}
    primary_text="Title"
    sub_text="My Picture"
></PreviewCard>

Exposed Events:

Event	Description
`on:open`	When the card is clicked

Optional settings:

Param	Description	Type
`background_source`	Source for the card's image, defaults to none	String
`primary_text` `sub_text`	Displayed text values, if these are not used the image max-height is increased.	String
`alt_text`	Alt text for the image	String
`disabled`	Whether to disable the card from being clicked	Boolean
`background_color` `primary_text_color` `sub_text_color`	Basic color values	String
`active_color`	Background color of the card when the mouse is held down on it	String
`focus_color`	Background color of the card if clicked	String

Links

Github NPM

Top categories

Need a Svelte website built?

Hire a professional Svelte developer today.