Jump to content

Call to Action Component: Difference between revisions

From Swarthmore Knowledge Base
VisualWikitext
Imported from Confluence
 
Kwhiteb1 (talk | contribs)
itsstaff
189 edits
No edit summary
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
The '''''Call to Action (CTA) '''''component inserts a bit of lead text and accompanying button that is designed to capture the user’s attention and drive traffic to another part of the site. The Call to Action component can be inserted in any of the main page regions.
{{DrupalBack}}
The '''Call to Action (CTA)''' component inserts lead text and an accompanying button designed to capture the user's attention and direct them to another part of the website. The Call to Action component can be inserted into any of the main page content regions.


== Elements ==
== Elements ==
Line 7: Line 8:
# CTA Link
# CTA Link
# CTA Style (''required'')
# CTA Style (''required'')
## <u>Options</u>: Double Border (lead text + link), Minimal (lead text + link, ''default''), Big Button (only link, doesn’t display lead text)
## <u>Options</u>: Double Border (lead text + link), Minimal (lead text + link, ''default''), Big Button (link only; lead text is not displayed)


[[File:Screenshot 2024-06-14 at 1.39.50 PM.png|800px|alt=Diagram demonstrating the elements of the Call to Action component]]
{{Screenshot|Screenshot 2024-06-14 at 1.39.50 PM.png|800px|Diagram showing the fields that make up the Call to Action component.|The Call to Action component fields.}}


== Examples ==
== Examples ==


<!-- Unsupported Confluence macro: aura-html -->
{{Callout|type=tip|title=Interactive Example|content=The preview below shows the Call to Action component using its default configuration.


== Step-by-step Instructions ==
To experiment with different styles and other settings, open the interactive component playground.


# Provide a '''''Title''''' for the component. ''Note: This is used for internal purposes only and is not displayed to visitors.''
'''[https://toolkit.swarthmore.edu/?path=/story/swarthmore-theme-components-call-to-action Open Component Playground]'''}}
# Enter the '''''CTA Lead Text '''''for your call to action (limited to 115 characters). This message should lead users to click the accompanying button (if using a design that contains both the lead text and the button).
# Add a '''''CTA''' '''Link''''' that links to some other part of your site. You can search for the internal link by typing in the title of your page in the '''''Link '''''field, though you will want to update the automatically generated text in the '''''Link text '''''field.
# Select the '''''CTA Style '''''for your component. There are three options: Double Border, Minimal, and Big Button. See the interactive example above. ''Note: "Big Button" will only display the CTA Link field; the teaser will not be displayed.''
# Click '''''Save''''' to create or edit your component.


{{StorybookComponent|id=swarthmore-theme-components-call-to-action|height=350}}


[[Category:Drupal]]
== Step-by-step Instructions ==


# Provide a '''Title''' for the component. ''Note: This is used for internal purposes only and is not displayed to visitors.''
# Enter the '''CTA Lead Text''' (limited to 115 characters). This message should encourage users to click the accompanying button (if using a style that displays both lead text and a button).
# Add a '''CTA Link''' that points to another page. You can search for an internal page by typing its title into the '''Link''' field. After selecting the page, you may edit the automatically generated '''Link text''' if desired.
# Select the '''CTA Style''' for the component. There are three options: '''Double Border''', '''Minimal''', and '''Big Button'''. See the interactive example above. ''Note: The '''Big Button''' style displays only the CTA Link; the lead text is not shown.''
# Click '''Save''' to create or update the component.


<!-- Imported from Confluence page id=20513001 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/20513001/Call+to+Action+Component) -->
[[Category:Drupal]]

Latest revision as of 13:03, 10 July 2026

← Return to the Drupal User Guide

The Call to Action (CTA) component inserts lead text and an accompanying button designed to capture the user's attention and direct them to another part of the website. The Call to Action component can be inserted into any of the main page content regions.

Elements

  1. Title (required, not displayed)
  2. CTA Lead Text
  3. CTA Link
  4. CTA Style (required)
    1. Options: Double Border (lead text + link), Minimal (lead text + link, default), Big Button (link only; lead text is not displayed)
Diagram showing the fields that make up the Call to Action component.
Figure: The Call to Action component fields.

Examples

Interactive Example
The preview below shows the Call to Action component using its default configuration.

To experiment with different styles and other settings, open the interactive component playground.

Open Component Playground



Step-by-step Instructions

  1. Provide a Title for the component. Note: This is used for internal purposes only and is not displayed to visitors.
  2. Enter the CTA Lead Text (limited to 115 characters). This message should encourage users to click the accompanying button (if using a style that displays both lead text and a button).
  3. Add a CTA Link that points to another page. You can search for an internal page by typing its title into the Link field. After selecting the page, you may edit the automatically generated Link text if desired.
  4. Select the CTA Style for the component. There are three options: Double Border, Minimal, and Big Button. See the interactive example above. Note: The Big Button style displays only the CTA Link; the lead text is not shown.
  5. Click Save to create or update the component.
Retrieved from "https://kb.swarthmore.edu/index.php?title=Call_to_Action_Component&oldid=3556"