Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 7983

4.1 Accordion

When accordion items share the same group name, they function as a traditional accordion where only one item in the group can be open at a time. In Sitecore, the group name defaults to the accordion group template's display name.

Component.Accordion.Group - Accordion Group Component.Accordion.Standalone - Accordion Standalone
Sub Components in Design:

    Example s

    (default)

    Full Width - Takes full width of the container without the need for a modifier class

    Header 1
    Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)

    Header 2
    Rerum libg dero pariatur (40 Characters)

    .w_third-2

    Two-thirds width

    Header 1
    Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)

    Header 2
    Rerum libg dero pariatur (40 Characters)

    .w_third-1

    One-third width

    Header 1
    Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)

    Header 2
    Rerum libg dero pariatur (40 Characters) 
    <div class="relative [modifier class]">
	<section aria-label="GroupedAccordion">
		<details accordion name="GroupedAccordion" class="isolation_isolate m-b_3">
			<summary class="sticky inset_0 b_auto z_3 bg_white h:bg_primary-5 c_primary-n2 br_radius shadow_bevel-light br_solid br_1 br_black-2">
				<hgroup class="flex flex_row">
					<span class="fa-stack flex_shrink m_2 br_radius">
						<i class="fa-solid fa-minus fa-stack-1x" aria-hidden="true"></i>
						<i class="fa-solid fa-minus rotate_90 a:rotation fa-stack-1x" aria-hidden="true"></i>
					</span>
					<h3 class="flex_auto m-y_2 inline-block self_center">Header 1</h3>
				</hgroup>
			</summary>
			<div id="SanitizedLabel" class="z_0 bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light transition_4 m-b_2">
				<div data-content>
					Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100&nbsp;Characters)				</div>
			</div>
		</details>
		<details accordion name="GroupedAccordion" class="isolation_isolate m-b_3">
			<summary class="sticky inset_0 b_auto z_3 bg_white h:bg_primary-5 c_primary-n2 br_radius shadow_bevel-light br_solid br_1 br_black-2">
				<hgroup class="flex flex_row">
					<span class="fa-stack flex_shrink m_2 br_radius">
						<i class="fa-solid fa-minus fa-stack-1x" aria-hidden="true"></i>
						<i class="fa-solid fa-minus rotate_90 a:rotation fa-stack-1x" aria-hidden="true"></i>
					</span>
					<h3 class="flex_auto m-y_2 inline-block self_center">Header 2</h3>
				</hgroup>
			</summary>
			<div id="SanitizedLabel" class="z_0 bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light transition_4 m-b_2">
				<div data-content>
					Rerum libg dero pariatur (40&nbsp;Characters)				</div>
			</div>
		</details>
	</section>
</div>
    Copy Code