v1.0

Get started with Torlang

Torlang is a powerful, feature-packed markup language for building anything—from prototype to production—in minutes.

Quick Start

Get started by including Torlang in your page. Here's a simple example:

[page]
[header]
[title style="big blue center"]Welcome to [var name="SITE_NAME"][/title]
[/header]
[text style="center muted"]This is my first page built with Torlang.[/text]
[button background-blue-70 color-white outline-blue-90]
  Learn More
[/button]
[/page]

Basic Syntax

Torlang uses simple bracket notation for tags:

  • Block tags: [tag]content[/tag]
  • Self-closing tags: [tag attributes]
  • Attributes: [tag attribute="value"]

Available Colors

Use plain Torlang color names with optional contrast shades 10 to 100:

red, blue, green, yellow, orange, purple, pink, indigo, teal, cyan, gray (or grey), black, white. (blur is accepted as an alias for blue.)

red
blue
green
yellow
orange
purple
pink
indigo
teal
cyan
gray
white
black

Shade System

Each plain color supports 10 shades from 10 (lightest) to 100 (darkest):

  • 10-40: Light shades (great for backgrounds)
  • 50-60: Medium shades (balanced defaults)
  • 70-100: Dark shades (great for text and borders)

Color Syntax

Shorthand Tokens (Recommended)

[button background-red-90 color-red-10 outline-red-70]Delete[/button]
[page background-blue-100 color-white]
[text]Dark blue page with white text[/text]
[/page]
[text color-green-70]Readable green text[/text]
  • background-{color}-{shade} or bg-{color}-{shade}
  • color-{color}-{shade}
  • outline-{color}-{shade} (alias of border color)

Example scale: bg-red-100, bg-red-90, bg-red-80, bg-red-70, bg-red-60, bg-red-50, bg-red-40, bg-red-30, bg-red-20, bg-red-10.

Note: semantic names like primary, secondary, success, danger, warning, info, light, and dark are not supported in this shorthand color mode.

Background Gradients

Create smooth color transitions with a single token using the from-color-to-color syntax:

[text style="from-blue-50-to-red-100 color-white padding-20 rounded-lg"]Gradient background with white text[/text]

The parser automatically resolves both colors (including shades like blue-50) and outputs background-image: linear-gradient(135deg, ...). Any Torex color keyword works here.

Blue to Red
Purple to Pink
Green to Sky
Orange to Violet
Text & Outline Gradients

Use the same syntax with prefixes to target different properties:

  • color-from-blue-60-to-teal-40 – Applies a gradient fill to text (uses background-clip: text automatically).
  • bg-from-purple-50-to-pink-70 – Explicit background gradient (alias of the default behavior above).
  • outline-from-amber-50-to-orange-60 – Renders a gradient outline using border-image. (border-from-* still works.)
[button bg-from-red-100-to-green-50 color-from-red-100-to-green-50 outline-from-red-100-to-green-50]
Gradient Button
[/button]
Text Gradients:
Blue to Teal Gradient
Purple to Pink Gradient
Amber to Orange Gradient
Border Gradients:
Amber to Orange Border
Purple to Pink Border
Sky to Teal Border

These prefixed gradients can be used inside any tag's style attribute, right alongside other Torex utilities.

Combined Colors

[text style="color-white bg-blue-80"]White text on dark blue background[/text]
[text style="color-red-70 bg-red-10 border-red-50"]Red text with light red background and border[/text]

Basic Tags

Page Tag

[page] is your main page wrapper.

Default (Full Width)

[page]...[/page]

This renders with container-fluid under the hood.

Fixed Width Container

[page container]...[/page]

This renders with container under the hood.

Background and Text Color

You can apply your Torlang color system directly on [page].

[page background-green color-white]
  [text]Hello world[/text]
[/page]
  • background-{color} or bg-{color} sets page background.
  • color-{color} sets default text color for page content.
  • Shades are supported too, e.g. background-blue-80, color-white.

Quick Examples

[page background-black color-white]...[/page]
[page container background-yellow-20 color-green-80]...[/page]

System Tags

[site-name] - Displays your site's name
[site-url] - Displays your site's URL
[today] - Displays today's date (supports style, format, timezone, locale)
[time] - Displays current time (same attributes as [today])
[br] or [break] - Line break

Text Formatting

Text formatting now supports direct tag tokens, so you can write formatting options right on the [text] tag without placing everything in style="".

Quick Start

[text underline strikethrough bold italic]the text[/text]
[text align-center]centered text[/text]
[text uppercase]make me loud[/text]
[text size-1]heading-like text[/text]

Display Behavior

  • [text] is inline by default (no forced line break).
  • Use block or paragraph when you want block flow.
  • Use [break] (or [br]) to force line breaks.
[text]Inline A[/text][text]Inline B[/text]
[text block]Paragraph-style text[/text]
[text]Line 1[/text][break][break][text]Line 3[/text]

Size Scale

size-1 to size-7

Use heading-like scale tokens directly on [text]:

  • size-1 = 2.5rem
  • size-2 = 2rem
  • size-3 = 1.75rem
  • size-4 = 1.5rem
  • size-5 = 1.25rem
  • size-6 = 1rem
  • size-7 = 0.875rem
[text size-1]Biggest[/text] [text size-7]Smallest[/text]

Decoration & Font Style Tokens

Supported Tokens

  • bold
  • italic
  • underline
  • strikethrough (or line-through)
[text underline strikethrough bold italic]the text[/text]

Alignment Tokens

Supported Alignment

  • align-left
  • align-center
  • align-right
  • align-justify
[text align-center]the text[/text]

You can also use legacy equivalents like left, center, right, and justify.

Case Transform Tokens

Supported Case Controls

  • uppercase
  • lowercase
  • titlecase (also title-case / capitalize)
[text uppercase]the text[/text]
[text lowercase]THE TEXT[/text]
[text titlecase]the text goes here[/text]

Complete Text Formatting Examples

[text size-2 bold align-center]Section Title[/text]
[text italic color-green size-7]small helper message[/text]
[text underline strikethrough]mixed decoration[/text]
[text]line one[/text][break][break][text]line three[/text]

Layout System

The layout system uses Torlang's native grid design. Build layouts with [box] (container), [box-row] (row), and [box-column] (column).

Core Grid Tags

  • [box] → <div class="container"> when it contains rows
  • [box-row] → <div class="row">
  • [box-column] → <div class="col"> by default
  • [box text-align-center] adds text-center on container

Basic Grid Example

[box text-align-center]
  [box-row]
    [box-column]Column[/box-column]
    [box-column]Column[/box-column]
    [box-column]Column[/box-column]
  [/box-row]
[/box]

Responsive Columns

Use row column counts and breakpoint attributes directly:

  • [box-row cols="1" sm="2" md="3"] → row row-cols-1 row-cols-sm-2 row-cols-md-3
  • [box-column sm="6" lg="4"] → col col-sm-6 col-lg-4
[box]
  [box-row cols="1" sm="2" md="3"]
    [box-column]1 of 3[/box-column]
    [box-column]2 of 3[/box-column]
    [box-column]3 of 3[/box-column]
  [/box-row]
[/box]

Gutters

Use gutter tokens directly on [box-row]:

  • gx-* for horizontal gutter
  • gy-* for vertical gutter
  • g-* for both axes
  • Allowed scale: 1 to 7 (higher number = wider gutter)
  • Responsive variants supported: gx-lg-4, gy-md-2, g-sm-1
[box text-align-center]
  [box-row gy-5]
    [box-column]1 of 2[/box-column]
    [box-column]2 of 2[/box-column]
  [/box-row]

  [box-row gx-2]
    [box-column]1 of 3[/box-column]
    [box-column]2 of 3[/box-column]
    [box-column]3 of 3[/box-column]
  [/box-row]
[/box]

Forms System

Create beautiful, accessible forms using simple English-like syntax. Perfect for contact forms, login forms, surveys, and more!

✨ For Beginners

Creating forms has never been easier! Use plain English words:

  • text-input - A text field
  • email-input - An email field (automatically validates)
  • password-input - A password field (hides characters)
  • textarea - A large text area for messages
  • submit-button - The button to submit the form
  • required or must-fill - Makes a field required
  • label or title - The text shown above the field
  • placeholder or hint - Gray text shown inside the field

Form Basics

Every form starts with [form] and ends with [/form]. Inside, you add form fields.

Simple Form

[form action="/contact" method="POST"]
  [text-input name="name" label="Your Name" required]
  [email-input name="email" label="Email Address" required]
  [textarea name="message" label="Message" required]Your message here[/textarea]
  [submit-button text="Send Message"]
[/form]

Form Attributes

Beginner-friendly:
action="/submit" or submit-to="/submit" - Where to send the form
method="POST" or http-method="POST" - How to send (POST or GET)
encoding="multipart/form-data" - For file uploads

Input Fields

All input fields support these common attributes:

  • name or field - The field name (required)
  • label or title - Text shown above the field
  • placeholder or hint - Gray text inside the field
  • value or default - Default value
  • required or must-fill - Makes field required
  • disabled or read-only - Disables the field
  • help or help-text or description - Small text below field
  • max-length or maximum-length - Maximum characters
  • min-length or minimum-length - Minimum characters

Text Input

[text-input name="username" label="Username" placeholder="Enter your username" required]

Email Input

[email-input name="email" label="Email" placeholder="your@email.com" required]

Password Input

[password-input name="password" label="Password" required]

Number Input

[number-input name="age" label="Age" min="18" max="100" required]
Attributes: min or minimum, max or maximum, step

Phone Input

[phone-input name="phone" label="Phone Number" placeholder="(555) 123-4567"]

URL Input

[url-input name="website" label="Website" placeholder="https://example.com"]

Date Input

[date-input name="birthdate" label="Birth Date"]

Time Input

[time-input name="appointment" label="Appointment Time"]

File Input

[file-input name="resume" label="Upload Resume"]
Note: Forms with file uploads need encoding="multipart/form-data"

Hidden Input

[hidden-input name="token" value="abc123"]

Search Input

[search-input name="query" placeholder="Search..."]

Color Input

[color-input name="favcolor" label="Favorite Color"]

Range Input (Slider)

[range-input name="volume" label="Volume" min="0" max="100" value="50"]

Textarea (Multi-line Text)

Use [textarea] for longer text like messages or comments. It's a block tag, so content goes between opening and closing tags.

[textarea name="message" label="Your Message" rows="6" placeholder="Type your message here..." required]
Default text here (optional)
[/textarea]

Textarea Attributes

rows="6" or height="6" - Number of rows (height)
cols="50" or width="50" - Number of columns (width)
All other input attributes work here too (label, placeholder, required, etc.)

Select (Dropdown)

Create dropdown menus where users select one or multiple options.

Simple Dropdown

[select name="country" label="Select Country" required]
  [option value="us" text="United States"]
  [option value="uk" text="United Kingdom"]
  [option value="ca" text="Canada" selected]
[/select]

Multiple Selection

[select name="skills" label="Select Skills" multiple allow-multiple]
  [option value="html" text="HTML"]
  [option value="css" text="CSS"]
[/select]

Option Attributes

value or val - The option value
text or label - The text shown to users
selected or default - Makes this option pre-selected
disabled - Disables this option

Checkboxes & Radio Buttons

Checkbox (Single)

[checkbox name="agree" label="I agree to the terms" required]

Checkbox Attributes

value="1" or val="1" - The value when checked
checked or selected or default - Pre-checked
All standard attributes work (name, label, required, disabled)

Radio Group (Multiple Options)

Radio buttons let users choose one option from multiple choices. Use [radio-group] block tag:

[radio-group name="size" label="Select Size" required]
  [radio value="small" text="Small"]
  [radio value="medium" text="Medium" checked]
  [radio value="large" text="Large"]
[/radio-group]

Standalone Radio Button

[radio name="gender" value="male" label="Male"]

Form Buttons

Submit Button

[submit-button text="Send Form"]
Alternative: [submit-button label="Send Form"]

Reset Button

[reset-button text="Clear Form"]

Button Attributes

text or label - Button text
name - Button name
value - Button value
disabled - Disables the button
class - CSS class
style - Inline styles (supports all layout utilities)

Validation & Attributes

Required Fields

[text-input name="name" required]
Alternative: [text-input name="name" must-fill]

Length Validation

[text-input name="username" min-length="3" max-length="20"]
Alternatives: minimum-length, maximum-length, minlength, maxlength

Pattern Validation (Regex)

[text-input name="zipcode" pattern="[0-9]{5}" validation="[0-9]{5}"]
Note: Uses HTML5 pattern attribute

Min/Max Values (Numbers)

[number-input name="age" minimum="18" maximum="100" step="1"]
Alternatives: min, max

Auto-focus

[text-input name="search" auto-focus]
Alternative: autofocus

Complete Form Examples

Contact Form

[form action="/contact" method="POST"]
  [text-input name="name" label="Your Name" placeholder="John Doe" required]
  [email-input name="email" label="Email" placeholder="john@example.com" required]
  [phone-input name="phone" label="Phone Number" placeholder="(555) 123-4567"]
  [textarea name="message" label="Message" rows="5" placeholder="Your message here..." required][/textarea]
  [submit-button text="Send Message"]
[/form]

Registration Form

[form action="/register" method="POST"]
  [text-input name="username" label="Username" min-length="3" max-length="20" required]
  [email-input name="email" label="Email Address" required]
  [password-input name="password" label="Password" min-length="8" required]
  [password-input name="password_confirm" label="Confirm Password" required]
  [number-input name="age" label="Age" minimum="18" maximum="100" required]
  [checkbox name="agree" label="I agree to the terms and conditions" required]
  [submit-button text="Create Account"]
[/form]

Survey Form

[form action="/survey" method="POST"]
  [text-input name="name" label="Your Name" required]
  [radio-group name="satisfaction" label="How satisfied are you?" required]
    [radio value="very-satisfied" text="Very Satisfied"]
    [radio value="satisfied" text="Satisfied"]
    [radio value="neutral" text="Neutral"]
  [/radio-group]
  [select name="category" label="Category" required]
    [option value="product" text="Product"]
    [option value="service" text="Service"]
  [/select]
  [textarea name="comments" label="Additional Comments"][/textarea]
  [submit-button text="Submit Survey"]
[/form]

UI Components

Use small building blocks. Write only what you need.

Fast Start

[navbar brand="Navbar" background-green color-white nav-position-right]
[nav-link url="#" active]Home[/nav-link]
[nav-link url="#"]Link[/nav-link]
[nav-search action="#" name="q" placeholder="Search" button="Search"]
[nav-dropdown label="Menu"]
  [nav-option url="#"]Action[/nav-option]
  [nav-option url="#"]Another action[/nav-option]
  [nav-divider]
  [nav-option url="#"]Something else here[/nav-option]
[/nav-dropdown]
[/navbar]

What Each Tag Does

  • [navbar] - Main navbar wrapper and brand settings.
  • [nav-link] - A single menu link.
  • [nav-dropdown] - Dropdown menu wrapper.
  • [nav-option] - One dropdown item.
  • [nav-divider] - Divider line inside dropdown.
  • [nav-search] - Search form on the right side.
  • [nav-cta] - Optional action area (usually a button).

Most Useful Navbar Attributes

  • brand - Brand title text.
  • brand-link - Brand URL.
  • background-* / bg-* - Navbar background color.
  • color-* - Navbar text color.
  • nav-position-left, nav-position-center, nav-position-right - Menu alignment.

Minimal Examples

[navbar brand="Site"][nav-link url="/" active]Home[/nav-link][/navbar]
[navbar brand="Docs" background-black color-white nav-position-right]
[nav-link url="/guide"]Guide[/nav-link]
[nav-dropdown label="More"]
  [nav-option url="/about"]About[/nav-option]
[/nav-dropdown]
[/navbar]

Hero Section

Create stunning hero sections with flexible layouts, images, and call-to-action buttons.

Basic Centered Hero

[hero layout="centered"]
[hero-title style="text-4xl font-bold"]Welcome to Torlang[/hero-title]
[hero-subtitle style="text-xl color-slate-60"]Build beautiful websites in minutes[/hero-subtitle]
[hero-description]The simplest way to create stunning web experiences without writing complex code.[/hero-description]
[hero-cta url="/start" variant="primary"]Get Started[/hero-cta]
[hero-cta url="/docs" variant="outline"]Learn More[/hero-cta]
[/hero]

Split Layout with Image

[hero layout="split" style="bg-slate-50"]
[hero-title style="text-5xl font-bold"]Transform Your Ideas[/hero-title]
[hero-subtitle style="text-2xl color-teal-60"]Into Reality[/hero-subtitle]
[hero-description]Powerful tools that make web development accessible to everyone.[/hero-description]
[hero-cta url="/signup" variant="primary"]Start Building[/hero-cta]
[hero-image src="/hero-image.jpg" alt="Hero" style="rounded-xl shadow-2xl"][/hero-image]
[/hero]

Full-Width with Background

[hero layout="full-width" background-image="/bg-hero.jpg" overlay="rgba(0,0,0,0.5)" min-height="600px" style="color-white"]
[hero-title style="text-6xl font-bold color-white"]Launch Faster[/hero-title]
[hero-subtitle style="text-3xl color-slate-20"]Ship in days, not months[/hero-subtitle]
[hero-cta url="/start" variant="primary"]Get Started[/hero-cta]
[/hero]

Minimal Hero

[hero layout="minimal"]
[hero-title]Simple. Powerful. Fast.[/hero-title]
[hero-description]Everything you need to build modern websites.[/hero-description]
[/hero]

Free-Form Content

You can also use existing Torlang tags inside the hero for complete flexibility:

[hero layout="centered" style="bg-gradient-to-br from-blue-50 to-purple-50"]
[title style="text-5xl font-bold center"]Your Headline[/title]
[text style="text-xl center color-slate-60"]Your description text here[/text]
[button background-blue-70 color-white outline-blue-90]Get Started[/button]
[img src="/feature-image.png" alt="Feature" width="800"][/img]
[/hero]

Background Images & Faint Overlays

You can now blend a subtle background image behind any layout without stretching your foreground hero image.

  • Use background-image / bg-image (or the shorthand style="bg-image(your-file.png)") to attach a full-width background. Filenames are resolved from your media library, just like [hero-image].
  • Add background-mode="faint" or the style token bg-faint-image(YourImage.png) to render a dimmed cover image that sits behind the content and respects your style colors (e.g., bg-yellow).
  • Control the strength with background-opacity="0.2" / bg-opacity attributes or inline tokens such as bg-faint-opacity-20 (percent) or bg-faint-opacity:0.35.
  • Set the hero’s base color using normal Torex style tokens (e.g., style="bg-slate-900"); numeric overlays automatically use that tone for their tint.
  • You can also provide background-color / bg-color attributes. Internally the parser feeds these values back into the Torex style system, so utility tokens like bg-slate-900 or color-teal-60 remain the single source of truth while overlays derive their contrast from the same color.
[hero layout="centered" style="bg-yellow bg-faint-image(TorexFlow.png) bg-faint-opacity-25"]
[hero-title style="text-5xl font-bold"]Transform Your Ideas[/hero-title]
[hero-subtitle style="text-lg color-teal-60"]Into Reality[/hero-subtitle]
[hero-cta url="/labs" variant="primary"]Start Building[/hero-cta]
[/hero]

Hero Attributes

  • layout / design – Choose centered (default), split, full-width, or minimal. The design attribute is an alias for layout.
  • background-image / bg-image / image – Background image URL or media filename. Accepts the same lookup rules as [hero-image].
  • background-mode / bg-mode – Set to faint to render the background as a subtle overlay layer that never stretches the main hero image.
  • background-opacity / bg-opacity – Optional opacity (0–1 or percentage) for faint backgrounds.
  • background-color / bg-color – Base color behind the hero (also used as the reference color when you provide numeric overlay contrast values).
  • overlay – Overlay color for solid background images (e.g., rgba(0,0,0,0.5)). You can also pass a contrast level 0-10 (or contrast-7) to auto-generate an overlay using the hero’s background-color (defaults to black when not set).
  • min-height / height – Minimum height (e.g., 600px, 80vh)
  • style – Torex style tokens for custom styling (e.g., bg-yellow, bg-slate-50, color-white, padding-20)
  • class – Additional CSS classes

Hero Child Tags

  • [hero-title] – Main headline. Accepts style (supports text sizes: text-xs through text-10xl, font weights: font-bold, colors: color-teal-60, etc.) and class attributes. Can also use text or value attributes instead of content.
  • [hero-subtitle] – Secondary headline. Same styling options as hero-title.
  • [hero-description] – Body text. Supports rich content and existing Torlang tags.
  • [hero-image] – Hero image. Can be used as block tag [hero-image src="..."][/hero-image] or self-closing [hero-image src="..." alt="..."].
    • Image Source: src / url / image – Image URL or filename. If a filename is provided (e.g., "TorexFlow.png"), it will be automatically looked up in the site's media library and resolved to the full URL. You can also use name attribute to explicitly reference media library files.
    • Size Control: width and height attributes accept pixel values (e.g., width="500", height="300"). You can specify both or just one dimension. If only one is specified, the image will maintain its aspect ratio.
    • Other Attributes: alt (alt text for accessibility), style (Torex style tokens like rounded-xl, shadow-lg, etc.), class (additional CSS classes).
    Examples:
    [hero-image src="TorexFlow.png" alt="Hero" width="500" height="300" style="rounded-xl"]
    [hero-image src="hero.jpg" alt="Hero" width="800" style="rounded-xl shadow-lg"]
    [hero-image name="logo.png" alt="Logo" width="200" height="200" style="rounded-full"]
  • [hero-cta] – Call-to-action button. You can use multiple [hero-cta] tags for multiple buttons. Attributes: url / link / href, variant (primary, secondary, outline), button-style / btn-style, class. Button text can be provided as content or via text / label attribute.

Layout Details

  • Centered (default): Content is centered vertically and horizontally. Image appears above or below content.
  • Split: Two-column layout with content on the left and image on the right (desktop). Stacks vertically on mobile.
  • Full-width: Full-width background with centered content. Ideal for background images.
  • Minimal: Simplified layout without image container, perfect for text-only heroes.

Styling Tips

  • Text sizes: Use text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, text-9xl, or text-10xl in the style attribute.
  • Font weights: Use font-thin, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, or font-black.
  • Colors: Use color-{color}-{shade} format (e.g., color-teal-60, color-white) or plain color names.
  • Backgrounds: Use bg-{color} or bg-{color}-{shade} format (e.g., bg-yellow, bg-slate-50).

All child tags are optional. You can mix them with existing Torlang tags like [title], [text], [button], [img] for complete design freedom.

Alerts

Use alerts to show quick status messages (success, warning, error, info) with very simple tags.

Recommended Syntax (Simple)

Write the alert type directly in the tag name, then close with [/alert].

[alert-primary]A simple primary alert - check it out![/alert]
[alert-secondary]A simple secondary alert - check it out![/alert]
[alert-success]A simple success alert - check it out![/alert]
[alert-danger]A simple danger alert - check it out![/alert]
[alert-warning]A simple warning alert - check it out![/alert]
[alert-info]A simple info alert - check it out![/alert]
[alert-light]A simple light alert - check it out![/alert]
[alert-dark]A simple dark alert - check it out![/alert]

Dismissible Alert

[alert-success dismissible]Saved successfully. You can close this alert.[/alert]

Alternative Syntax

If you prefer one tag, this also works:

[alert type="warning"]Please review your input.[/alert]

Available Alert Colors

  • primary
  • secondary
  • success
  • danger
  • warning
  • info
  • light
  • dark

Badges

Use badges for small labels like status, counters, or tags.

Recommended Syntax (Simple)

Use the color in the tag name:

[badge-primary text="New"]
[badge-secondary text="Draft"]
[badge-success text="Active"]
[badge-danger text="Failed"]
[badge-warning text="Pending"]
[badge-info text="Info"]
[badge-light text="Light"]
[badge-dark text="Dark"]

Alternative Syntax

[badge text="New" variant="success"]

Size Options

[badge-success text="Small" size="small"]
[badge-success text="Medium" size="medium"]
[badge-success text="Large" size="large"]

Available Badge Colors

  • primary
  • secondary
  • success
  • danger
  • warning
  • info
  • light
  • dark

Buttons

Buttons use Torlang's block syntax with plain-color shorthand tokens.

Block Format (Required)

[button]
    Start Building
[/button]

This compiles to <button type="button" class="btn">...</button>.

Color Shorthand on Button

Use these attribute tokens directly on [button]:

  • background-{color}-{shade} or bg-{color}-{shade}
  • color-{color}-{shade}
  • outline-{color}-{shade}
[button background-red-80 color-white outline-red-100]
    Delete
[/button]
[button bg-blue-70 color-white outline-blue-90]
    Save Changes
[/button]

Gradient Color Tokens

You can use gradient tokens with the same prefixes:

  • bg-from-red-100-to-green-50
  • color-from-red-100-to-green-50
  • outline-from-red-100-to-green-50
[button bg-from-red-100-to-green-50 color-from-red-100-to-green-50 outline-from-red-100-to-green-50]
    Gradient CTA
[/button]

Shade Scale

Supported shades: 10, 20, 30, 40, 50, 60, 70, 80, 90, 100.

[button bg-red-100 color-red-10 outline-red-70]
    Confirm
[/button]

Important

Semantic color names are not supported in shorthand button coloring: primary, secondary, success, danger, warning, info, light, dark.

Image

Use [image] to render responsive images with optional rounded corners, float alignment, and explicit size control.

Default Image

[image source="/images/photo.png"]

Output: <img src="..." class="img-fluid" alt="...">

Rounded + Float

[image source="/images/photo.png" rounded float-start]
[image source="/images/photo.png" rounded float-end]

Output classes: rounded float-start or rounded float-end.

Width and Height

[image source="/images/photo.png" rounded float-end height=50 width=50]

This renders width and height attributes directly on the image element.

Supported Attributes

  • source (recommended), src, url, or image - image path/URL
  • alt - alternative text (auto-generated from filename when omitted)
  • rounded - add rounded corners
  • float-start or float-end - float image alignment
  • width and height - image dimensions
  • loading - eager or lazy
  • class and style - additional class names and Torlang style tokens

Cards

Use cards to group content with an optional header, body, and footer.

Basic Card

[card] [card-header]Card Header[/card-header] [card-body]Card body content.[/card-body] [card-footer]Card Footer[/card-footer] [/card]

Card Width (10 to 100)

You can control card width per device. If no width token is provided, card stays full width by default.

[card width-50] [card-header]Card Header[/card-header] [card-body]Card body content.[/card-body] [card-footer]Card Footer[/card-footer] [/card]

width-50 means 50% on desktop and full width on mobile.

Mobile + Desktop Width

Use separate width tokens when you want different sizes on mobile and desktop.

[card mobile-width-30 desktop-width-50] [card-header]Card Header[/card-header] [card-body]Card body content.[/card-body] [card-footer]Card Footer[/card-footer] [/card]
  • mobile-width-10 to mobile-width-100
  • desktop-width-10 to desktop-width-100
  • If one side is missing, it defaults to 100% for that side.

Card Coloring (Torlang Tokens)

Apply card colors with Torlang color tokens:

[card bg-green color-white] [card-header]Card Header[/card-header] [card-body]Card body content.[/card-body] [card-footer]Card Footer[/card-footer] [/card]

Image in Card Header

You can use the regular Torlang image tag in card header exactly the same way.

[card] [card-header] [image source="banner.png"] [/card-header] [card-body]Card body content.[/card-body] [card-footer]Card Footer[/card-footer] [/card]

Collapse

Use collapse to show/hide content on button click.

Vertical Collapse (Default)

[collapse title="Click to expand"]Hidden content here.[/collapse]

Horizontal Collapse

Add horizontal to use Bootstrap horizontal collapse.

[collapse horizontal title="Click to expand"]Hidden content here.[/collapse]

Horizontal With Custom Size

[collapse horizontal title="Toggle width collapse" width="400px" min-height="140px"]
This is placeholder content for horizontal collapse.
[/collapse]

Supported Attributes

  • title, label, or button - button text
  • id - custom collapse id (optional)
  • variant - button style (default is primary)
  • horizontal - enables horizontal collapse mode
  • width - width of horizontal content card (default: 300px)
  • min-height - wrapper min height for horizontal mode (default: 120px)

Create Bootstrap-style sliders using Torlang image tags inside [carousel-content]. Slides use a shared height and object-fit: cover so all images look consistent.

Basic Carousel

[carousel] [carousel-content] [image source="slide-1.png"] [/carousel-content] [carousel-content] [image source="slide-2.png"] [/carousel-content] [/carousel]

Carousel With Indicators

[carousel indicate] [carousel-content] [image source="slide-1.png"] [/carousel-content] [carousel-content] [image source="slide-2.png"] [/carousel-content] [/carousel]

Carousel With Captions

[carousel indicate] [carousel-content] [image source="slide-1.png"] [carousel-title]My title[/carousel-title] [carousel-description]this is my description[/carousel-description] [/carousel-content] [carousel-content] [image source="slide-2.png"] [carousel-title]My title[/carousel-title] [carousel-description]this is my description[/carousel-description] [/carousel-content] [/carousel]

Carousel Size

Use size-sm, size-md, or size-lg to control carousel height.

[carousel indicate size-md] [carousel-content] [image source="slide-1.png"] [carousel-title]My title[/carousel-title] [carousel-description]this is my description[/carousel-description] [/carousel-content] [carousel-content] [image source="slide-2.png"] [carousel-title]My title[/carousel-title] [carousel-description]this is my description[/carousel-description] [/carousel-content] [/carousel]

Autoplay

[carousel autoplay] [carousel-content] [image source="slide-1.png"] [/carousel-content] [carousel-content] [image source="slide-2.png"] [/carousel-content] [/carousel]

Supported Tags & Attributes

  • [carousel] - wrapper for the full slider
  • indicate - enables Bootstrap indicators
  • autoplay - adds data-bs-ride="carousel" for automatic sliding
  • size-sm, size-md, size-lg (or size="sm|md|lg") - carousel height scale
  • id - custom carousel id (optional)
  • [carousel-content] - one slide item
  • [image source="..."] - image for the slide
  • [carousel-title] - optional caption title
  • [carousel-description] - optional caption description

Modals

Define your modal once, then open it from any button using the same modal name.

Standard Modal

[modal name="welcome"]
[modal-header]this is the header[/modal-header]
[modal-body]Thanks for visiting our website![/modal-body]
[modal-footer]this is the modal footer[/modal-footer]
[/modal]

[modal-button text="Open Welcome Modal" modal="welcome"]

A close icon is included in the modal header by default.

Static Backdrop Modal

Add static so users cannot close by clicking outside or pressing Escape.

[modal name="welcome" static]
[modal-header]this is the header[/modal-header]
[modal-body]Thanks for visiting our website![/modal-body]
[modal-footer]this is the modal footer[/modal-footer]
[/modal]

[modal-button text="Open Welcome Modal" modal="welcome"]

Centered Modal

Add centered to vertically center the dialog.

[modal name="welcome" static centered]
[modal-header]this is the header[/modal-header]
[modal-body]Thanks for visiting our website![/modal-body]
[modal-footer]this is the modal footer[/modal-footer]
[/modal]

[modal-button text="Open Welcome Modal" modal="welcome"]

Supported Attributes

  • name or id - unique modal identifier used by button modal="..."
  • static - enables static backdrop behavior
  • centered - vertically centers the modal dialog
  • size or size-lg/size-sm/size-xl - modal dialog size
  • title - fallback title when [modal-header] is not provided

If [modal-footer] is not provided, a default footer with a Close button is added automatically. If you provide [modal-footer], your footer content is used as-is.

How To Open

[modal-button text="Open Modal" modal="welcome" bg-red color-green]

Navs & Tabs

Tabs now render in native Bootstrap styles: standard tabs, pills, and vertical pills.

Standard Tabs

[tabs] [tab-item label="Tab 1"]Content for tab 1.[/tab-item] [tab-item label="Tab 2"]Content for tab 2.[/tab-item] [tab-item label="Tab 3"]Content for tab 3.[/tab-item] [/tabs]

Pills

[tabs pills] [tab-item label="Tab 1"]Content for tab 1.[/tab-item] [tab-item label="Tab 2"]Content for tab 2.[/tab-item] [tab-item label="Tab 3"]Content for tab 3.[/tab-item] [/tabs]

Vertical Pills

[tabs pills vertical] [tab-item label="Tab 1"]Content for tab 1.[/tab-item] [tab-item label="Tab 2"]Content for tab 2.[/tab-item] [tab-item label="Tab 3"]Content for tab 3.[/tab-item] [/tabs]

Optional Attributes

  • pills - use Bootstrap pill navigation style
  • vertical - vertical pills layout (best with pills)
  • id - custom id prefix for generated tab ids
  • active or default - set active tab by tab-item id, name, or label

Tab Item Attributes

  • label or title - tab button text
  • id or name - custom key for active/default targeting
  • disabled - disables that tab button

Content Tags

Layout Tags

[page]...[/page] - Wraps page content (default centered layout)
[header]...[/header] - Creates a header block
[title style="big blue"]...[/title] - Creates a title heading
[text style="center"]...[/text] - Displays paragraph text
[button text="Click Me" link="/page"] - Creates a clickable button
[img name="image.jpg" alt="Description"] - Displays an image from your media library

Image Tag

Syntax

[img name="filename.png" alt="Alternative text"]

Attributes

name (required)

The filename of the image from your media library. When typing name= in the editor, you'll see an autocomplete list with thumbnail previews of all available images.

[img name="sample.png" alt="Sample Image"]
alt (required)

Alternative text for the image, used for accessibility and when the image cannot be displayed.

[img name="logo.png" alt="Company Logo"]
width (optional)

Image width in pixels or percentage. Can be a number (pixels) or a percentage string.

[img name="photo.jpg" alt="Photo" width="800"]
[img name="photo.jpg" alt="Photo" width="100%"]
height (optional)

Image height in pixels or percentage. Can be a number (pixels) or a percentage string.

[img name="photo.jpg" alt="Photo" height="600"]
[img name="photo.jpg" alt="Photo" height="50%"]
style (optional)

Inline CSS styles to apply to the image.

[img name="photo.jpg" alt="Photo" style="border: 2px solid blue; border-radius: 8px;"]
class (optional)

CSS class names to apply to the image. Multiple classes can be separated by spaces.

[img name="photo.jpg" alt="Photo" class="rounded shadow-lg"]
loading (optional)

Image loading behavior. Use "lazy" to defer loading until the image is near the viewport, or "eager" (default) to load immediately.

[img name="photo.jpg" alt="Photo" loading="lazy"]

Complete Example

[img name="hero-image.jpg" alt="Hero Banner" width="1200" height="600" class="rounded-lg shadow-xl" loading="lazy"]

Backward Compatibility

The src attribute is still supported for backward compatibility with existing content. However, using name is recommended as it provides autocomplete support and better integration with the media library.

[img src="/path/to/image.jpg" alt="Description"] - Still works, but name is preferred

Conditional Tags

Control Flow

[if condition="USER_LOGGED_IN"]...[/if] - Shows content only if condition is true
[if condition="USER_LOGGED_IN"]...[/if][else]...[/else] - Shows different content based on condition
[var name="USER_NAME"] - Inserts a variable value
[loop data="posts"]...[/loop] - Loops through data array
[include file="header.tx"] - Includes another Torlang file

Sample Site Example

Here's a complete example of a music site homepage:

[page]
[center][b][site-name][/b][/center]
[center][small]Welcome to [site-name]![/small][/center]
[br]
[center][img]/uploads/logo.png[/img][/center]
[br]
[center][b]:: MAIN MENU ::[/b][/center]
[link=/index]🏠 Home[/link][br]
[link=/music]🎵 Music[/link][br]
[link=/contact]📩 Contact Us[/link][br]
[/page]

Mobile-First Design Tips

Best Practices

  • Use [center] tags for mobile-friendly layouts
  • Keep text blocks short and readable
  • Use [br] tags for proper spacing
  • Test on mobile devices regularly
  • Use simple navigation menus