The JPROT Catalog

Chrome & navigation AlertBar slim dismissible banner for launches or maintenance. alertbannerannouncement Hero sections AvatarHero avatar in a gradient ring with title, subtitle and social links. heroavatarpersonal Media AvatarStack overlapping avatars with a "+N" overflow count. avatarsfacessocial proof Chrome & navigation BackToTop smooth-scroll button pinned to the viewport corner. back-to-topscrollbutton Hero sections BadgeHero headline with a pulsing status pill above it. herobadgestatus Media BeforeAfter side-by-side comparison with a center divider. mediabeforeafter Chrome & navigation Breadcrumbs "Home / Docs / Page" trail with separators. navcrumbspath Buttons ButtonGroup stacked row of mixed primary/outline buttons from `items`. buttonsgrouprow Cards CardBasic the classic surface card: title, description, optional link. cardbasic Cards CardChecklist list card with circle checks; good for "what's included". cardchecklistlist Cards CardFeature graph-like mini card with a score/percent ring bar. cardmetricscore Cards CardHover quiet card that lights up an accent bar and arrow on hover. cardhoverinteractive Cards CardImage image-top card with overlay caption. cardimagecover Cards CardLink arrow card that behaves like a big navigation link. cardnavarrow Cards CardPost blog-post card with date, title, excerpt and "Read" link. cardblogpost Cards CardPrice pricing tier card with a highlighted "popular" variant. cardpricingplan Cards CardTeam avatar, name and role for a people grid. cardteamprofile Cards CardTestimonial quote card with big decorative quotation mark. cardtestimonialquote Hero sections CenteredHero big centered headline, subtitle and two buttons. herocenteredlanding Content blocks CodeBlock terminal-style code window with copy button. codeterminalcopy Forms ContactCard name + email + message form on a surface card. contactformmessage Chrome & navigation CookieBanner bottom consent bar that hides once dismissed. cookieconsentbanner Stats CounterTiles tiled metric blocks that pop on dark or accent backdrops. statstilesmetric Hero sections CoverHero full-bleed image background with a centered overlay panel. herocoverlanding Call-to-action CtaBanner headline + button on a soft accent panel. ctabannercall-to-action Call-to-action CtaGradient colorful gradient card with big centered prompt. ctagradientprompt Call-to-action CtaSplit big left-aligned CTA with supporting buttons on the right. ctasplitcall-to-action Content blocks DefList term/definition pairs for glossaries and specs. definitionsglossaryspecs Stats DotGrid dot-matrix value grid (shares, milestones, leaders). statsdotsgrid Call-to-action DownloadCard fake file card with a download button. downloadfileget Forms EmailCapture header-like hero-lite: headline with an input underneath. emailcapturehero Content blocks FaqAccordion accessible details/summary accordion, no JS required. faqaccordionquestions Badges FeatureChip icon + label feature highlight used in pricing or specs. chipfeaturespec Content blocks HintList numbered "do this first" tips for tutorials and onboarding. tipshintsonboarding Testimonials LogoWall quietly fading grid of client/brand names. logosbrandsclients Media MediaVideo thumbnail with a play button that swaps in the embed. videoembedplay Forms NewsletterBox standalone subscribe card with a pitch and success hint. newsletteremailcard Forms NewsletterStrip slim email capture row, fits inside a footer or under text. newsletteremailsubscribe Buttons OutlineButton ghost button with a border; pairs well with PrimaryButton. buttonghostoutline Chrome & navigation Pagination prev / numbered / next row. paginationpagespager Media PhotoGallery responsive image grid with lazy loading and hover zoom. galleryphotosgrid Media PhotoStack overlapping layers of photos, one poking behind the other. mediaphotosstack Buttons PrimaryButton bold accent button with a few sizes. buttonctaprimary Testimonials QuoteBlock big centered pull-quote with star rating above. quotetestimonialstar Call-to-action RegisterCard event/app registration mini-card with date + button. registereventsignup Testimonials ReviewStars just the stars plus a numeric score, for app-store rows. ratingstarsapp-store Process Roadmap status-tagged milestones: done, building, planned. roadmapmilestonestatus Buttons ShadowButton soft neon shadow, made for dark or colorful backdrops. buttonglowneon Chrome & navigation ShareRow share buttons triggering the native share sheet. sharesocialbuttons Stats SkillBars animated-looking proficiency bars per skill. skillsbarsprogress Hero sections SplitHero two-column hero: headline on the left, image on the right. herosplitlanding Stats StatsBand a flush horizontal band of big numbers. statsnumbersband Stats StatsInline compact inline numbers joined by thin separators. statsinlinecompact Badges StatusBadge dot + label state pill for services, uptime or availability. badgestatusdot Process StepsHorizontal flat numbered row for 2-4 stage processes. stepsprocesshorizontal Process StepsVertical vertical numbered steps with a connecting line. stepsprocesshow-it-works Content blocks StripedTable zebra-striped responsive table. tabledatarows Forms SubscribeBanner full-width accent banner asking for subscribers. subscribebannercta Badges TagPill small removable-style keyword chip. tagpillchip Chrome & navigation TagsFilter clickable tag chips that filter a client-side grid. filtertagschips Hero sections TerminalHero a fake terminal card beside the headline, great for dev tools. heroterminalcode Testimonials TestimonialGrid masonry-ish grid of short quotes at different heights. testimonialsgridquotes Process Timeline dated events down the page, current one highlighted. timelinehistorydates Chrome & navigation TocList table of contents with jump links for on-page anchors. toccontentsanchors Badges VersionBadge monospace version tag, ideal for changelogs and releases. badgeversionchangelog