List presenter

One content-agnostic component in three modes, switched per CSS breakpoint. Narrow the window past lg to see each section change layout.

Stack — facts row

Stacked on mobile, five across from lg. No client JS at all.

  • 1,200+Employees
  • 48Specialties
  • 6Campuses
  • 94%Retention
  • 1926Founded

Carousel → grid — reasons to join

Swipeable dot carousel below lg, three-column grid above it.

Carousel → paginated — training modules

Carousel on mobile; from lg, four per page behind pagination controls.

Paginated everywhere — openings, plus a custom panel

Fifteen items would mean fifteen dots on mobile, so this one paginates at every width. The last child is hand-written in code, interleaved with the mapped items.

  • Registered Nurse — Unit 1

    Safford, AZ
  • Registered Nurse — Unit 2

    Thatcher, AZ
  • Registered Nurse — Unit 3

    Safford, AZ
  • Registered Nurse — Unit 4

    Thatcher, AZ
  • Registered Nurse — Unit 5

    Safford, AZ
  • Registered Nurse — Unit 6

    Thatcher, AZ
  • Registered Nurse — Unit 7

    Safford, AZ
  • Registered Nurse — Unit 8

    Thatcher, AZ
  • Registered Nurse — Unit 9

    Safford, AZ
  • Registered Nurse — Unit 10

    Thatcher, AZ
  • Registered Nurse — Unit 11

    Safford, AZ
  • Registered Nurse — Unit 12

    Thatcher, AZ
  • Registered Nurse — Unit 13

    Safford, AZ
  • Registered Nurse — Unit 14

    Thatcher, AZ
  • Registered Nurse — Unit 15

    Safford, AZ
  • Not seeing your role?

    Hand-written panel, appended after the mapped items.

Standalone carousel

Carousel used directly rather than through ListPresenter — arrows, loop, and autoplay are all in play here, none of which the presenter's carousel range exposes.

Multi-per-view — team testimonials

Three cards per page from md, one below it — per-page dots via Embla's auto slidesToScroll grouping.

Variable height

The container animates its height to the selected slide instead of reserving the tallest one up front.