Component Library

Every component in Xanthan, with its parameters and copy-paste code. Drop any of these into a page using the code shown, and the component renders automatically.

Inline Image

File: images/figure.html

Places an image in your content with caption and alt-text. Text wraps around left and right images.

{% include images/figure.html
  class="right"
  width="40%"
  caption="A descriptive caption"
  alt-text="Description for screen readers"
  image-path="/assets/images/photo.jpg"
%}

Side-by-side: Use two figure.html includes with class="left" and width="48%", then add <p style="clear:both"></p> after both.

Jumbotron

File: images/jumbotron.html

Full-browser-width image that breaks out of the page content margins. Use it as a pure visual break, or add text — the gradient fade is applied automatically so text reads cleanly against the image.

{% include images/jumbotron.html
  image-path="/assets/images/backgrounds/pano-1.jpg"
  height="50vh"
  box-align="left"
  text="A pull quote or caption that sits on the clear left side of the image."
  background-position="center right"
  caption="Source: Maxwell Museum of Anthropology."
%}

box-align controls both text placement and gradient direction:

No text or title? The gradient is omitted — the include renders as a clean full-width image break.

Before/After Slider

File: images/juxtapose.html

Draggable slider for comparing two images. Uses the Juxtapose library.

{% include images/juxtapose.html
  image1="/assets/images/before.jpg"
  image2="/assets/images/after.jpg"
  caption="Before and after renovation."
  starting-position="50%"
%}

Image Carousel

File: images/carousel.html

Slideshow of multiple images with optional titles and captions. Requires pre-defined lists.

{% assign images =
"/assets/images/photo-1.jpg,
/assets/images/photo-2.jpg,
/assets/images/photo-3.jpg" | split: ','
%}

{% assign headers =
"First Title,,Third Title" | split: ','
%}

{% assign captions =
"Caption for first image|
Caption for second image|
" | split: '|'
%}

{% include images/carousel.html
  width="80%"
  class="center"
  images=images
  headers=headers
  captions=captions
%}

Alert Box

File: typography/alert.html

Colored callout box for tips, warnings, or important information.

{% include typography/alert.html
  class="info"
  title="Note"
  text="Your message here. **Markdown** is supported."
%}

Pull Quote / Aside

File: typography/aside.html

Styled sidebar text that floats alongside content, with body text wrapping around it. Good for highlighting key passages or tangential points.

{% include typography/aside.html
  box-align="right"
  width="40%"
  text="The interesting thing about this approach is that it challenges conventional assumptions."
%}

Blockquote

File: typography/blockquote.html

Extended quotations set apart from the body text. For simple centered blockquotes, you can use Markdown’s > syntax directly. Use this include when you want to control alignment.

{% include typography/blockquote.html
  box-align="left"
  text="Here is a significant quotation worth setting apart from the body text."
%}

Plain Markdown alternative: > Your quote here produces a centered blockquote without an include.

Audio Player

File: media/audio.html

HTML5 audio player. See Media for details on hosting audio files.

{% include media/audio.html
  src="/assets/audio/interview.mp3"
%}

Scrollspy Table of Contents

File: nav/scrollspy-toc.html

Floating sidebar that auto-generates a table of contents from all h2 headings on the page. Highlights the current section as the reader scrolls.

{% include nav/scrollspy-toc.html %}

No parameters. Place near the top of your page content (after front matter). On mobile, it collapses to a static block above the content.

Card: Table of Contents

File: nav/card-toc.html

Renders a list of compact, text-focused cards from a set of pages.

{% assign card_pages = site.pages | where_exp: "page", "page.path contains 'essays/'" %}

{% include nav/card-toc.html rows = card_pages %}

Pages should have title, author, and summary in their front matter for best results. Add position: 1, position: 2, etc. to control sort order.

Card: Compact List

File: nav/card-toc-compact.html

Smaller, text-only cards stacked vertically—more compact than card-toc.html and better suited for long lists or documentation indexes. Shows title, summary, and an optional topics list as sub-bullets.

{% assign card_pages = site.pages | where_exp: "page", "page.path contains 'docs/'" %}

{% include nav/card-toc-compact.html rows = card_pages %}

Pages should have title and summary in their front matter. Add position: 1, position: 2, etc. to control sort order. Optional topics: list in front matter renders as sub-bullets under the summary.

Card: Stacked

File: nav/card-stack.html

Wide horizontal cards with larger images, stacked vertically.

{% assign stacked_cards = site.pages | where_exp: "page", "page.path contains 'essays/'" %}

{% include nav/card-stack.html cards = stacked_cards %}

Cards sort by position front matter if present. Pages without position appear last.

Card: Grid

File: nav/card-grid.html

Traditional card grid layout with balanced text and images.

{% assign stories = site.pages | where_exp: "page", "page.path contains 'essays/'" %}

{% include nav/card-grid.html cards = stories %}

Cards sort by position front matter if present. Pages without position appear last.

Interactive Map

File: nav/map.html

Leaflet-based map that auto-generates markers from pages with geo front matter.

{% include nav/map.html
  height="600px"
  width="100%"
  start_coords="[39.8283, -98.5795]"
  zoom=4
%}

Pages appear as markers when they have geo: [lat, lng] in their front matter. Optional fields: placename, summary, header-image.

Breadcrumbs

File: nav/breadcrumbs.html

Auto-generated navigation trail based on the page’s URL path.

{% include nav/breadcrumbs.html %}

No parameters. Renders a trail like: Home > Section > Page.

Feature Row

File: layout/feature-row.html

A horizontal row with text and a button link. Useful for landing pages or feature lists.

{% include layout/feature-row.html
  title="Explore Projects"
  text="See what students have built with Xanthan."
  link="/projects/"
  button="View Projects"
  text-width="50"
%}

Page Header (via front matter)

File: layout/header-image.html

Called automatically by the page layout when header-image is in the front matter. You don’t call it directly — just add fields to your page. Three tiers control the header’s visual weight; five filter modes transform how the background image appears.

---
header-image: /assets/images/backgrounds/canyon.jpg
header-tier: section
header-filter: photo
header-title: River Crossings
header-position: center right
---

Tier controls height and text layout:

Filter transforms the background image:

All front matter fields:

Peekaboo Background

File: scrollybox/bg.html

A fixed background image that is revealed as page content scrolls over it, creating a parallax-like effect. Optionally adds a text box that scrolls past the image.

{% include scrollybox/bg.html
  height="100vh"
  image-path="/assets/images/backgrounds/pano-1.jpg"
  box-content="Text that scrolls past the image."
  above-box-space="50vh"
  below-box-space="50vh"
  box-align="right"
%}

ScrollStory components

The scrollybox/ directory contains additional includes for building ScrollStory narratives. These are documented in the ScrollStories section.

All scrollybox includes that display a text box support the box-align parameter (left, right, center):

See the ScrollStory examples for these components in action.