https://github.com/floofies/tagcards
Tiny taggable HTML cards for my portfolio.
https://github.com/floofies/tagcards
card ecard taggable tags web-widgets
Last synced: about 1 year ago
JSON representation
Tiny taggable HTML cards for my portfolio.
- Host: GitHub
- URL: https://github.com/floofies/tagcards
- Owner: Floofies
- Created: 2021-10-23T13:27:23.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-11-27T14:10:01.000Z (over 4 years ago)
- Last Synced: 2025-01-28T23:28:35.771Z (over 1 year ago)
- Topics: card, ecard, taggable, tags, web-widgets
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Taggable Cards
I made these tiny taggable "cards" to show off my GitHub projects. I was initally using [Unofficial GitHub Cards](https://github.com/lepture/github-cards), but the complexity and network overhead outweighed my simple needs.
## How-To
I made this as quickly as possible. Just import the CSS and JS files into your document. You can create your own taggable cards in two steps: Write one or more stubs which are rendered into full cards during initial document load. The script scans for all stubs in the live document upon loading, replacing them with fully rendered cards.
1. Create an empty parent element (stub) of any type that allows child elements.
2. Set the `class` attribute to `tagCard` and fill-in the [Data Attributes](#attributes).
3. The script scans for all elements of class `tagCard`, and then reads data from your stub elements.
4. The script replaces all stubs with their fully rendered cards.
You can then save the resultant HTML/CSS for use on a static page, or let the script run clientside every time.
## Attributes
There are several valid W3C Data Attributes, to be used on valid parent elements only:
Attribute|Summary
---|---
`data-title`|Sets the card's title/heading text.
`data-description`|Sets the card's description/content text.
`data-tags`|Sets the card's string tags. *Comma-sepearated strings are required.*
`data-url`|Links the card to a URL by wrapping the card in an `anchor` element.
## Example
Here is an example of a hand-written stub:
```html
```
After the script runs, it will have replaced the stub with a tagged card.
Here is an example of such a card:
```html
```