<h2 class="c-typography c-typography__variant--h2" data-component="typography">
Toggle single
</h2>
<div class="u-margin__bottom--5" style="text-align: center;">
<a class="c-button c-button__filled c-button__filled--default c-button--md" data-js-toggle-trigger="example" href="#btn-3" target="_top" data-component="button"><span class="c-button__label">Toggle
background color</span></a>
<div class="u-rounded" data-js-toggle-item="example" data-js-toggle-class="u-color__bg--primary">
<!-- typography.blade.php original: h4 -->
<h3 class="c-typography u-color__text--primary u-margin__top--2 c-typography__variant--h3" data-component="typography">
Toggle me!
</h3>
</div>
</div><!-- typography.blade.php original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-component="typography">
Toggle group
</h4><button class="c-button c-button__filled c-button__filled--default c-button--md c-button__toggle" data-js-toggle-trigger="iddd" data-js-toggle-group="example2" aria-pressed="false" aria-label=
"Box One" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
<span class="c-icon c-icon--code c-icon--material c-icon--material-code c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d="M320 720 80 480 320 240 377 297 193 481 376 664ZM640 720 583 663 767 479 584 296 640 240 880 480Z"></path></svg></span></span> <span class="c-button__label-text">Box
One</span></span></button> <button class="c-button c-button__filled c-button__filled--default c-button--md c-button__toggle" data-js-toggle-trigger="iddd2" data-js-toggle-group="example2"
aria-pressed="false" aria-label="Box Two" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
<span class="c-icon c-icon--code c-icon--material c-icon--material-code c-icon--svg-material c-icon--size-md" aria-hidden="false" role="img" data-nosnippet="" translate="no" aria-label=
"Icon: Undefined" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill="currentcolor" style=
"fill:var(--icon-color, currentColor)">
<path d="M320 720 80 480 320 240 377 297 193 481 376 664ZM640 720 583 663 767 479 584 296 640 240 880 480Z"></path></svg></span></span> <span class="c-button__label-text">Box
Two</span></span></button>
<div class="u-color__bg--default u-rounded">
<div class="u-rounded u-padding--2" data-js-toggle-item="iddd" data-js-toggle-class="u-color__bg--secondary" data-js-toggle-group="example2"></div>
<div class="u-rounded u-padding--2" data-js-toggle-item="iddd2" data-js-toggle-class="u-color__bg--secondary" data-js-toggle-group="example2"></div>
</div>
