Built-In Components: Pagination, FAQ, TOC and Callouts
Need this adapted for your organization? Work with AstroWeb.dev — Astro services by NViewsWEB.
AstroWEBTheme
Build with AstroWeb.dev
Featurecomponentsseomdx

Built-In Components: Pagination, FAQ, TOC and Callouts

Ready-made, CSP-safe Astro components for the parts every content site needs: pagination, FAQ with schema, table of contents, callouts, breadcrumbs and more.

By

The theme ships the components that content sites keep rewriting. They use no inline handlers, take plain props and, where it helps search engines, print structured data.

Pagination

core/components/Pagination.astro takes currentPage, totalPages and basePath, plus an optional firstPageBasePath for routes where page one lives at a different URL. Page one links to /<base>/, later pages to /<base>/<n>/, and long lists collapse to first, last and the neighbours of the current page with an ellipsis. Pair it with PaginationSeo.astro in the head, which prints rel="prev" and rel="next" links. LoadMorePosts.astro offers a load-more alternative.

<Pagination currentPage={page} totalPages={pages} basePath="/blog/page" firstPageBasePath="/blog" />

FAQ

FaqList.astro renders each item as a details and summary pair, so it works without JavaScript, and prints FAQPage JSON-LD.

<FaqList items={[{ question: "Is it free?", answer: "Core is free." }]} heading="Questions" openAll={false} />

Options include id, heading, headingTag (h2 to h5), openAll, addSchema, htmlAnswers and class hooks for the section, list, question and answer. Items can set speakable: true for speakable schema.

Table of contents

TableOfContents.astro takes the heading list Astro produces, so it needs no scripting to build.

<TableOfContents toc={headings} heading="On this page" depth="h2,h3" />

depth is h2 or h2,h3. The layouts for posts and docs place it in the sidebar.

Callouts

CalloutBox.astro is MDX-friendly: the body is the default slot. The type accepts aliases that map to four looks plus promotional variants.

Group Types
Info note, info, summary, hint, important, details
Success tip, success, idea, ok, check, done
Warning warning, caution, attention
Error error, danger, bug, fail, issue, stop
Promo promo, cta, cta-primary, cta-secondary 
<CalloutBox type="tip" heading="Pro tip">Short, useful advice.</CalloutBox>

Each type gets a default heading, a local SVG icon (CSP-safe) and an ARIA role: warning for warnings and errors, region for the rest, with a roleOverride prop.

Navigation and content helpers

  • Breadcrumb.astro builds the trail from the URL and prints BreadcrumbList JSON-LD; pass breadcrumbs to override.
  • PrevNextNav.astro, RelatedPostsList.astro and TagList.astro connect articles.
  • BlockQuote.astro, Table.astro, StarRating.astro, Card.astro, Button.astro and VideoPlayer.astro cover common content blocks.
  • ShareLink.astro, SocialLink.astro and QrCode.astro handle sharing.
  • SvgIcon.astro loads icons inline or from files (see the SvgIcon component).

Where they live

Reusable ones are in core/components/ and core/components/ui/. Project-level versions and wrappers are in src/components/, which is the safe place to override one. Their styles are in core/styles/components/ (callout.css, faq.css, toc.css, table.css, blockquote.css, star-rating.css).