Torlang Documentation

Text Colors

[text style="color-red-20"]Light red text[/text]

[text style="color-blue-60"]Medium blue text[/text]

[text style="color-yellow"]Yellow text (defaults to shade 60)[/text]

Background Colors

[text style="bg-red-10"]Light red background[/text]

[text style="bg-blue-50"]Medium blue background[/text]

[text style="bg-yellow"]Yellow background (defaults to shade 60)[/text]

Border Colors

[text style="border-red-30"]Red border[/text]

[text style="border-blue-80"]Dark blue border[/text]

[text style="border-green"]Green border (defaults to shade 60)[/text]

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 & Border 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).
border-from-amber-50-to-orange-60 – Renders a gradient border using border-image.

[text style="color-from-blue-60-to-teal-30 text-4xl font-bold"]Gradient headline[/text]

                            [box style="border-from-purple-50-to-pink-60 padding-20 rounded-xl"]Gradient border box[/box]

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]

Page Tag

The [page] tag wraps your entire page content and controls the page width. By default, content is centered with a maximum width. Use container="fluid" for full-width content.

Basic Usage

[page]...[/page] - Default page (centered content with max-width of 1200px)

[page container="fluid"]...[/page] - Full-width page (100% width, no max-width)

Container Options

Control the content container width:

Default (no attribute) - Centered content with max-width of 1200px and 20px horizontal padding
container="fluid" - Full-width content (100% width, no max-width, no padding)

Page Spacing Controls

Control the spacing around the page card (the outer padding/margin around your content):

Remove All Spacing:

[page full-width]...[/page] - Full width, no spacing around the card

[page no-spacing]...[/page] - Remove all outer spacing (same as full-width)

[page tight]...[/page] - Tight spacing (alias for no-spacing)

Custom Spacing:

[page page-spacing="20"]...[/page] - 20px padding on all sides

[page page-spacing="10-40"]...[/page] - 10px vertical, 40px horizontal padding

[page page-padding="30"]...[/page] - Alternative name for page-spacing

[page page-margin="15"]...[/page] - 15px margin on all sides

Page Width:

[page page-width="1200"]...[/page] - Custom max-width in pixels

[page page-width="lg"]...[/page] - Use predefined sizes (sm, md, lg, xl, 2xl, 3xl, full)

[page width="xl"]...[/page] - Alternative name for page-width

Card Spacing:

[page no-card-spacing]...[/page] - Remove padding inside the card (keeps outer spacing)

[page no-card-padding]...[/page] - Alternative name for no-card-spacing

[page no-card]...[/page] - Alternative name for no-card-spacing

Combined Examples

[page full-width no-card-spacing]...[/page] - Full width with no spacing anywhere

[page page-width="xl" page-spacing="30"]...[/page] - Extra large width with 30px spacing

[page container="fluid" page-spacing="20-50" no-card-spacing]...[/page] - Fluid container, custom spacing, no card padding

Spacing Attribute Reference

Attribute	Description	Values
`full-width`	Remove all spacing, full width	Boolean (no value needed)
`no-spacing`	Remove outer spacing	Boolean (no value needed)
`page-spacing`	Custom padding around card	Number (px) or "vertical-horizontal" (e.g., "10-40")
`page-padding`	Same as page-spacing	Number (px) or "vertical-horizontal"
`page-margin`	Custom margin around card	Number (px)
`page-width`	Control page wrapper max-width	Number (px), "sm", "md", "lg", "xl", "2xl", "3xl", "full", "100%"
`no-card-spacing`	Remove padding inside card	Boolean (no value needed)

Note: The default container provides a responsive, centered layout. Use container="fluid" only when you need full-width content.

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] - Line break

Friendly Date & Time

Use natural language to choose a format:

[today style="long"] → Monday, June 10, 2025
[today style="numeric"] → 6/10/2025
[time style="24h" timezone="Europe/London"] → 18:42

Available style values: long, short, numeric, iso, uk, weekday, month for [today]; and long, seconds, 24h, clock, iso, compact for [time]. Override with format whenever you need a custom PHP/Carbon format string.

Add Torlang styling with text-style (friendly tokens) or class:

[today style="weekday" text-style="mint text-lg"]
[time style="clock" text-style="charcoal italic"]

Available Sizes

[text style="text-xs"] - Extra small (12px / 0.75rem)

[text style="text-sm"] - Small (14px / 0.875rem)

[text style="text-base"] - Base (16px / 1rem) - Default

[text style="text-lg"] - Large (18px / 1.125rem)

[text style="text-xl"] - Extra large (20px / 1.25rem)

[text style="text-2xl"] - 2X large (24px / 1.5rem)

[text style="text-3xl"] - 3X large (30px / 1.875rem)

[text style="text-4xl"] - 4X large (36px / 2.25rem)

[text style="text-5xl"] - 5X large (48px / 3rem)

[text style="text-6xl"] - 6X large (60px / 3.75rem)

Examples


[text style="text-xs"]This is extra small text[/text]

[text style="text-sm"]This is small text[/text]

[text style="text-base"]This is base size text[/text]

[text style="text-lg"]This is large text[/text]

[text style="text-xl"]This is extra large text[/text]

[text style="text-2xl"]This is 2X large text[/text]

[text style="text-3xl"]This is 3X large text[/text]

Available Weights

[text style="font-thin"] - Thin (100)

[text style="font-light"] - Light (300)

[text style="font-normal"] - Normal (400) - Default

[text style="font-medium"] - Medium (500)

[text style="font-semibold"] - Semi-bold (600)

[text style="font-bold"] - Bold (700)

[text style="font-extrabold"] - Extra bold (800)

[text style="font-black"] - Black (900)

Examples


[text style="font-thin"]Thin text[/text]

[text style="font-light"]Light text[/text]

[text style="font-normal"]Normal text[/text]

[text style="font-medium"]Medium text[/text]

[text style="font-semibold"]Semi-bold text[/text]

[text style="font-bold"]Bold text[/text]

[text style="font-extrabold"]Extra bold text[/text]

[text style="font-black"]Black text[/text]

Shortcuts

[text style="bold"] or [text style="b"] - Bold text (same as font-bold)

Available Styles

[text style="italic"] or [text style="i"] - Italic text

[text style="underline"] or [text style="u"] - Underlined text

[text style="strikethrough"] or [text style="strike"] or [text style="line-through"] - Strikethrough text

Examples


[text style="italic"]This is italic text[/text]

[text style="underline"]This is underlined text[/text]

[text style="strikethrough"]This is strikethrough text[/text]

[text style="bold italic"]This is bold and italic text[/text]

Available Alignments

[text style="left"] or [text style="text-left"] - Left-aligned text

[text style="center"] or [text style="text-center"] - Center-aligned text

[text style="right"] or [text style="text-right"] - Right-aligned text

[text style="justify"] or [text style="text-justify"] - Justified text

Examples


[text style="left"]Left-aligned text[/text]

[text style="center"]Center-aligned text[/text]

[text style="right"]Right-aligned text[/text]

[text style="justify"]Justified text that spreads across the full width[/text]

Available Transforms

[text style="uppercase"] - UPPERCASE TEXT

[text style="lowercase"] - lowercase text

[text style="capitalize"] - Capitalize Each Word

[text style="normal-case"] - Normal case (removes transform)

Examples


[text style="uppercase"]hello world[/text] → HELLO WORLD

[text style="lowercase"]HELLO WORLD[/text] → hello world

[text style="capitalize"]hello world[/text] → Hello World

Block Tags for Formatting

[b]text[/b] - Bold text (same as style="bold")

[i]text[/i] - Italic text (same as style="italic")

[center]text[/center] - Center-align text (same as style="center")

[color=red-50]text[/color] - Colored text

Combining Multiple Styles

You can combine multiple formatting options in one style attribute:


[text style="text-2xl font-bold color-red-50 center"]Large, bold, red, centered text[/text]

[text style="text-lg font-semibold italic underline"]Large, semi-bold, italic, underlined text[/text]

[text style="text-xl font-black uppercase color-white bg-blue-80"]Extra large, black weight, uppercase, white text on dark blue background[/text]

✨ For Beginners

Don't know what "padding" or "margin" means? No problem! Use these simple English alternatives:

Space Inside = space-inside-10 (instead of padding-10) - adds space inside the element
Space Outside = space-outside-10 (instead of margin-10) - adds space outside the element
Horizontal/Vertical Spacing = space-inside-horizontal-10 or space-outside-vertical-30 - apply spacing to specific directions (horizontal = left & right, vertical = top & bottom)
Horizontal = horizontal (instead of flex-row) - arranges items in a row
Vertical = vertical (instead of flex-col) - arranges items in a column
Hide = hide (instead of hidden) - hides the element
Show = show (instead of block) - shows the element

Both syntaxes work! Use whatever makes more sense to you. Technical syntax is also available for those familiar with CSS.

Control how your layout looks on different screen sizes. Use breakpoint prefixes to apply styles only on specific devices.

Mobile: Small phones (default, 0px+) - no prefix needed
Tablet: Tablets and small laptops (768px and up) - use tablet: prefix
Desktop: Large screens (1024px and up) - use desktop: prefix

Note: Breakpoint prefixes work best with CSS classes. For inline styles, base styles are applied and breakpoint styles override them in mobile-first order. Breakpoint prefixes are not supported for spacing utilities (padding, margin, space-inside, space-outside).

Example: Responsive Layout


[box style="vertical tablet:horizontal"]

  [box]Item 1[/box]

  [box]Item 2[/box]

[/box]

Stacks vertically on mobile, arranges horizontally on tablet and up.

Add space around or inside elements. Use values: 0, 5, 10, 15, 20, 25, 30, 40, 50, 60, 80, 100px (multiples of 5).

Space Inside (Padding)

Adds space inside the element, pushing content away from the edges.

Beginner-friendly:
style="space-inside-10" - All sides
style="space-inside-top-10" - Top only
style="space-inside-horizontal-10" - Left and Right only
style="space-inside-vertical-10" - Top and Bottom only
style="space-inside-10-20" - Vertical (10px) and Horizontal (20px)
style="space-inside-10-20-15-25" - Top-Right-Bottom-Left

Example: Card with Padding


[box style="space-inside-20 rounded-lg shadow-md"]

  Card content with 20px padding on all sides

[/box]

Space Outside (Margin)

Adds space outside the element, pushing it away from other elements.

Beginner-friendly:
style="space-outside-10" - All sides
style="space-outside-top-10" - Top only
style="space-outside-horizontal-10" - Left and Right only
style="space-outside-vertical-10" - Top and Bottom only
style="space-outside-10-20" - Vertical (10px) and Horizontal (20px)
style="space-outside-10-20-15-25" - Top-Right-Bottom-Left

Example: Spacing Between Sections


[box style="space-outside-bottom-30"]

  Section 1

[/box]

[box style="space-outside-bottom-30"]

  Section 2

[/box]

Example: Horizontal and Vertical Spacing


[box style="space-inside-horizontal-10 space-outside-vertical-30 border-from-blue-to-red rounded-lg"]

  Box with horizontal padding and vertical margin

[/box]

You can combine horizontal and vertical spacing for precise control. Horizontal applies to left and right, vertical applies to top and bottom.

Create layouts with columns using a 12-column grid system. The columns should always add up to 12. For example, two columns of 6, three columns of 4, or four columns of 3.

Numeric Columns

Use numbers 1-12. Columns should add up to 12 in each row:

style="col-1" through style="col-12" - Use numbers 1-12
Examples: col-6 + col-6 = 12, col-3 + col-3 + col-3 + col-3 = 12, col-4 + col-4 + col-4 = 12

Example: Two Equal Columns (6 + 6 = 12)


[box style=""]

  [box style="col-6"]Main content[/box]

  [box style="col-6"]Sidebar[/box]

[/box]

Example: Four Equal Columns (3 + 3 + 3 + 3 = 12)


[box style=""]

  [box style="col-3"]Column 1[/box]

  [box style="col-3"]Column 2[/box]

  [box style="col-3"]Column 3[/box]

  [box style="col-3"]Column 4[/box]

[/box]

Responsive Columns

You can use breakpoint prefixes to create different column widths on mobile, tablet, and desktop. Columns automatically wrap on mobile when they sum to 12.

Syntax:
style="col-2 mobile:col-6" - Desktop: 2 columns, Mobile: 6 columns
style="col-4 tablet:col-6 desktop:col-3" - Mobile: 4 columns, Tablet: 6 columns, Desktop: 3 columns

Example: Responsive Two Columns


[box style=""]

  [box style="col-2 mobile:col-6"]Desktop: 2 cols, Mobile: 6 cols[/box]

  [box style="col-2 mobile:col-6"]Desktop: 2 cols, Mobile: 6 cols[/box]

  [box style="col-2"]Desktop: 2 cols, Mobile: 2 cols[/box]

  [box style="col-6"]Desktop: 6 cols, Mobile: 6 cols[/box]

[/box]

On mobile, the first two boxes will be side-by-side (6+6=12), then wrap to the next line. The remaining boxes stack below. On desktop, all four boxes display in one row (2+2+2+6=12).

Note: Columns without a mobile breakpoint keep their desktop width on all screen sizes. Use breakpoints to control how columns adapt to different screen sizes.

Example: Three Equal Columns (4 + 4 + 4 = 12)


[box style=""]

  [box style="col-4"]Column 1[/box]

  [box style="col-4"]Column 2[/box]

  [box style="col-4"]Column 3[/box]

[/box]

Space Between Items (Gap)

Controls the space between grid items or flex items.

Beginner-friendly:
style="space-between-items-10" - 10px space between items
style="item-gap-10" - 10px gap (shorter version)
style="gutter-auto" - Auto gap (15px)

CSS Grid creates a grid of rows and columns where you can place items anywhere. Perfect for complex layouts like dashboards or image galleries.

Grid Columns (How Many Columns)

Beginner-friendly:
style="columns-3" or style="3-columns" - Create 3 columns
style="columns-4" or style="4-columns" - Create 4 columns
style="auto-columns" - Automatically fit as many columns as possible

Grid Rows (How Many Rows)

Beginner-friendly:
style="rows-2" or style="2-rows" - Create 2 rows
style="rows-3" or style="3-rows" - Create 3 rows

Make Item Span Multiple Columns

Beginner-friendly:
style="take-3-columns" or style="span-3-columns" - Item takes 3 columns
style="take-2-rows" or style="span-2-rows" - Item takes 2 rows

Example

Beginner-friendly:
style="grid columns-3 space-between-items-10" - 3-column grid with 10px gap

Control the width and height of elements using simple English words.

Width

style="width-full" - Full width (100%)
style="width-half" - Half width (50%)
style="width-third" - One third width (33.33%)
style="width-quarter" - One quarter width (25%)
style="width-auto" - Auto width (fits content)
style="width-fit" - Fit content width

Height

style="height-full" - Full height (100%)
style="height-half" - Half height (50%)
style="height-auto" - Auto height (fits content)
style="height-fit" - Fit content height
style="height-screen" - Full screen height (100vh)

Max-Width (Maximum Width)

style="max-width-full" - Maximum 100% width
style="max-width-half" - Maximum 50% width
style="max-width-screen" - Maximum screen width (100vw)

Min-Width (Minimum Width)

style="min-width-0" - No minimum width (0)
style="min-width-full" - Minimum 100% width

Example: Full Width Element


[box style="width-full space-inside-20"]

  Full-width content area

[/box]

Example: Half Width Sidebar


[box style="width-half space-inside-15"]

  Sidebar content (50% width)

[/box]

Show or Hide Elements

Beginner-friendly:
style="show" - Show the element (block display)
style="hide" - Hide the element

Overflow (What Happens When Content is Too Big)

style="overflow-auto" - Show scrollbars when needed
style="overflow-hidden" - Hide content that doesn't fit
style="overflow-visible" - Show all content (may overflow)
style="overflow-scroll" - Always show scrollbars
style="overflow-x-auto" - Horizontal scrollbar when needed
style="overflow-y-hidden" - Hide vertical overflow

Example: Scrollable Content Area


[box style="height-screen overflow-auto space-inside-20"]

  Long content that scrolls when it exceeds the height

[/box]

Position Types

Beginner-friendly:
style="relative-position" - Position relative to normal flow
style="absolute-position" - Position absolutely (relative to parent)
style="fixed-position" - Fixed position (stays in place when scrolling)
style="sticky-position" - Sticky position (sticks when scrolling)

Position Values (Distance from Edges)

style="top-0", style="top-10", etc. - Distance from top
style="right-10" - Distance from right
style="bottom-20" - Distance from bottom
style="left-5" - Distance from left

Centering

style="center-x" - Center horizontally
style="center-y" - Center vertically
style="center-xy" - Center both horizontally and vertically

Example: Fixed Header


[box style="fixed-position top-0 width-full layer-100"]

  Fixed header that stays at the top when scrolling

[/box]

Example: Centered Modal


[box style="absolute-position center-xy layer-modal"]

  Centered modal dialog

[/box]

Controls which elements appear on top of others (like stacking cards).

Numeric Values

Beginner-friendly:
style="layer-10" or style="stack-level-10" - Layer 10
style="layer-20" - Layer 20 (appears above layer-10)

Semantic Values (Common Use Cases)

Beginner-friendly:
style="layer-base" - Base layer (0)
style="layer-dropdown" - Dropdown layer (1000)
style="layer-modal" - Modal/dialog layer (1050)
style="layer-tooltip" - Tooltip layer (1070)

Example: Modal Overlay


[box style="fixed-position layer-modal center-xy"]

  Modal appears above all other content

[/box]

Rounded Corners (Border Radius)

style="rounded-none" - Sharp corners (no rounding)
style="rounded-sm" - Small rounding (2px)
style="rounded-md" - Medium rounding (6px)
style="rounded-lg" - Large rounding (10px)
style="rounded-xl" - Extra large rounding (16px)
style="rounded-full" - Fully rounded (circle/pill shape)
style="rounded-top" - Round top corners only
style="rounded-right" - Round right corners only
style="rounded-bottom" - Round bottom corners only
style="rounded-left" - Round left corners only

Shadows (Depth Effect)

style="shadow-none" - No shadow
style="shadow-sm" - Small shadow (subtle)
style="shadow-md" - Medium shadow
style="shadow-lg" - Large shadow (prominent)
style="shadow-xl" - Extra large shadow (very prominent)

Example: Card with Rounded Corners and Shadow


[box style="rounded-lg shadow-md space-inside-20"]

  Beautiful card with rounded corners and medium shadow

[/box]

Example: Circular Avatar


[box style="rounded-full width-100 height-100"]

  Circular element (perfect for avatars)

[/box]

Here are real-world examples using beginner-friendly syntax. You can mix and match with technical syntax too!

Simple Container (Content Box)

Beginner-friendly:
[box style="large-container space-inside-20"]Content here[/box]

Horizontal Row with Items Spread Out

Beginner-friendly:

[box style="flex horizontal space-between center-vertically space-between-items-20"]

  [box]Item 1[/box]

  [box]Item 2[/box]

[/box]

3-Column Grid Layout

Beginner-friendly:

[box style="grid columns-3 space-between-items-10"]

  [box]Column 1[/box]

  [box]Column 2[/box]

  [box]Column 3[/box]

[/box]

Two-Column Layout (Main Content + Sidebar)

Beginner-friendly:

[box style="flex horizontal space-between-items-10"]

  [box style="col-8"]Main content[/box]

  [box style="col-4"]Sidebar[/box]

[/box]

Or using English names:

[box style="flex horizontal"]

  [box style="col-two-thirds"]Main content[/box]

  [box style="col-third"]Sidebar[/box]

[/box]

Centered Content

Beginner-friendly:

[box style="medium-container space-inside-20 center"]

  Centered content in a medium container

[/box]

Card Layout with Shadow

[box style="space-inside-20 rounded-lg shadow-md"]

  Card content with rounded corners and shadow

[/box]

✨ 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

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

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"]

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.)

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

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"]

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)

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

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]

Create sleek navigation bars with glass effects, search, and action buttons.

Basic Usage

[navbar style="background-slate-10 color-slate-100"]

[brand-title style="text-lg font-semibold"]Torlang[/brand-title]

[brand-subtitle style="color-slate-80 text-sm"]Build boldly[/brand-subtitle]

[nav-link url="/" style="color-mint-90"]Home[/nav-link]

[nav-link url="/features" style="color-teal-90"]New[/nav-link]

[nav-link url="/docs" style="color-slate-80"]Docs[/nav-link]

[nav-cta]

[button url="/start" size="medium" style="center background-from-teal-100-to-blue-100 color-from-white glow"]

Launch Builder

[/button]

[/nav-cta]

[/navbar]

Glass Navigation with Search

[navbar brand-position="inline" nav-position="right" style="glass sticky-top shadow-sm background-slate-90 color-white"]

[brand-logo src="/logo.svg" style="rounded-xl shadow-soft" width="40"]

[brand-title style="color-white text-xl font-semibold"]Simex[/brand-title]

[brand-subtitle style="color-slate-80 text-sm tracking-wide"]Build in minutes[/brand-subtitle]

[nav-link url="/"]Overview[/nav-link]

[nav-link url="/pricing"]Pricing[/nav-link]

[nav-link url="/labs"]Labs[/nav-link]

[nav-search placeholder="Search docs" action="/search" name="q"]

[nav-cta]

[button url="/login" size="medium" style="center background-from-slate-90-to-slate-90 color-from-white shadow-sm"]

Sign In

[/button]

[/nav-cta]

[nav-cta]

[button url="/register" size="medium" style="center background-from-teal-100-to-blue-100 color-from-white glow"]

Create Account

[/button]

[/nav-cta]

[/navbar]

Navbar Attributes

brand / title – Primary brand text.
brand-subtitle / subtitle – Secondary tagline beneath the brand.
brand-logo / logo – Logo image URL (optional).
brand-link / brand-url – Brand hyperlink target (default /).
style – Torlang style tokens only (no Tailwind): supports glass, sticky-top, shadow-sm|lg, background-*, color-*, border-*, glow. Palette shades stop at 100 (e.g. background-slate-90, color-white).
glass (legacy) – Frosted blur and glow. Prefer style="glass".
shadow (legacy) – none, sm, or lg. Prefer style="shadow-sm".
background / bg (legacy) – Prefer style="background-slate-90".
text / text-color (legacy) – Prefer style="color-white".
border / border-color (legacy) – Prefer style="border-teal-40".
button-color / cta-color – Default CTA background (Torlang palette).
button-text / cta-text – Default CTA text color (Torlang palette).
brand-align – Logo block on left (default), center, or right.
brand-position – Shortcut; inline keeps brand on the same row as nav items.
header-layout – stack (logo above menu) or inline (forced when brand-position="inline").
menu-align / desktop-layout – Desktop menu layout: left, center, right, spread.
nav-position – Explicit nav alignment (left, center, right); overrides menu-align.
menu-transition – Mobile animation: slide, fade, scale, push.
menu-transition-duration – Transition speed (ms).
toggle-label / toggle-icon – Text or emoji for the mobile toggle button.
sticky – Set to top to keep the navbar fixed.
max-width – Constrain the navbar (e.g. 1200px).
class – Extra classes if needed; style remains Torlang tokens (not Tailwind).

You can also replace the brand attributes with inline tags for richer styling:

[navbar brand-position="inline" style="glass bg-black-100 text-white"]

[brand-logo src="TorexFlow.png" style="rounded-full shadow-sm" width="42"]

[brand-title style="color-mint text-xl font-semibold"]Simex[/brand-title]

[brand-subtitle style="color-slate-40 text-sm"]Build in minutes[/brand-subtitle]

... nav items ...

[/navbar]

[brand-title] – Use content or = "Text" / value="Text" to set the primary label. Accepts class and Torex style tokens.
[brand-subtitle] – Same API for the supporting line.
[brand-logo] – Set src/logo/name plus optional width, height, class, style, or alt.

If any of these tags are present, they override the matching navbar attributes automatically.

Navigation Items

Use [nav-link] for menu entries. Legacy [nav-item] still renders, but the simplified tags keep things readable inside the navbar block.

[nav-link url="/labs" highlight style="color-white"]Labs[/nav-link]

align="right" – Move a link to the action cluster
highlight or active – Emphasise the current page
style – Apply Torex tokens (e.g. style="color-teal-90") to style the link
item-bg / item-text / item-border – Legacy coloring props; still supported
item-class, item-style – Extra classes or inline styles for the list item wrapper
label – Optional text fallback when you prefer not to include inner content

Mobile Toggle

The navbar automatically collapses below 1024px. Use the toggle attributes to personalise the experience:

[navbar brand="Torlang" toggle-label="Open Menu" toggle-icon="☰" menu-transition="fade" menu-transition-duration="360"]

Set toggle-label to keep the call-to-action conversational (e.g. “Open Menu”).
menu-transition picks the animation style; menu-transition-duration adjusts the pace.
The toggle button and menu inherit your bg / text colours automatically.

Navbar Head

Prefer to keep your logo/title settings separate? Use [nav-head] inside the navbar.

[nav-head brand="Torlang" subtitle="WOW" logo="TorexFlow.png" align="center"]

[nav-head]

[img name="logo.png" alt="Torlang" width="36"]

[text style="text-xs uppercase muted"]Create boldly[/text]

[/nav-head]

Attributes: brand, subtitle, logo, brand-link, align, menu-align, and layout="inline|stack".
Any inner content replaces the default brand block, so you can mix images, text, or icons freely.
When present, [nav-head] overrides the navbar’s brand, subtitle, and logo attributes automatically.

Call-to-Action Buttons

Use [nav-cta] as a block and place your button inside. This keeps formatting consistent and lets you reuse the button tag styles.

[nav-cta]

[button url="/start" size="medium" style="center background-from-teal-100-to-blue-100 color-from-white glow"]

Start Trial

[/button]

[/nav-cta]

variant – solid (default), outline, or secondary
bg / background – CTA background color using Torex palette tokens (e.g. bg-amber-40, teal-60, hex, rgb, or CSS variables)
text-color / color – CTA text color
icon – Optional leading emoji or glyph
Inner text – Defaults to text / label attribute when omitted

Color Example

[navbar brand="Torlang" style="glass sticky-top shadow-lg bg-slate-900 color-white border-teal-40"]

Search Bar

Add an inline search form:

[nav-search placeholder="Find docs" action="/search" name="query"]

action – Form action URL
method – HTTP method (default GET)
name – Input field name (default q)

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 text="Get Started" url="/start" color="primary"][/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

Display contextual feedback messages with variants for different types of information.

Basic Usage

[alert variant="success"]Operation completed successfully![/alert]

[alert variant="error"]An error occurred. Please try again.[/alert]

[alert variant="warning"]Please review your input before submitting.[/alert]

[alert variant="info"]New features are available in the dashboard.[/alert]

With Title

[alert variant="success" title="Success!"]Your changes have been saved.[/alert]

Dismissible

[alert variant="info" dismissible]This alert can be closed by clicking the × button.[/alert]

Attributes

variant or type or color - Alert style: success, error, danger, warning, info (default: info)
title - Optional title text (displayed in bold)
dismissible or dismiss - Adds a close button (no value needed)
id - Unique identifier for the alert
class - Additional CSS classes
style - Custom inline styles

Badges

Small status indicators and labels for highlighting information.

Basic Usage

[badge text="New"]

[badge text="5" variant="primary"]

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

[badge text="Pending" variant="warning"]

Sizes

[badge text="Small" size="small"]

[badge text="Medium" size="medium"] (default)

[badge text="Large" size="large"]

Attributes

text or label - Badge text (required)
variant or type or color - Badge style: primary, success, error, danger, warning, info, secondary (default: primary)
size - Badge size: small, medium, large (default: medium)
class - Additional CSS classes
style - Custom inline styles

Buttons

Enhanced button component with block format support, gradient styling, glow effects, and flexible sizing.

Block Format (Recommended)

The button tag supports a block format where the button text is placed between opening and closing tags. This allows for cleaner syntax and better integration with the styling system.

[button style=""]

    Start Building

[/button]

[button style="small background-teal color-white glow center" url="/"]

    Styled Button

[/button]

Button Links

To make your button link to a URL, use the url, link, or href attribute. If no URL is specified, the button defaults to # (no navigation).

[button style="small background-teal color-white" url="/signup"]

    Sign Up

[/button]

[button style="medium background-blue color-white glow" url="/about"]

    Learn More

[/button]

[button style="big color-from-white-to-green background-from-purple-to-pink" url="https://example.com"]

    External Link

[/button]

Default Styling

When no styles are specified, buttons have a clean, minimal appearance:

White background
Light gray border (1px solid)
Black text
Small size (default)
Simple hover effect (light gray background on hover)

[button style=""]

    Default Button

[/button]

Note: When a background color is added, the default border is automatically removed unless you explicitly specify a border style.

Sizes

You can specify the button size using the size attribute or include it in the style attribute. The default size is small.

[button style="small"]

    Small Button

[/button]

Or: [button size="small"]Small Button[/button]

[button style="medium"]

    Medium Button

[/button]

[button style="big"]

    Big Button

[/button]

Gradient Backgrounds

Create beautiful gradient backgrounds using the background-from- syntax:

[button style="background-from-teal-to-red color-white"]

    Gradient Button

[/button]

[button style="background-from-purple-50-to-pink-60 color-white"]

    Custom Gradient

[/button]

Text Gradients

Apply gradients to the button text itself:

[button style="color-from-white-60-to-green-100"]

    Gradient Text

[/button]

Combined Text and Background Gradients

Use both text and background gradients together for stunning effects:

[button style="color-from-white-60-to-green-100 background-from-purple-50-to-pink-60"]

    Double Gradient

[/button]

Glow Effect

Add a glowing shadow effect that matches your button's background color. Simply include the glow keyword in your style attribute. The glow will automatically use colors from your gradient or solid background.

[button style="small background-teal color-white glow"]

    Glowing Button

[/button]

[button style="background-from-green-50-to-blue-60 color-white glow"]

    Gradient Glow

[/button]

Note: The glow effect includes hover animations that intensify the glow and add a subtle lift effect.

Positioning

Center, left, or right align buttons using the center, left, or right keywords:

[button style="background-teal color-white center" url="/"]

    Centered Button

[/button]

[button style="background-teal color-white left" url="/"]

    Left Aligned

[/button]

[button style="background-teal color-white right" url="/"]

    Right Aligned

[/button]

Solid Background Colors

Use solid background colors with the background- or bg- prefix:

[button style="background-teal color-white"]

    Teal Button

[/button]

[button style="bg-blue-50 color-black"]

    Blue Button

[/button]

Note: When you add a background color, the default border is automatically removed. You can still add a custom border if needed.

Complete Examples

[button style="small background-from-teal-to-red color-white glow center" url="/start"]

    Start Building

[/button]

[button style="big color-from-white-60-to-green-100 background-from-purple-50-to-pink-60 glow rounded-lg" url="/premium"]

    Premium Button

[/button]

[button style="small background-teal color-white glow" url="/"]

    Simple Glow

[/button]

Button Attributes

link or url or href - URL for link buttons (default: #)
size - Button size: small, medium, big (default: small). Can also be specified in the style attribute.
class - Additional CSS classes
style - Custom inline styles (supports all layout utilities, gradients, colors, positioning, etc.)

Style Attribute Keywords

The style attribute supports a wide range of keywords:

Sizes: small, medium, big
Colors: color-red, color-white, bg-teal, background-blue-50
Gradients: color-from-white-to-green, background-from-purple-to-pink
Effects: glow - adds glowing shadow effect
Positioning: center, left, right
Borders: border-2, border-blue, rounded-lg
Other: All standard layout utilities (padding, margin, etc.)

Examples:

[button style="small background-teal color-white glow center" url="/"]

    Styled Button

[/button]

[button style="big color-from-white-60-to-green-100 background-from-purple-50-to-pink-60 glow rounded-lg" url="/signup"]

    Complete Style

[/button]

Cards

Flexible content containers with optional header and footer sections.

Basic Usage

[card]This is card content.[/card]

With Title

[card title="Card Title"]Card content goes here.[/card]

With Header and Footer

[card title="Card Title" footer="Card Footer"]Card body content.[/card]

Using Structural Tags

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

Attributes

title or header - Card header text
footer - Card footer text
class - Additional CSS classes
style - Custom inline styles

Collapse

Expandable/collapsible content sections with smooth animations.

Basic Usage

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

Open by Default

[collapse title="Expanded Section" open]Content visible by default.[/collapse]

Attributes

title or label - Button label text (required)
id - Unique identifier (auto-generated if not provided)
open or expanded - Opens the collapse by default (no value needed)
class - Additional CSS classes
style - Custom inline styles

Modals

Create pop-up dialog boxes that appear on top of your page. Perfect for confirmations, forms, or extra information.

Simple Example

Create a modal and add a button to open it:

[modal id="welcome" title="Welcome!"]

  Thanks for visiting our website!

[/modal]


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

How It Works

It's super simple - just two steps:

Create the modal with a unique name (id): [modal id="myModal" title="My Title"]Content here[/modal]
Add a button to open it: [button text="Click Me" modal="myModal"]

That's it! Click the button and the modal appears. Click outside or press Escape to close it.

More Examples

[modal id="confirm" title="Are you sure?"]

  This action cannot be undone.

[/modal]


[button text="Delete Item" modal="confirm"]

[modal id="info" title="Help"]

  Here's some helpful information for you.

[/modal]


[button text="Need Help?" modal="info"]

Modal Sizes

Choose how big you want your modal to be:

[modal id="small" size="small" title="Small Modal"]Small content[/modal]

[modal id="medium" size="medium" title="Medium Modal"]Medium content (default)[/modal]

[modal id="large" size="large" title="Large Modal"]Large content[/modal]

[modal id="xl" size="xl" title="Extra Large"]Extra large content[/modal]

Modal with Sections

For more control, you can organize your modal into header, body, and footer:

[modal id="detailed"]

  [modal-header]Modal Title[/modal-header]

  [modal-body]Your main content goes here.[/modal-body]

  [modal-footer][button text="Close"][/modal-footer]

[/modal]

Modal Attributes

id - Give your modal a unique name (required). Use this same name in your button's modal attribute.
title or header - The title that appears at the top of the modal
size - How big the modal is: small, medium (default), large, or xl
footer - Content for the footer (like buttons)
class - Add your own CSS classes
style - Add custom styling

Opening Modals

The easiest way is to use the modal attribute on a button:

[button text="Open Modal" modal="myModal"]

Just use the same name you gave your modal in the id attribute!

Navs & Tabs

Tabbed interface for organizing content into multiple panels.

Basic Usage

[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]

With Active Tab

[tabs active="tab-2"]
  [tab-item id="tab-1" label="Tab 1"]Content 1.[/tab-item]
  [tab-item id="tab-2" label="Tab 2"]Content 2.[/tab-item]
[/tabs]

Using ID Attribute

[tabs id="myTabs"]
  [tab-item id="home" label="Home"]Home content.[/tab-item]
  [tab-item id="about" label="About"]About content.[/tab-item]
[/tabs]

Attributes

id - Unique identifier (auto-generated if not provided)
active or default - ID of the active tab (default: first tab)
tone or accent - Friendly color for the active tab & underline (e.g. “mint”, “lavender”, “soft ocean”)
tab-background or tab-bg - Background of the tab buttons (accepts English words like “cloud white” or utility tokens)
tab-text - Inactive tab text colour (e.g. “calm slate”)
panel or panel-background - Content area background (“paper white”, “midnight”)
border - Outline colour for the whole component
class - Additional CSS classes
style - Custom inline styles

Tab Item Attributes

id or name - Unique identifier for the tab (auto-generated if not provided)
label or title - Tab button text (required)

Styling Tabs the English Way

Use friendly words instead of hex codes. Torlang understands phrases like “soft mint”, “cloud white”, “deep charcoal”, and more.

[tabs tone="lavender" tab-background="cloud white" tab-text="calm slate" panel="paper"]

  [tab-item label="Overview"]Nice and friendly tabs.[/tab-item]

  [tab-item label="Details"]Pick any colour phrase you like.[/tab-item]

[/tabs]

Need a darker look? Just describe it:

[tabs tone="sunset" tab-background="midnight" tab-text="mist" panel="night" border="charcoal"]

Torlang will translate “mint”, “ocean sky”, “soft rose”, “charcoal”, “cloud”, etc. into matching colours automatically.

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

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

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

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

Get started with Torlang

Quick Start

Basic Syntax

Available Colors

Shade System

Color Syntax

Text Colors

Background Colors

Border Colors

Background Gradients

Text & Border Gradients

Text Gradients:

Border Gradients:

Combined Colors

Basic Tags

Page Tag

Basic Usage

Container Options

Page Spacing Controls

Combined Examples

Spacing Attribute Reference

System Tags

Text Sizes

Friendly Date & Time

Available Sizes

Examples

Font Weights

Available Weights

Examples

Shortcuts

Text Styles

Available Styles

Examples

Text Alignment

Available Alignments

Examples

Text Transform

Available Transforms

Examples

Formatting Tags

Block Tags for Formatting

Combining Multiple Styles

Layout System

✨ For Beginners

Breakpoints (Responsive Design)

Example: Responsive Layout

Spacing

Space Inside (Padding)

Example: Card with Padding

Space Outside (Margin)

Example: Spacing Between Sections

Example: Horizontal and Vertical Spacing

Grid & Columns

Numeric Columns

Example: Two Equal Columns (6 + 6 = 12)

Example: Four Equal Columns (3 + 3 + 3 + 3 = 12)

Responsive Columns

Example: Responsive Two Columns

Example: Three Equal Columns (4 + 4 + 4 = 12)

Space Between Items (Gap)

CSS Grid (Advanced Layouts)

Grid Columns (How Many Columns)

Grid Rows (How Many Rows)

Make Item Span Multiple Columns

Example

Sizing

Width

Height

Max-Width (Maximum Width)

Min-Width (Minimum Width)

Example: Full Width Element

Example: Half Width Sidebar

Display & Overflow

Show or Hide Elements

Overflow (What Happens When Content is Too Big)

Example: Scrollable Content Area

Positioning

Position Types

Position Values (Distance from Edges)

Centering