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: @@
-← [[Drupal Home|Return to the Drupal 10 User Guide]]
+{{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.
-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.
 == Elements ==
@@ Line 9: / 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 ==
+{{Callout|type=tip|title=Interactive Example|content=The preview below shows the Lead component using its default configuration.
+To experiment with different settings, open the interactive component playground.
+'''[https://toolkit.swarthmore.edu/?path=/story/swarthmore-theme-components-lead Open Component Playground]'''}}
 {{StorybookComponent|id=swarthmore-theme-components-lead|height=400}}
@@ Line 17: / Line 22: @@
 == 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 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 a '''''Lead '''''component.
+# Provide the '''Abstract''' that will be presented as the '''Lead''' component.
-# Optionally, provide a '''''Call to Action Link '''''in order to drive traffic to related content.
+# Optionally, provide a '''Call to Action Link''' to direct visitors to related content.
 [[Category:Drupal]]
-<!-- Imported from Confluence page id=20513126 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/20513126/Lead+Component) -->