ct-card

A stylized container component that provides a surface for displaying content.

Installation

To include this, type:

$ pnpm i @conectate/ct-card
# or
$ npm i @conectate/ct-card

Usage

<!-- Basic card -->
<ct-card>Basic card</ct-card>

<!-- With decorator (top border) -->
<ct-card decorator>Card with decorator</ct-card>

<!-- With border -->
<ct-card withborder>Card with border</ct-card>

<!-- With padding -->
<ct-card padding>Card with padding</ct-card>

<!-- With theme -->
<ct-card primary>Primary themed card</ct-card>
<ct-card secondary>Secondary themed card</ct-card>
<ct-card tertiary>Tertiary themed card</ct-card>
<ct-card error>Error themed card</ct-card>

Using Card Content and Actions

<ct-card>
	<div class="card-content">This is the main content of the card.</div>
	<div class="card-actions">
		<button>Action 1</button>
		<button>Action 2</button>
	</div>
</ct-card>

Theming

This component uses CSS custom properties for theming:

| Property | Description | | ------------------------------ | --------------------------------------------- | | --border-radius | Border radius of the card (default: 16px) | | --color-surface | Background color | | --color-on-surface | Text color | | --color-primary-container | Background for primary variant | | --color-on-primary-container | Text color for primary variant | | --color-secondary-container | Background for secondary variant | | --color-on-secondary-container | Text color for secondary variant | | --color-tertiary-container | Background for tertiary variant | | --color-on-tertiary-container | Text color for tertiary variant | | --color-error-container | Background for error variant | | --color-on-error-container | Text color for error variant | | --color-outline | Border color when using withborder attribute | | --color-app | Color for the decorator (top border) | | --ct-card-box-shadow | Custom box-shadow when using shadow attribute |

API

Properties

| Property | Type | Default | Description | | ---------- | ------- | ------- | ----------------------------- | | decorator | Boolean | false | Add border-top with color-app | | withborder | Boolean | false | Add border around the card | | primary | Boolean | false | Apply primary theme colors | | secondary | Boolean | false | Apply secondary theme colors | | tertiary | Boolean | false | Apply tertiary theme colors | | error | Boolean | false | Apply error theme colors | | shadow | Boolean | false | Add box-shadow (deprecated) | | padding | Boolean | false | Add 16px padding to the card |

Slots

| Name | Description | | --------- | ----------------------------- | | (default) | Main content area of the card |

CSS Classes

You can use these classes inside the card to get predefined styles:

| Class | Description | | ------------- | ------------------------------------ | | .card-actions | For action buttons (adds top border) | | .card-content | For content (adds padding) |

Follow me

https://x.com/herberthobregon

https://dev.to/herberthobregon

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

History

• v1.0.1 Initial Release

License

See LICENSE