Jadle Language Documentation

Jadle Examples

Learn Jadle through practical examples.

Basic Text Formatting


title: Basic Text Formatting
  subtitle: Styling text in Jadle

This is a simple paragraph.

**This text is bold**
''This text is italic''
__This text is underlined__

*: This is a bullet point
*: This is another bullet point
  decoration: underline
**: This is an indented bullet point

This example demonstrates basic text formatting in Jadle:

  • Creating titles and subtitles
  • Styling text with bold, italic, and underline
  • Creating bullet points with different indentation levels
  • Applying modifiers to elements

Using Images and Layout


title: Using Images and Layout
  subtitle: Creating visual content

image: sample.jpg
  width: 80%
  align: center
  caption: This is a sample image

box:
  color: #f5f5f5
  padding: 20px
  border-color: #ccc
This text is inside a styled box with a gray background and a border.

blank:
  height: 20px

image: banner.jpg
  width: 100%
  opacity: 0.8

This example shows how to work with images and layout elements:

  • Adding images with precise sizing
  • Centering elements and adding captions
  • Creating styled boxes with custom colors and padding
  • Using the blank element for spacing
  • Adjusting opacity for visual effects

Interactive Elements


title: Interactive Elements
  subtitle: Adding user interactions

button: Click me!
  url: https://example.com
  color: #0066cc

video: https://www.youtube.com/watch?v=dQw4w9WgXcQ
  align: center
  width: 90%

form: What's your name?

pause:
This content will be hidden until the user taps the screen.

This example demonstrates interactive elements in Jadle:

  • Creating buttons with links
  • Embedding videos from external sources
  • Adding forms for user input
  • Using pause to create progressive disclosure

Advanced Layout and Positioning


background: #f0f8ff

title: Advanced Layout
  align: center
  size: large

image: header.jpg
  width: 100%
  height: 300px

supertitle: Positioned Elements
  align: right
  across: 70%
  down: 10%

subtitle: Using across: and down: for precise placement
  across: 20%
  down: 50%

box:
  background: #ffffff80
  padding: 20px
  across: 60%
  down: 40%
  width: 30%
This box is positioned precisely on the page.

This example demonstrates advanced layout and positioning:

  • Setting page background colors
  • Precise element positioning using across: and down:
  • Combining modifiers for complex layouts
  • Creating overlapping elements
  • Using transparency for visual effects

Example Index