Promotional Card

Highlight announcements and offers

npm run add PromotionalCard

Use the PromotionalCard component to highlight announcements and offers in a visually compelling way. They can increase visibility and improve engagement. Use them to announce product launches, events, or new features, or to highlight discounts, limited-time deals, or seasonal campaigns.

New components v1.2.0 • 2024 March 12

Explore Our New Release Introducing new components for our library! Check out our full changelog below.

See changes ->

---
const promotionalCardProps = {
    img: {
        src: '/img/featured.png',
        alt: 'Featured image',
        height: 150,
        width: 500
    },
    badge: {
        text: 'New components',
        theme: 'success',
        rounded: true,
        small: true
    },
    buttons: [{ text: 'See changes ->', theme: 'secondary' }],
    meta: 'v1.2.0 • 2024 March 12',
    title: 'New Release',
    secondary: true
}
---

<PromotionalCard {...promotionalCardProps}>
    <span class="muted">Introducing new components for our library!</span>
</PromotionalCard>

The PromotionalCard component accepts a number of different props, including:

• img: Defines a featured image for the component. You can use the src, alt, width, and height attributes to set the attributes of your image. You can also set the lazy property to true to lazy load the image.
• badge: Defines a badge above the title. For this object, you can use the props of a Badge component, along with a text property to set the text of the badge, and an icon property to assign an icon for the badge. The icon prop can take the value of an SVG string, or use one of the icon types defined here.
• buttons: Defines a list of buttons. You can use the props of a Button component, along with a text and icon property in a similar way to the badge prop.
• meta: Defines additional text shown next to the badge.
• title: Defines the title of the promotional card.
• secondary: The PromotionalCard component extends the Card component, meaning you can use any Card prop on your PromotionalCard to customize its appearance. The secondary prop is specific to the Card component.

Using images, badges, meta details, and buttons are optional, meaning you can use this component in various configurations:

Promotional Popup

You can combine the PromotionalCard component with a transparent Modal component to create promotional popups. To achieve this, simply pass your PromotionalCard inside a Modal component in the following way:

---
import { Button, Modal } from 'webcoreui/astro'
---

<Button className="popup-trigger">Show Promotional Popup</Button>

<Modal className="popup" transparent={true} showCloseIcon={false}>
    <PromotionalCard {...props}>...</PromotionalCard>
</Modal>

<script>
    import { modal } from 'webcoreui'

    modal({
        trigger: '.popup-trigger',
        modal: '.popup'
    })
</script>

Show Promotional Popup

New components v1.2.0 • 2024 March 12

Explore Our New Release Introducing new components for our library! Check out our full changelog below.

See changes ->

You can also assign the modal instance to a variable and call modal.open to trigger the modal programmatically via JavaScript. You can read more about how to work with the Modal component in its documentation.

API

type PromotionalCardProps = {
    img?: {
        src: string
        alt: string
        width: number
        height: number
        lazy?: boolean
    }
    badge?: ({
        text: string
        icon?: string
    } & BadgeProps)
    meta?: string
    title: string
    buttons?: ({
        text: string
        icon?: string
    } & ButtonProps)[]
    className?: string
} & CardProps

You can find more details about the different prop types on the following pages:

• CardProps documentation
• ButtonProps documentation
• BadgeProps documentation