1mpossible-code / svelte-custom-card

Svelte Custom Card

Customizable and minimalistic svelte Card component.

• Description
• Installation
• Usage
• Contributing
• Credits
• License

---

Description

Svelte Custom Card is a project that implements the most simple, flexible, customizable, light and minimalistic card component with Svelte.

Installation

• To use Card in your component just download it with cURL, wget or just copy raw from the browser.

# cURL
curl -o https://raw.githubusercontent.com/1mpossible-code/svelte-custom-card/master/src/Card.svelte
# wget
wget https://raw.githubusercontent.com/1mpossible-code/svelte-custom-card/master/src/Card.svelte

• To test Card component do following:

git clone https://github.com/1mpossible-code/svelte-custom-card.git
cd svelte-custom-card
npm install
npm run dev

Usage

To use this Card you need to import it to your svelte component. Then there are 2 ways to specify data to it. Card has 2 default slots: title and description.

To add image to the card use prop image where you need to specify the link to your image.

To make a link you may use default button (specify props link and linkTitle with the url and title accordingly) or slot link with your own designed button.

Example of real usage.

Example usage

<script>
    import Card from './Card.svelte'
</script>

<div>
      <!-- Card with prop link -->
      <Card image="https://via.placeholder.com/320x180/" link="https://example.com" linkTitle="Link">
          <h3 slot="title">Title</h3>
          <p slot="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, ratione!</p>
      </Card>
      
      <!-- Card with slot link -->
      <Card image="https://via.placeholder.com/320x180/">
          <h3 slot="title">Title 2</h3>
          <p slot="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, ratione!</p>
          <a slot="link" href="https://example.com">Link</a>
      </Card>
</div>

Contributing

Feel freely to contribute this project. Issues and PRs are welcome!

Credits

You can mail to [e-mail] to contact the author

License

Copyright © 2021 1mpossible-code. This project is GPLv3 licensed.