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.

Standalone Image

File: images/figure.html

Places a single centered image in your content, with caption and alt-text. The image sits on its own; whatever follows starts below it. To set an image beside a passage of text, use Image + Text (figure-wrap.html) below.

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

Image + Text (figure-wrap)

File: images/figure-wrap.html

Places an image beside a passage of text as a two-column pair. Nothing floats, so the text stays in its own column and never wraps under the image. This is the recommended way to put an image alongside text. On narrow screens the columns stack, image on top.

{% include images/figure-wrap.html
  image-path="/assets/images/photo.jpg"
  image-position="right"
  image-width="45%"
  caption="A descriptive caption"
  alt-text="Description for screen readers"
  text="The text that sits beside the image. Supports **Markdown**."
%}

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"
  alt-text-left="Description of the before image"
  alt-text-right="Description of the after image"
  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: '|'
%}

{% assign alt_texts =
"Description of first image|
Description of second image|
Description of third image" | split: '|'
%}

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

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

File: typography/pullquote.html

A centered callout that highlights a key passage from your text. Good for drawing attention to a memorable phrase or key argument.

{% include typography/pullquote.html
  text="The interesting thing about this approach is that it challenges conventional assumptions."
%}

For quoted source material, use Markdown blockquotes with > and style the resulting blockquote element in assets/css/typography.css.

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: cards/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 cards/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: cards/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 cards/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: cards/card-stack.html

Wide horizontal cards with larger images, stacked vertically.

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

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

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

Card: Grid

File: cards/card-grid.html

Traditional card grid layout with balanced text and images.

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

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

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

Gallery Grid

File: nav/gallery-grid.html

Image-first navigation for collections. Use it when readers are choosing among pages by looking first: project galleries, visual archives, place collections, or exhibit-style indexes. Titles stay visible over the image; summaries reveal on hover or keyboard focus when show-summary=true.

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

{% include nav/gallery-grid.html
  items = gallery_pages
  variant = "mosaic"
  show-summary = false
%}

Items should have title, thumbnail, and either url or link. If an item does not have an image, Xanthan renders a visible warning so the missing field is easy to find.

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/page-header.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.