Blue Highlight

Overview

The VHighlight component is a versatile UI component designed for highlighting specific topics, products, or services. It is highly customizable and provides options for a background image, bottom image, and a call-to-action button.

Features

• Customizable Background: Add a gradient overlay with an image.
• Dynamic Button: Include a customizable button with dynamic URL parameters.
• Optional Bottom Image: Display a decorative image below the content.

Importing the Component

To use the VHighlight component, import it as follows:

import VHighlight from 'UiKit/components/VHighlight/VHighlight.vue';

Component Props

The component accepts the following props:

Default Slot

The VHighlight component supports a default slot for custom content. This slot is rendered within the highlight container.

Computed Properties

The following computed properties are used internally:

• backgroundImageLocal: Generates a linear gradient overlay over the background image.
• showImageBottom: Returns true if a valid imageBottom prop is provided.
• showButton: Returns true if a valid buttonText prop is provided.

Full Example with All Features

<script setup lang="ts">
import VHighlight from 'UiKit/components/Ads/VHighlight.vue';

const backgroundImage = '/images/highlight-bg.jpg';
const imageBottom = '/images/bottom-img.png';
const topic = 'products';
const buttonText = 'Learn More';
</script>

<template>
  <VHighlight
    :backgroundImage="backgroundImage"
    :imageBottom="imageBottom"
    :topic="topic"
    :buttonText="buttonText"
  >
    <h1>Welcome to Our Products</h1>
    <p>Discover a range of solutions tailored for you.</p>
  </VHighlight>
</template>

Notes

• Ensure the URLs provided for backgroundImage and imageBottom are accessible.
• The buttonText and topic props dynamically update the button's link URL.

Example