Requirements
Admins will be able to select the layout of this component: with text or without. Selecting the text option will cause each column to slide over to the right and have a narrower width than the option with no text.
Admins will be able to specify the number of columns: one or two. Helper text to indicate that longer links should use one column, minimum of 4 links for 2 column
When admins select a link(s) to include in this component, the page title will display by default. Admins will have the option to include alternate title for the sake of brevity/display purposes.
When included, the eyebrow text (example: Certificate Programs) will populate automatically based on the parent page of the referenced item. Any page that is associated with a date - a news article or event, for example will display a date as well. If referenced item is a top-level page, no eyebrow text would render.When a user hovers over any of the links in this component, a hover state will be triggered to indicate clickable content. When a user clicks on any of the links in this component, they will be taken to the corresponding page.
Admins will be able to add a max of 10 links, with each column containing five links. When the two-column layout is selected, each column will allow a max of 5 links.There will be no maximum number of links for link list without text. For link list with text, there will be a maximum of 12 links.When viewed on mobile, the links will stack into one column. If the text layout was selected, the text will display above the links.
When the target page for the link is gated, or only available on login, a lock icon is shown.
CMS Fields
# | Field Label | Field Type | Required? | Notes |
|---|---|---|---|---|
1 | Title | single-line text | yes | |
2 | Text Section | checkbox | no | default is selected; checking will allow an admin to enter the populate the text section, as shown in the "getting a jump start..." image shown above |
3 | Text Section Description | multi-line text | no | only available if the text section checkbox is ticked |
4 | Columns | select | yes | one column or two |
5 | Display eyebrow | checkbox | yes | if box is checked, the eyebrow text will be referenced and displayed per requirements |
6 | Add Link | Link List | yes | if two-column layout is selected, links will populate from left to right; in other words, the first link will be in the left column, second link in the right column, third link in the left column, etc. |
7 | Link Text | single-line text | no | field that can be populated if a referenced link/page has a title that is too long for the component. will be present for every link that is added. |
8 | Button | link | no |
https://styleguide.asce.org/section-components.html#asgref-components-link-list