You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Currently the Call to Action Card has a property for a single link (url and ctaText), and links the card to it as well as rendering a primary filled button.
There may be a use case for multiple links (no more than say 3) for a card which groups together related calls to action - e.g. links related to a permit application - "Am I eligible?", "Permitted activities", "Apply online".
Motivation
The EPA project is asking for a card with 2-3 related actions like the below:
Structurally and conceptually it's a Call to Action Card, but with multiple links and different visual treatment on the links.
It's possible to achieve this with a data-driven component and some custom code to extract an image & list from the rich text 'Description' field passed from the backend - but gives cause to consider whether this feature might be useful to other projects.
Proposal
To add an extraLinks or secondaryLinks property to the RplCallToActionCard component - an array of objects of type RplLink. Design input would be needed on how to style extra links if set - they could be given less visual weight than what might now be called the 'primary link' passed via url and ctaText (for example, outline buttons, or a inline list of plain links with an arrow or other icon).
Update Tide's 'Call to Action' paragraph type to add a field_extra_links multiple-cardinality Link field, and handle it in ripple-tide-landing-page's component mapping and TideLandingPageCallToAction template.
Benefits
Can be used on 'section landing pages' to direct users to related child pages within a given sub-section, and/or related actions relevant to a given aspect of the site.
Drawbacks
Potential cluttering on the card - needs consideration from content design and visual design perspectives.
Adoption strategy
If implemented via an extra property/field, there should be no breaking changes. Documentation for Ripple & Tide would need to be updated, and a story added to the Ripple storybook.
Additional information
Would you be willing to help implement this feature?
Could this feature be created outside of Ripple-framework as a layer?
Final checks
I have read the contribution guide for information on submitting a feature request.
I have checked the discussions and issues for duplicate feature requests.
The text was updated successfully, but these errors were encountered:
There's an added caveat on the component itself, it uses the accessible container pattern to capture all clicks on the card and trigger a click to the link - it wouldn't work if there is more than one link.
Visually, I think the design could be reused to accommodate this but it would need to be implemented in a separate component (one that doesn't use the accessible container).
Describe the feature
Currently the Call to Action Card has a property for a single link (
url
andctaText
), and links the card to it as well as rendering a primary filled button.There may be a use case for multiple links (no more than say 3) for a card which groups together related calls to action - e.g. links related to a permit application - "Am I eligible?", "Permitted activities", "Apply online".
Motivation
The EPA project is asking for a card with 2-3 related actions like the below:
Structurally and conceptually it's a Call to Action Card, but with multiple links and different visual treatment on the links.
It's possible to achieve this with a data-driven component and some custom code to extract an image & list from the rich text 'Description' field passed from the backend - but gives cause to consider whether this feature might be useful to other projects.
Proposal
To add an
extraLinks
orsecondaryLinks
property to theRplCallToActionCard
component - an array of objects of typeRplLink
. Design input would be needed on how to style extra links if set - they could be given less visual weight than what might now be called the 'primary link' passed viaurl
andctaText
(for example, outline buttons, or a inline list of plain links with an arrow or other icon).Update Tide's 'Call to Action' paragraph type to add a
field_extra_links
multiple-cardinality Link field, and handle it inripple-tide-landing-page
's component mapping andTideLandingPageCallToAction
template.Benefits
Can be used on 'section landing pages' to direct users to related child pages within a given sub-section, and/or related actions relevant to a given aspect of the site.
Drawbacks
Potential cluttering on the card - needs consideration from content design and visual design perspectives.
Adoption strategy
If implemented via an extra property/field, there should be no breaking changes. Documentation for Ripple & Tide would need to be updated, and a story added to the Ripple storybook.
Additional information
Final checks
The text was updated successfully, but these errors were encountered: