Call To Action

Documentation for Call To Action Component

The Call To Action (CTA) Component is a Vue.js component designed to prominently feature a call-to-action section on a webpage. It includes a header, optional descriptive text, and a button. The button's placement relative to the text can be customized using various orientation options.

Overview

The Call To Action Component utilizes a model object to configure its content and layout. This component dynamically adjusts its display based on the provided properties, allowing for flexible call-to-action sections.

Model Documentation

The model object should be structured to provide the necessary configuration and data for the CTA section:

Model Structure

id: String
A unique identifier for the component, used for the component’s id attribute and potential custom styling.

cssClass: String
Optional CSS class(es) for additional styling of the CTA container.

header: String
Optional header text for the CTA container.

text: String
Optional descriptive text to display alongside or below the button.

buttonText: String
The text to display on the button.

buttonLink: String
The URL that the button should link to.

buttonOrientation: Number
Determines the layout of the button and text. Possible values:

0: Button on the right of the text.

1: Button on the left of the text.

2: Button centered above the text.

3: Button centered below the text.

Example Model

{
  "id": "cta-1",
  "cssClass": "custom-cta",
  "header": "Join Us Today!",
  "text": "Be part of something great. Discover our services and join our community to get started.",
  "buttonText": "Get Started",
  "buttonLink": "/get-started",
  "buttonOrientation": 2
}

Component Structure

The component dynamically generates the CTA layout based on the buttonOrientation property.

HTML Template

The HTML template for the CTA component is structured to handle various button orientations:

JavaScript

The JavaScript part of the component manages the dynamic data and layout adjustments:

Explanation

Props:

model: The component receives a model object as a prop, which contains configuration and data for rendering.

Data:

Text: The descriptive text for the CTA section, initialized from model.text.

ButtonText: The text to display on the CTA button, initialized from model.buttonText.

ButtonLink: The URL to which the button links, initialized from model.buttonLink.

ButtonOrientation: Defines the layout of the button and text, initialized from model.buttonOrientation.

Methods:

getAlignmentClass(alignment): Determines the CSS class for text alignment based on the alignment value.

Component Registration:

The calltoactiondefault component is registered with Vue and uses a template identified by #calltoactiondefault.

Steps to Create Your Own Call To Action Component

Define the Vue Component:

Use Vue.component() or app.component() to register the component.

Create the Template:

Structure the HTML to include the CTA header, text, and button.

Use Vue.js directives (v-if, v-for, :href, etc.) for dynamic rendering based on ButtonOrientation.

Implement JavaScript Logic:

Define props for the model object.

Initialize data properties and implement methods for layout adjustments.

Implement any additional lifecycle hooks if needed.

Customize Styling and Layout:

Adjust CSS classes and styles to match your design requirements.

Test and Debug:

Ensure the component functions correctly with various configurations and screen sizes.

Debug any issues related to data binding or layout rendering.

Deploy the Component:

Integrate the component into your Vue.js application and deploy it as part of your project.

This documentation provides a complete guide to the Call To Action Component, including how to configure, use, and customize it effectively.

Documentation for Call To Action Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Steps to Create Your Own Call To Action Component#