AACCELDesign system
Design system
OverviewAll componentsAll blocksPage previews
Pages
HomepageAboutAcademicsAdmissionsNews & events
Blocks
School highlightsPardot formSite headerAnnouncement barHeroPage heroEventsMission / storySplit featureProgram mosaicNewsFAQStaff gridEnrollment CTACTA bannerSite footer
Actions
ButtonButton groupToggleToggle group
Forms
InputTextareaSelectNative selectComboboxCheckboxRadio groupSwitchSliderFieldLabelInput groupInput OTPCalendarForm example
Feedback
AlertBadgeProgressSpinnerSkeletonEmptyToast
Overlays
DialogAlert dialogSheetDrawerPopoverTooltipHover cardDropdown menuContext menuCommandMenubar
Navigation
TabsAccordionCollapsibleBreadcrumbPaginationNavigation menu
Data display
CardTableAvatarSeparatorAspect ratioCarouselScroll areaResizableItemKbdChart

Page previews

Full pages assembled from the block library — the same compositions as the reference export. They open full-bleed, with the design panel still available.

Homepage

Current ACCEL starter: East Academy split hero, highlights, school story, posts, events, enrollment, tour information and FAQ.

About

School overview composed with the current starter header, school story, highlights and CTA.

Academics

Interior page using the starter’s school feature, highlights and family questions.

Admissions

Current enrollment and tour panels, with the scheduling-unavailable state and family FAQ.

News & events

Current post and event sections with clearly labeled sample content, including an event without a photo.