The Four Column Alphabetical List component is designed to help authors efficiently organize and display long lists, such as names of people, businesses, or other items, in a clear, easy-to-read format. Authors can add text and links to each list item, as well as specify anchors or targets if needed. This component is useful when you need to present a large amount of information in alphabetical order, ensuring it remains well-structured and user-friendly, particularly for lists too long for traditional single-column formats.

Example

A

B

  • Barber, Desiree
  • Buchanan, Kira
  • Byrd, Lucy

C

  • Campbell, Carlos
  • Cannon, Nikolas
  • Carlson, Dana
  • Casey, Joseph
  • Coleman, Diego
  • Craig, Mia
  • Crawford, Efrain

D

  • Dominguez, Cristal

E

  • Elliott, Brad
  • Estrada, Weston

G

  • Garza, Brianne
  • Gomez, Josephine
  • Gonzalez, Mckenna
  • Gutierrez, Amelia

H

  • Hunter, Krystal

I

  • Ingram, Brian

K

  • Keller, Bailey
  • Kelly, Skylar

L

  • Lee, Donna
  • Long, Alana

M

  • Mendoza, Christian
  • Mitchell, Alyssa
  • Morrison, Andrew

N

  • Nguyen, Priscilla
  • Norman, Marie

P

  • Padilla, Jenna
  • Patterson, Maxwell

Q

R

  • Robbins, Patricia
  • Rogers, Harley

S

  • Shaw, Sam

T

  • Tran, Luis

U

V

W

  • Wade, Tiara
  • Walton, Nathanael
  • Williamson, Kathryn
  • Woods, Cody

X

Y

Z

Content Options

Authors can customize each item through a simple set of fields:

  • Text: This is the main label for the item. It can be a name, business, or any other text that needs to appear in the list.
  • Link: Optionally, authors can add a URL to make the item clickable. If no link is provided, the text will display as plain, non-interactive content.
  • Anchor: Use this field to link to a specific section or element on the current page. This is useful for creating smooth in-page navigation. Enter the anchor name with a # prefix (e.g., #my-section-id).
  • Target: Authors can choose where the link will open:
    • Same window: Opens the link in the current browser window or tab.
    • New window: Opens the link in a new browser window or tab.

Authors can add, edit, and reorder items under any letter, allowing flexibility in organizing the list content.

Layout and Styling Options

The spacing options allow authors to adjust the visual space above and below the component by selecting a Top Margin and/or Bottom Margin.

Bottom Margin

M

  • Bottom Margin: None

M

  • Bottom Margin: X-Small

M

  • Bottom Margin: Small

M

  • Bottom Margin: Medium

M

  • Bottom Margin: Large

M

  • Bottom Margin: X-Large

the end

Top Margin

M

  • Top Margin: None

M

  • Top Margin: X-Small

M

  • Top Margin: Small

M

  • Top Margin: Medium

M

  • Top Margin: Large

M

  • Top Margin: X-Large

the end

Usage

Do

  • Organize the list thoughtfully by grouping related items under the correct letter to keep it easy to scan.
  • Add links when it makes sense to provide additional information or resources for users.
  • Review the order of items to ensure they follow a logical alphabetical sequence.
  • Add spacing above or below the component to improve its visual separation from other content.
  • Double-check that links and anchors work correctly before publishing.
  • Consider adding a title to provide context for the list so users understand its purpose.
  • Use this component for long lists where a clean, structured layout improves readability.

Don't

  • Avoid using the component for very short lists; a simpler layout might work better.
  • Do not mix unrelated items within the same list.
  • Do not apply inconsistent formatting or casing to text, which can look unprofessional.
  • Avoid placing this component directly next to another large or dense block of content without spacing.
  • Do not use this component when information needs to be displayed in a specific non-alphabetical order.