Lead Component: Difference between revisions

Latest revision as of 13:08, 10 July 2026

The Lead component is useful for pull quotes or highlighting other important text. Optionally, a Call to Action Link can be used to guide visitors toward related content.

Elements

Title (required, not displayed)
Abstract
Call to Action Link

Diagram showing the fields that make up the Lead component.

Figure: The Lead component fields.

Examples

Interactive Example

The preview below shows the Lead component using its default configuration.

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

Open Component Playground

Step-by-step Instructions

Provide a Title for the Lead. Note: This is used for internal purposes only and is not displayed to visitors.
Provide the Abstract that will be presented as the Lead component.
Optionally, provide a Call to Action Link to direct visitors to related content.

@@ Line 1: / Line 1: @@
-The '''''Lead''''' component is useful for pull quotes or highlighting other important text. Optionally, a Call to Action Link can be used to guide visitors towards related content.
+{{DrupalBack}}
+The '''Lead''' component is useful for pull quotes or highlighting other important text. Optionally, a Call to Action Link can be used to guide visitors toward related content.
 == Elements ==
@@ Line 7: / Line 8: @@
 # Call to Action Link
-[[File:Screenshot 2024-06-14 at 1.40.19 PM.png|800px|alt=Diagram demonstrating the elements of the Lead Drupal component]]
+{{Screenshot|Screenshot 2024-06-14 at 1.40.19 PM.png|800px|Diagram showing the fields that make up the Lead component.|The Lead component fields.}}
 == Examples ==
-<!-- Unsupported Confluence macro: aura-html -->
+{{Callout|type=tip|title=Interactive Example|content=The preview below shows the Lead component using its default configuration.
-== Step-by-step Instructions ==
+To experiment with different settings, open the interactive component playground.
-# Provide a '''''Title '''''for the '''''Lead. '''Note: This is used for internal purposes only and is not displayed to visitors.''
+'''[https://toolkit.swarthmore.edu/?path=/story/swarthmore-theme-components-lead Open Component Playground]'''}}
-# Provide the '''''Abstract''''' that will be presented as a '''''Lead '''''component.
-# Optionally, provide a '''''Call to Action Link '''''in order to drive traffic to related content.
+{{StorybookComponent|id=swarthmore-theme-components-lead|height=400}}
-[[Category:Drupal]]
+== Step-by-step Instructions ==
+# Provide a '''Title''' for the '''Lead'''. ''Note: This is used for internal purposes only and is not displayed to visitors.''
+# Provide the '''Abstract''' that will be presented as the '''Lead''' component.
+# Optionally, provide a '''Call to Action Link''' to direct visitors to related content.
-<!-- Imported from Confluence page id=20513126 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/20513126/Lead+Component) -->
+[[Category:Drupal]]