🚨 You are viewing the legacy v1.x docs. See the new v2 documentation →

Variables and Helpers

Pages are rendered as an ERB templates before being (optionally) processed as markdown, and Lookbook makes a number of variables and helpers available that can be used to add dynamic content.


All pages have the following variables available for use in the page template:


The current page object


The next page object (if available)


The previous page object (if available)


Array of all available pages

Page objects have access to the frontmatter variables for that page:

The page title is <%= page.title %>
Our brand color hex value is <%= page.data[:brand_colors][:red] %>


The following helpers are available to use in your page templates.


Returns the path to a page.


The page to generate a path to. Can be a page id (Symbol) or a Page object instance. Page ids can be specified in the YAML frontmatter for that page.

Type: Symbol | Page
Visit the [about page](<%= page_path :about %>)
Go to the [next page](<%= page_path @next_page %>)


Generates a live embed of a component preview.

See the docs on embedding previews for more info.

embed(<preview>, <example>, <opts?>)

The Preview class to generate an embed for - eg. Elements:ButtonComponentPreview

Type: Class

The name of the example method to embed - eg. :default

Type: Symbol

Optional hash of options, including for specifying params.

Type: Hash
<!-- Basic embed -->
<%= embed Elements:ButtonComponentPreview, :default %>

<!-- With param values set -->
<%= embed Elements:ButtonComponentPreview, :default, params: {
  icon: "plus",
  text: "Add new"
} %>


Adds syntax highlighting to blocks of code.

The code helper is an alternative to using markdown code blocks for templates that have markdown parsing disabled, or for when more control is required.

code(<lang?>) { <block_content> }

The language the code is written in. Defaults to :ruby

Type: Symbol
<!-- Highlight Ruby code -->
<%= code do %>
  # Ruby code to highlight goes here
<% end %>

<!-- Highlight a different language (HTML) -->
<%= code :html do %>
  <!-- HTML code to highlight goes here -->
<% end %>


Displays an icon.

Lookbook uses icons from the Feather Icons set and a full list of available icon names can be found on that site.

icon(<icon_name>, <opts?>)

The name of the icon to display

Type: Symbol

Hash of options

Type: Hash
<%= icon :trash %>
<%= icon :camera, size: 6, style: "color: red;" %>