Jump to content

Link List Component: Difference between revisions

From Swarthmore Knowledge Base
Kwhiteb1 (talk | contribs)
No edit summary
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{DrupalBack}}
The '''Link List''' component is a styled collection of links designed to direct users to related resources or content.
The '''Link List''' component is a styled collection of links designed to direct users to related resources or content.


Line 10: Line 11:
## <u>Options</u>: Vertical (default), Horizontal
## <u>Options</u>: Vertical (default), Horizontal


[[File:Screenshot 2024-06-14 at 1.39.07 PM.png|472px|alt=Diagram demonstrating the parts of the Link List component in Swarthmore's Drupal implementation]]
{{Screenshot|Screenshot 2024-06-14 at 1.39.07 PM.png|472px|Diagram showing the fields that make up the Link List component.|The Link List component fields.}}


== Examples ==
== Examples ==


{{StorybookComponent|id=components-link-list--link-list|height=650}}
{{Callout|type=tip|title=Interactive Example|content=The preview below shows the Link List component using its default configuration.
 
To experiment with different layouts and other settings, open the interactive component playground.
 
'''[https://toolkit.swarthmore.edu/?path=/story/swarthmore-theme-components-link-list Open Component Playground]'''}}
 
{{StorybookComponent|id=swarthmore-theme-components-link-list|height=650}}


== Step-by-step Instructions ==
== Step-by-step Instructions ==


# Provide a '''''Title '''''for the '''''Link List. '''''
# Provide a '''Title''' for the '''Link List'''.
# Choose the '''''Link List Layout '''''to display the component in '''''Vertical''''' or '''''Horizontal '''''alignment.
# Choose the '''Link List Layout''' to display the component in '''Vertical''' or '''Horizontal''' alignment.
## '''''Vertical''''' display is the best option for lists containing over 4 links.
## '''Vertical''' display is the best option for lists containing over 4 links.
## '''''Horizontal '''''display is a good option for four or fewer links.
## '''Horizontal''' display is a good option for four or fewer links.
# Add links to the '''''Link Listing''''' area:
# Add links to the '''Link Listing''' area:
## If you're linking to a page within Drupal, begin to type the title in the '''''Link '''''field and select it from the autocomplete suggestions. The '''''Link text''''' field will automatically populate, but can be altered. If your link is outside of http://swarthmore.edu , simply paste the URL.
## If you're linking to a page within Drupal, begin to type the title in the '''Link''' field and select it from the autocomplete suggestions. The '''Link text''' field will automatically populate, but can be altered. If your link is outside of http://swarthmore.edu, simply paste the URL.
### If you're linking to a document that's already been uploaded to Drupal:
### If you're linking to a document that's already been uploaded to Drupal:
#### Click the blue '''''Link to a document''''' button to reveal the file browser.
#### Click the blue '''Link to a document''' button to reveal the file browser.
#### Use the file browser to locate and select the appropriate file.
#### Use the file browser to locate and select the appropriate file.
#### If you need to link to an archived document, click '''''Document Archive '''''tab and locate your file.
#### If you need to link to an archived document, click the '''Document Archive''' tab and locate your file.
#### Click '''''Select Document''''' from the file browser toolbar.
#### Click '''Select Document''' from the file browser toolbar.
### If you're linking to a document that has not yet been uploaded to Drupal:
### If you're linking to a document that has not yet been uploaded to Drupal:
#### Click the blue '''''Link to a document''''' button to reveal the file browser.
#### Click the blue '''Link to a document''' button to reveal the file browser.
#### Click the '''''Upload Document''''' button from the file browser toolbar
#### Click the '''Upload Document''' button from the file browser toolbar.
#### Click the '''''Choose File''''' button to browse your local system for the file, select it, and click the '''''Upload '''''button.
#### Click the '''Choose File''' button to browse your local system for the file, select it, and click the '''Upload''' button.
#### Click '''''Select Document''''' from the file browser toolbar.
#### Click '''Select Document''' from the file browser toolbar.
## Add additional link fields by clicking the '''''Add another item '''''button.
## Add additional link fields by clicking the '''Add another item''' button.
## Remove unwanted links by clicking the '''''Remove''''' button.
## Remove unwanted links by clicking the '''Remove''' button.
 


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

Latest revision as of 20:23, 9 July 2026

The Link List component is a styled collection of links designed to direct users to related resources or content.

Elements

The Link List component contains the following fields. Even though some fields are not listed as required, we strongly suggest you fill in those listed below so that the component doesn’t look malformed or awkward.

  1. Title (required)
  2. Link Listing (required)
  3. Layout (required)
    1. Options: Vertical (default), Horizontal
Diagram showing the fields that make up the Link List component.
Figure: The Link List component fields.

Examples

Interactive Example
The preview below shows the Link List component using its default configuration.

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

Open Component Playground



Step-by-step Instructions

  1. Provide a Title for the Link List.
  2. Choose the Link List Layout to display the component in Vertical or Horizontal alignment.
    1. Vertical display is the best option for lists containing over 4 links.
    2. Horizontal display is a good option for four or fewer links.
  3. Add links to the Link Listing area:
    1. If you're linking to a page within Drupal, begin to type the title in the Link field and select it from the autocomplete suggestions. The Link text field will automatically populate, but can be altered. If your link is outside of http://swarthmore.edu, simply paste the URL.
      1. If you're linking to a document that's already been uploaded to Drupal:
        1. Click the blue Link to a document button to reveal the file browser.
        2. Use the file browser to locate and select the appropriate file.
        3. If you need to link to an archived document, click the Document Archive tab and locate your file.
        4. Click Select Document from the file browser toolbar.
      2. If you're linking to a document that has not yet been uploaded to Drupal:
        1. Click the blue Link to a document button to reveal the file browser.
        2. Click the Upload Document button from the file browser toolbar.
        3. Click the Choose File button to browse your local system for the file, select it, and click the Upload button.
        4. Click Select Document from the file browser toolbar.
    2. Add additional link fields by clicking the Add another item button.
    3. Remove unwanted links by clicking the Remove button.