@ac-comp-lib/component-library

Framework-agnostic component library: HTML structure + CSS. Use with React, Vue, vanilla JS, or any stack.

Installation

pnpm add @ac-comp-lib/component-library
# or
npm install @ac-comp-lib/component-library

Local development: "@ac-comp-lib/component-library": "file:../ac-component-library"

Publishing to npm

1. Push your code to GitHub: https://github.com/chis-adobe/ac-component-library
2. From the package directory:

   cd ac-component-library
   npm login
   npm publish

Components

Promo Banner

Vanilla JS / Any framework

1. Import the CSS:

   import "@ac-comp-lib/component-library/promo-banner"

   Or in HTML: <link rel="stylesheet" href="node_modules/@ac-comp-lib/component-library/dist/promo-banner.css">

2. Use the HTML structure from templates/promo-banner.html — replace placeholders with your content.

React

import { PromoBannerCard, PromoBannerCardSkeleton } from "@ac-comp-lib/component-library/promo-banner/react"
// CSS is imported automatically by the React wrapper

<PromoBannerCard
  imageUrl="https://..."
  badge="Recommended for you"
  headline="Your headline"
  description="Your description"
  dates={[
    { label: "Book by", value: "Mar 15, 2025" },
    { label: "Travel by", value: "Jun 30, 2025" },
  ]}
  cta={<a href="/book" className="ac-promo-banner__cta-btn">Book now</a>}
/>

Promo Banner class reference

Class	Purpose
ac-promo-banner	Outer section
ac-promo-banner__container	Max-width container
ac-promo-banner__card	Card with image + content
ac-promo-banner__card-img	Background image
ac-promo-banner__badge	Badge pill
ac-promo-banner__headline	Main headline
ac-promo-banner__description	Description text
ac-promo-banner__dates	Date row container
ac-promo-banner__date	Single date block
ac-promo-banner__cta-btn	Optional CTA button style
ac-promo-banner-skeleton	Loading state section
ac-promo-banner-skeleton__card	Loading state card