Skip to content
Components
On this page
  1. Alerts
  2. Cards in two columns
  3. Cards in three columns
  4. Cards in four columns
  5. Tabs with two panels
  6. macOS
  7. Linux
  8. Tabs with many panels
  9. Ruby
  10. JavaScript
  11. Python
  12. Shell
  13. A tab with a much longer name
  14. Status badges
  15. Accordion
  16. What is the kitchen sink for?
  17. Does it work without JavaScript?
  18. Can an answer hold code?
  19. Steps as a list
  20. Steps as headings
  21. Install
  22. Write
  23. Publish
  24. Figure
  25. Timeline
  26. Install
  27. Write
  28. Check
  29. Publish
  30. Timeline as a list
  31. Keyboard keys
  32. Tables
  33. Code
  34. Typography
  35. Heading level 3
  36. Call to action
  37. Code titles and diffs
  38. Progress
  39. Embeds
  40. Loading and skeletons
  41. File tree
  42. Details
  43. What does it need?
  44. FAQ
  45. Is the theme free?
  46. Does it run on GitHub Pages?
  47. Parameter table
  48. Link cards
  49. Quote
  50. Gallery
  51. Pricing
  52. Free
  53. Team
  54. Subscribe
  55. Split
  56. Split with code
  57. Lists
Page actions

Kitchen sink

Every component the theme ships, in every variant. The same file is readable on github.com, which shows the fallback.

  • Plain Markdown
  • Reads on github.com
  • WCAG 2.2 AA

Primary action Secondary Third link

Alerts

Note

Useful information that users should know, even when skimming.

Tip

Helpful advice for doing things better or more easily.

Important

Key information users need to know to achieve their goal.

Warning

Urgent info that needs immediate user attention to avoid problems.

Caution

Advises about risks or negative outcomes of certain actions.

Note

An alert with more content:

  • a list item with inline code
  • a second item with a link to the components index
echo "code inside an alert"

Cards in two columns

  • Short One line.
  • Longer card A card with a longer description that wraps over several lines to check spacing, line height and alignment across the grid.
  • With a badge Cards can carry status. Available
  • With a link Read the install guide.

Cards in three columns

  • Alerts Five GitHub alert types. Available
  • Tabs Accessible install tabs. Partial
  • Search Example of a planned item. Planned
  • Tokens Colors, radius and fonts. Available
  • Sass One partial per component. Available
  • Twins Markdown for agents. Available

Cards in four columns

  • Alerts Five GitHub alert types. Available
  • Tabs Accessible install tabs. Partial
  • Search Example of a planned item. Planned
  • Tokens Colors, radius and fonts. Available
  • Sass One partial per component. Available
  • Twins Markdown for agents. Available
  • Grid Four across on wide screens.
  • Rows Eight cards fill two rows.

Tabs with two panels

macOS

brew install ruby
gem install jekyll bundler

Linux

sudo apt install ruby-full
gem install jekyll bundler

Tabs with many panels

Ruby

puts "Hello"

JavaScript

console.log("Hello");

Python

print("Hello")

Shell

echo Hello

A tab with a much longer name

greeting: Hello

Status badges

Inline badges: Available Partial Planned

Tag badges: beta experimental

Feature Status
Alerts Available
Tabs Partial
Search Planned

Accordion

What is the kitchen sink for?

It shows every component in one place, so visual regressions are easy to spot.

Does it work without JavaScript?

Yes. Without JavaScript every answer stays visible under its question.

Can an answer hold code?

bundle exec jekyll serve

Steps as a list

  1. Add the theme to _config.yml.
  2. Write index.md in plain Markdown.
  3. Run bundle exec jekyll build.
  4. Check the result with modootoday-check.

Steps as headings

Install

Add remote_theme and the plugin.

Write

Create a page with front matter.

Publish

Push to main and turn on GitHub Pages.

Figure

A Markdown source on the left becomes a styled page on the right
An image-only paragraph followed by an emphasis-only paragraph becomes a figure with a caption.

Timeline

Install

Alerts, sections, cards, tabs, status badges and the checker.

Write

Design tokens, the modootoday: block, navigation and code copy.

Check

Theme toggle, breadcrumb, table of contents, accordion, steps and figures.

Publish

Timeline, keyboard keys, client search and the post layout.

Timeline as a list

  1. Install: alerts, sections, cards and tabs.
  2. Write: design tokens and navigation.
  3. Check: theme toggle, table of contents and steps.

Keyboard keys

Open search with Ctrl+K, or / on its own. Copy with Cmd+C.

Tables

Key Type Default Description
badges boolean true Convert status code spans into badges
color_scheme string auto Follow the operating system or force a scheme
components list all core components Limit the CSS and JavaScript that are shipped to the browser
tokens map theme defaults Override design tokens such as primary color, radius and font stacks
Left Center Right
a b 1
longer cell centered 1,000

Code

Inline code, a fenced block and a long line that scrolls:

# frozen_string_literal: true
Jekyll::Hooks.register :site, :post_write do |site|
  puts "Built #{site.pages.size} pages into #{site.dest} with a deliberately long line to test horizontal scrolling"
end

- theme: minima
+ theme: jekyll-theme-modootoday

Typography

Paragraph text with bold, italic, strikethrough, code and a link to the components index. Footnotes work too.1

Heading level 3

Heading level 4

  1. Ordered item
  2. Ordered item
    • nested bullet
    • nested bullet
  • task done
  • task open

A plain quote that is not an alert.

Text after a thematic break.

  • 1
  • 2
  • 3

Call to action

Get started Read the rules

Code titles and diffs

Available A line holding only a code span that starts with file and a colon, right before a fenced block, becomes the block’s title bar. A diff block tints added and removed lines and keeps the plus and minus signs.

File: _config.yml

theme: jekyll-theme-modootoday

- remote_theme: old/theme
+ theme: jekyll-theme-modootoday

Progress

Available A code span that starts with progress and a colon, followed by a whole number from 0 to 100, becomes a labelled progress bar with the value as text.

Translation 60% 60%

Embeds

Available A paragraph holding only a code span that starts with embed and a colon, then an https URL and an optional title, becomes a lazy 16:9 frame that keeps its space while it loads.

Loading and skeletons

Available Code spans that start with loading or skeleton and a colon become a spinner, a thin top bar or a placeholder (text, card, image, avatar, row). Each one has role="status" and a Loading label for screen readers, and the motion stops when the reader asks for reduced motion. Their styles are an optional sheet that only pages using them load.

Loading… Loading… Loading…

File tree

Available In a c: filetree section, a nested list draws a folder tree. Items that hold a nested list are folders.

  • docs
    • _config.yml
    • index.md
    • ko
      • index.md

Details

Available In a c: details section, each ### heading becomes a native disclosure. It opens and closes without JavaScript.

What does it need?

Nothing but the browser.

FAQ

Available A c: faq section works like details. For FAQPage structured data, add a schema: block (see Structured data).

Is the theme free?

Yes, under the MIT license.

Does it run on GitHub Pages?

Yes, with the github-pages gem.

Parameter table

Available In a c: params section, a table lists options: name, type, default, description. A cell holding only Required shows a Required badge.

Name Type Default Description
title string Required Page title
cols number 2 Card columns

Available In a c: linkcards section, list items that start with a link become cards. The whole card is the link target.

Quote

Available In a c: quote section, a quote whose last line starts with an em dash gets that line as its attribution.

The docs read well on github.com and on the site.

— A theme user

Available In a c: gallery section, a list of images becomes a thumbnail grid. Each thumbnail opens a full-size view without JavaScript. Every image needs alt text.

Pricing

Available In a c: pricing section, each ### heading is a plan with a price, a feature list and a link. The recommended parameter marks one plan with a Recommended label.

Free

$0

  • One site

Start the Free plan

Recommended

Team

$12

  • Ten sites
  • Support

Choose Team

Split

Available A c: split section puts its text and a picture side by side from 48rem and stacks them below. The picture is the visual: include; side: start moves it to the start side and ratio: "5:7" gives it the wider column. Any other key on the item, such as label: here, reaches the include as include.section.label. The picture here is an illustration: a figure with class="mt-illustration", role="img" and an aria-label, plus an .mt-illustration-tag badge whose text is also in the label. decor: decor-demo adds the dots in the top corner as an aria-hidden ornament. The hero takes the same form: hero: {c: split, visual: <name>, side: start, ratio: "5:7"} puts the title, lead, check row and buttons in the text column and the include beside them; the kitchen sink’s hero uses it.

Text on one side, the picture on the other.

Split with code

Available visual: code on a c: split section or a split hero needs no include: the first fenced code block in that section, with its file: title if it has one, moves into the visual column and keeps the code styles and the copy button. chrome: terminal (its own small sheet, linked only where used) adds a border and a decorative bar that screen readers skip. Anywhere else, visual: code still means _includes/sections/code.html.

Install the kit, then run the checker before each build.

File: terminal

bundle add jekyll-theme-modootoday
bundle exec modootoday-check . _site

Lists

Available With modootoday.lists in _config.yml, plain sections and pages get two list styles. link_chips: true turns a list whose every item is one link into a row of chips; titled_items: true gives an item that starts with a bold title and a colon its own title and separator. hero: {checks: true} turns the first list in the hero into a row of check marks, as above. Lists in component sections keep their own style.

Items with a title:

  • Chips: a list of links only
  • Titled items: a bold title, a colon, then the text

  1. A footnote. ↩

Edit this page