Shape gradient

Overview

Learn the basics of Lumino — its structure, features, and how it can help you create clear, organized documentation.
DATE
August 24, 2025
WRITTEN BY
Julian Kennedy

Getting Started with Lumino

Welcome to Lumino, a clean and flexible documentation template for Webflow. This article will guide you through the basics of setting up your documentation site, customizing layouts, and using advanced features like code snippets and callouts.

Introduction

Lumino is designed to make technical documentation both readable and beautiful. Whether you’re writing product docs, API references, or internal knowledge bases, Lumino gives you the right structure out of the box.

Key Features

  • Pre-built documentation layouts
  • Easy navigation with sticky sidebar
  • Styled code blocks
  • Blockquotes and callouts for emphasis
Overview image

Basic Structure

Every Lumino project is organized into three main parts:
Navigation - a sidebar for quick access to docs.
Content Area - where your articles live.
Search - built-in search for finding content quickly.
Overview image
Overview image
Overview image

Example: Adding a Code Snippet

When writing technical documentation, you often need to include code. Lumino comes with styled code blocks for better readability.
javascript
Copy
Coppied
1// Example JavaScript
2       function greet(name)   {
3return `Hello, ${name}! ` ;
4
5}

Quoting Important Notes

Sometimes you want to highlight an important reminder or a best practice:
Pro Tip
Keep your articles short and focused. Long walls of text reduce readability.

Subsection: Lists

Both ordered and unordered lists are supported.
Unordered list example:
  • Markdown-like writing
  • Easy formatting
  • Clean typography
Ordered list example:
  • Open your Lumino project.
  • Duplicate the documentation page.
  • Start customizing your content.
html
Copy
Coppied
1<div class="card">  
2
3      <h2>Hello, Lumino!</h2>4      <p>This is a sample code block inside your docs.</p>5      
6</div>

Conclusion

With Lumino, you can focus on writing great documentation instead of wrestling with design. Use headings, lists, quotes, and code blocks to create clear and helpful guides for your users.

Video Tutorial

Page BackgroundPage Background