UX/UI Requirements

• The text will always be to the left and the button will always be to the right.

• When added, the jumplink box will always be center aligned. At the top of the page, it will be overlapping the bottom border of the hero. On scroll it will stick to the top center of the page.
• Each jumplink item will indicate clickable content

• Item to display headshot, and basic information of the related person.

No UX/UI requirements documented.

No UX/UI requirements documented.

No UX/UI requirements documented.

No UX/UI requirements documented.

No UX/UI requirements documented.

No UX/UI requirements documented.

• This component will be placed in a consistent location… [Describe the component’s placement on the page.]
• Buttons for sharing options will… [Describe the visibility and layout of the buttons.]
• This component will not be displayed on mobile devices (i.e. below 768px breakpoint). [Describe mobile visibility.]
• When clicking a social service button, a native modal for that service will appear.See SEO and Metatags regarding the data social services usually pull in.
• When clicking the email button, the user’s default email application will be invoked, using the following hard-coded content:Subject: ‘From [Client Organization (Acronym)] – page title
• Body:Hi! I thought you would be interested in this information from [Client Organization (Acronym)]:[current page url]

• Appears at the bottom of the page (if not already dismissed)

• Displays above the hero component
• The current page will not appear in the breadcrumb
• Breadcrumb will display in a single line, wrapping to next line when available space is limitedDoes each breadcrumb text get truncated?
• Does the entire breadcrumb disappear based on screen size?
• Does the breadcrumb display a submenu(s)?
• Breadcrumb should display on mobile

No UX/UI requirements documented.

• Popup modal with dark backdrop. Please use primary navy blue color used elsewhere in the site.

• This component required 2 image items, no more or less

• Card items are added from left to right

• The user can choose if the image/video is left or right aligned.The default layout is left aligned image/video

• Component fields will always be left aligned and link list will always be right aligned

• Each item has required left side items and right side items
• On hover, new fields display for both the left and right side content
• Character count will be determined in front end development

No UX/UI requirements documented.

• Intro text always displays center aligned, above the accordion items.
• By default all items will be closed on initial page load
• One drawer can be open at a time
• Component allows an unlimited number of accordion items
• Component should not have a minimum on accordion items (added 250521)

• The component fields will always be left aligned to the left of the cards and the card items will always to the right of it.
• A maximum of 10 items will appear in this componentWhen more then 3 items are added a carousel appears
• If no articles or events are related to the person selected, the component does not render.

• This component requires a minimum of 1 card items and no maximum When 1 item is added, the card fills the width of the container
• When 2 items are added, the card items appear side by sideImages to never appear when only 2 items are added
• When 4 items are added, the 4th card item wraps the the second line and is left aligned

• This component requires a minimum of 3 card items and no maximum under the "All" filterWhen 4 items are added within a filter, the 4th card item wraps the the second line and is left aligned
• Filters are automatically hidden if there are less then 2 audience facets returned

• Title will be left aligned and link will be right aligned

• The component fields will always be left aligned above the cards and the card items will always be below it.
• A maximum of 10 items will appear in this componentWhen more then 4 items are added a carousel appears
• If more than 50% of referenced articles are using a fallback image, all items should not display an imageAdd a class for no images variation

• The component fields will always be left aligned above the cards and the card items will always be below it.

• This component requires a minimum and maximum of 3 card items
• The component will be center aligned

• This component requires a minimum of 5 items and no specified maximum.
• Images can be manually advanced by site visitors (i.e. no autoscroll). Arrows only appear if more than 5 images are included in the gallery.

• This component requires a minimum of 1 and maximum of 2

• The media links will be added from left to right
• Icon centers vertically when text wraps

• Component will display up to 4 items before wrapping to the following line.
• Component is always center aligned

• Card items are added from left to right and wrap to the next line after the 4th card
• When a user hovers over the card items, image appears

• A minimum and maximum of 5 items will appear in this component

• The component fields will always be left aligned above the cards and the card items will always be below it.
• A maximum of 10 items will appear in this componentWhen more then 4 items are added a carousel appears
• If more than 50% of referenced items are using a fallback image, all items should not display an imageAdd a class for no images variation

No UX/UI requirements documented.

• The component should Display content in a configurable 2-column or 3-column grid arrangement
• Maintain consistent spacing and alignment even when the amount of content varies between columns
• On mobile, columns automatically stack vertically in left-to-right reading order (col 1 → col 2 → col 3)

No UX/UI requirements documented.

No UX/UI requirements documented.

• This component requires a minimum of 3 card items and a maximum of 4When 3 items are added, the component fields appear to the left of the card items
• When 4 items are added, the content fields appear above the card items

• The component fields & tabs will always be above the items
• There are a min of 2 tabs required and a max of 4
• On mobile, the tabs convert to a slider

• The image(s) will always appear to the left of the quote
• Pagination appears based on how many items have been addedMax of 5 items can be added
• If only one item is added, the pagination does not appear

• This component requires a minimum of 2 items and a maximum of 3
• Items always appear side by side

• The form fields are hard coded

No UX/UI requirements documented.