open-index/open-npm huggingface dataset:
npm package: @nortic/promo-goblin
Description: <p align="center">   <img alt="Goblin" width="300" src="./promo-goblin.png" title="hover text"> </p>
Latest version: 0.0.8

<p align="center">
  <img alt="Goblin" width="300" src="./promo-goblin.png" title="hover text">
</p>

# Promo Goblin

A simple Web Component that displays a dynamic hero section with a random background, tagline, title, description, and an optional call-to-action button

## Features

- Randomly selects a set of data for tagline, title, description, and background image.
- Shows a CTA button if a `ctaLink` is provided.
- Uses **Shadow DOM** for encapsulation.

## Usage

1. Include the `index.js` script in your HTML:

### Example:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promo Goblin</title>
    <script type="module" src="https://unpkg.com/@nortic/promo-goblin@latest/dist/index.es.js"></script>
  </head>
  <body>
    <promo-goblin></promo-goblin>
  </body>
</html>
```

2. The component will display a randomly selected hero section, including a background image and optional CTA button.

## Customization

- **Data**: To change the content (such as tagline, title, description, or background image), update the relevant fields in both the language files under `locales` (for text) and also in the data list inside `promoData.ts` (for things like background images and brand settings).
- **Styles**: A minimal portion of the styling is implemented using standard CSS, primarily for foundational layout and background settings. The majority of the visual design, however, is managed through UnoCSS utility classes applied directly within the HTML structure. As a result, UnoCSS is responsible for generating most of the component’s styles.