Design System
Every preview on this page is the real component, rendered by the same partial your site calls. Nothing here is a mockup, so nothing here can drift.
Docs
info
Template overrides: Use keys like `headerType = '-custom'` or `footerType = '-custom'` to load your own suffixed partials, such as `layouts/partials/header-custom.html`, without editing the theme's base layout.
A list of all your content under docs will go here on this paginated section. If you only want to show the docs, just have no content on the _index.md file, or remove it completely if you don’t need to set any front matter variables.
List Layouts
_default/list.html is hardwired to paginate .Pages into a card grid — great
for a blog index, wrong for a section that is really a single page with no
children, sourced from a data/*.json file instead of child content.
Custom navClass
This page sets navClass in its own front matter. The nav above sits in a translucent fuchsia pill, on this page only. Navigate anywhere else and it returns to normal.
Table of Contents
Why use a table of contents
The built-in TOC is useful on pages with real hierarchy. It works best when the content has more than a flat list of ## headings and gives the reader a clear path through the page.
Maintenance Page
What it is for
Ryder ships with a hidden-home layout for times when you want to put a simple maintenance or coming-soon screen in front of your site without building a separate template. It gives you:
- a full-screen background image
- the Ryder logo
- your page content in a centered translucent panel
- social links in the footer area
The example page for this layout now lives at /maintenance-page/.
SEO & GEO — Structured Data & Search Optimization
Ryder ships with a full-stack SEO and GEO implementation out of the box — no plugins, no extra config required. Every page gets the right structured data automatically.
Cta Button
Easily add a call to action
CTA Buttons Take you places!C.T.A. buttons now take on the characteristic of the category style
CSS Overrides and Visual Customization
Control the header image, footer background, card colors, and border accents — all from your hugo.toml without touching theme files.
Logo Configuration
The Ryder theme supports two logo styles: a text mark (the default) and a custom image. Both are configured entirely in hugo.toml — no template edits required.
Home Feed Filtering and Colorization
Limit your home page feed by Section, Category or Tag
You can now set params in your hugo.toml file to keep any pesky pages off your homepage that you may not wish to promote for whatever reason.
Affiliate Marketing Tools
Two shortcodes for Amazon affiliate links: a single-product buy button and an interactive ASIN link builder.
Media Embeds
Embed YouTube, Vimeo, and SoundCloud with shortcodes. Video and iframe embeds require one CSP config line — SoundCloud loads via Hugo’s asset pipeline and needs no extra config.
Using Font Awesome Icons
How icons work in this theme
The theme uses Font Awesome with tree-shaking — only the icons explicitly imported in assets/js/main.js are included in the JavaScript bundle. If you use an icon class in front matter or a template and it hasn’t been imported, Font Awesome renders a warning placeholder icon instead.
Highlight Github
If you put a lot of code sample in your projects this will simplify things by using the new content-adaptors feature to display code directly from github.
Leaflet Maps
Maps on a Hugo website made easy!
Latitude
39° 54' 20.52"
Longitude
-76° 50' 00.60"
Adding a map to your hugo website becomes easy with the leaflet shortcode. You can add a box to display the lat and long as well through the use of the lat-long-box shortcode.
How the recipe shortcodes work
Overview
The ingredient and step data lives entirely in front matter. The shortcodes read it and render it — no repeated data in the body. This keeps your content clean and makes the structured data for search engines automatic.
Featured Content
Lead with a wide feature
If you want to have wide features, they will get stacked at the top and will take 2 columns. This is done by setting a front matter param homeFeatureWide to enable it, and adding an order-first class and col-span-2 class to the outer div.
All About Hugo
Background
Written in Go, Hugo is an open source static site generator available under the Apache Licence 2.0. Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.