Component Library

Every include in Xanthan, with its parameters and copy-paste code. These are reusable components you drop into any page using Liquid’s include tag. They live in the _includes/ directory and are organized by function.

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, useful as a section divider or dramatic visual break. Breaks out of the page content margins.

{% include images/jumbotron.html
  height="50vh"
  image-path="/assets/images/backgrounds/pano-1.jpg"
  title="Section Title"
  text="Optional subtitle"
  background-position="center"
%}

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. Good for highlighting key quotes or tangential points.

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

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.

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 %}

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 %}

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"
%}

Header Image (via front matter)

File: layout/header-image.html

This include is called automatically by the page layout when header-image is present in the front matter. You don’t call it directly—just add these fields to your page:

---
header-image: /assets/images/backgrounds/canyon.jpg
header-height: 50vh
header-position: center
---

Peekaboo Background

File: scrollybox/bg.html

A fixed background image that is revealed as page content scrolls over it, creating a parallax-like effect.

{% include scrollybox/bg.html
  height="40vh"
  image-path="/assets/images/backgrounds/pano-1.jpg"
%}

ScrollStory components

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

See the ScrollStory examples for these components in action.