Carousel footer
The row under a carousel: a status line (count, caption) on the left and previous / next arrow buttons on the right. Two sizes, optional top border.
Built withButton
Examples
Carousel footer
Medium (default): a 16px status line and 48px arrows. The arrows are secondary-dark icon-only Buttons.
<div style="width:40rem;max-width:100%"><footer class="kompan-carousel-footer">
<p class="kompan-carousel-footer__info">1 of 5</p>
<div class="kompan-carousel-footer__controls">
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_md kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Previous"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_md kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Next"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
</div>
</footer></div>Sizes
Medium and Small (36px arrows, 14px text).
<div style="display:grid;gap:1.5rem;width:40rem;max-width:100%">
<footer class="kompan-carousel-footer">
<p class="kompan-carousel-footer__info">1 of 5</p>
<div class="kompan-carousel-footer__controls">
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_md kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Previous"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_md kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Next"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
</div>
</footer>
<footer class="kompan-carousel-footer kompan-carousel-footer_sm">
<p class="kompan-carousel-footer__info">1 of 5</p>
<div class="kompan-carousel-footer__controls">
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Previous"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Next"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
</div>
</footer>
</div>With top border
Type=Top border separates the footer from the track above it.
<div style="display:grid;gap:1.5rem;width:40rem;max-width:100%">
<footer class="kompan-carousel-footer kompan-carousel-footer_bordered">
<p class="kompan-carousel-footer__info">Federal Hill Commons Park, Noblesville</p>
<div class="kompan-carousel-footer__controls">
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_md kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Previous"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_md kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Next"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
</div>
</footer>
<footer class="kompan-carousel-footer kompan-carousel-footer_bordered kompan-carousel-footer_sm">
<p class="kompan-carousel-footer__info">Federal Hill Commons Park, Noblesville</p>
<div class="kompan-carousel-footer__controls">
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Previous"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Next"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
</div>
</footer>
</div>Arrow tones
On neutral (default), Brand, and On image — the 28px translucent variant that sits on top of a photo.
<div style="display:flex;flex-wrap:wrap;gap:2rem;align-items:center">
<div class="kompan-carousel-footer__controls">
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Previous"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
<button type="button" class="kompan-button kompan-button_secondary-dark kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Next"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
</div>
<div class="kompan-carousel-footer__controls">
<button type="button" class="kompan-button kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Previous"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
<button type="button" class="kompan-button kompan-button_sm kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Next"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
</div>
<div style="padding:1rem;border-radius:0.5rem;background:#2b2d30"><div class="kompan-carousel-footer__controls">
<button type="button" class="kompan-button kompan-button_branch kompan-carousel-footer__arrow_on-image kompan-button_xs kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Previous"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
<button type="button" class="kompan-button kompan-button_branch kompan-carousel-footer__arrow_on-image kompan-button_xs kompan-button_icon-only kompan-carousel-footer__arrow" aria-label="Next"><svg class="kompan-button__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
</div></div>
</div>Accessibility
- Arrows are buttons with names
Previous and Next are icon-only buttons; keep the aria-label on each. Disable (not hide) an arrow at the end of a non-looping carousel so the position stays understandable.
- Announce position changes politely
Put aria-live="polite" on the status line when it shows the current index ("3 of 5"), so screen-reader users hear where the arrows took them without the carousel stealing focus.
- Not the only way to scroll
The arrows are a convenience for pointer users. The carousel track itself must be scrollable with the keyboard and by touch — see the Media module.
Stylesheet
Shipped as @wah-kompan/kompan-ui/components/carousel-footer.css. Every value is a token reference, so it themes with the rest of the system rather than being restyled. The shipped file also imports Button — what this component is built with — so one import is enough.
css
.kompan-carousel-footer {
--kompan-carousel-footer-font-size: var(--type-font-size-md);
--kompan-carousel-footer-line-height: var(--type-line-height-md);
--kompan-carousel-footer-border-gap: var(--spacing-xl);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-4xl);
box-sizing: border-box;
margin: 0;
font-family: var(--type-font-family-body);
}
.kompan-carousel-footer_sm {
--kompan-carousel-footer-font-size: var(--type-font-size-sm);
--kompan-carousel-footer-line-height: var(--type-line-height-sm);
--kompan-carousel-footer-border-gap: var(--spacing-lg);
}
.kompan-carousel-footer_bordered {
border-top: var(--stroke-sm) solid var(--color-border-secondary);
padding-top: var(--kompan-carousel-footer-border-gap);
}
.kompan-carousel-footer__info {
flex: 1 1 auto;
min-width: 0;
max-width: var(--width-paragraph-max-width);
margin: 0;
color: var(--color-text-primary);
font-size: var(--kompan-carousel-footer-font-size);
font-weight: var(--type-font-weight-regular);
line-height: var(--kompan-carousel-footer-line-height);
}
.kompan-carousel-footer__controls {
display: flex;
flex: none;
gap: var(--spacing-xl);
}
/* Arrows are Buttons; the footer only rounds them and blurs what is behind */
.kompan-carousel-footer__arrow {
border-radius: var(--radius-full);
backdrop-filter: blur(8px);
}
.kompan-carousel-footer__arrow_on-image {
--kompan-button-bg: var(--color-utility-alpha-white-90);
}