Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
Aliquam luctus sed turpis felis nam pulvinar risus elementum.
Suspendisse porta efficitur velit. Donec nec eros euismod, euismod nisi eu, efficitur massa.
<PrimerBrandRiverAccordion Align="RiverAlign.End" Items="AccordionItems" />Available properties for accordion items
| Name | Description | Default Value | CSS Class |
|---|---|---|---|
Heading | Accordion item title | "" | RiverAccordion__heading |
Body | Accordion item body content | "" | RiverAccordion__panel |
ActionLabel | CTA text shown inside the panel | null | River__call-to-action |
ActionHref | CTA hyperlink URL | "#" | - |
ImageSrc | Visual image URL shown in the right column | "" | RiverAccordion__visual |
ImageAlt | Alt text for the visual image | "" | - |
Align | Visual alignment: Start, End, Center | Start | RiverAccordion__align-[value] |
private List<RiverAccordionItem> AccordionItems = new()
{
new()
{
Heading = "Heading 1",
Body = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.",
ActionLabel = "Call to action",
ActionHref = "#",
ImageSrc = "/images/placeholder-1.png",
ImageAlt = "Visual content for item 1"
},
new()
{
Heading = "Heading 2",
Body = "Aliquam luctus sed turpis felis nam pulvinar risus elementum.",
ActionLabel = "Learn more",
ActionHref = "#",
ImageSrc = "/images/placeholder-2.png",
ImageAlt = "Visual content for item 2"
},
new()
{
Heading = "Heading 3",
Body = "Suspendisse porta efficitur velit. Donec nec eros euismod, euismod nisi eu, efficitur massa.",
ActionLabel = "View details",
ActionHref = "#",
ImageSrc = "/images/placeholder-3.png",
ImageAlt = "Visual content for item 3"
}
};