Skip to content
ReferenceAdvancedGroup content inline.

Span

Group: Layout

Description

A Span groups content inline, meaning it flows along with the surrounding text instead of starting a new line the way a Div does. Use it to style or tag a few words inside a sentence, or to give a Fragment a small inline target.

Syntax

Span(content, more_content, ...)

Parameters

Span takes any number of strings and components as positional arguments. Like every component, it accepts styling and attribute keywords.

Examples

from drafter import *


@route
def index() -> Page:
    return Page([
        "The potion is ",
        Span("extremely",
             style_color="crimson",
             style_text_transform="uppercase"),
        " unstable, but the label is ",
        Span("reassuring", id="mood"),
        ".\n",
        Button("Shake it", "shake")
    ])


@route
def shake() -> Fragment:
    return Fragment(["no longer reassuring"], target="#mood")


start_server()

Notes

  • Everything in the example stays on one line: the spans become part of the sentence, and the fragment replaces three words without disturbing the rest of it.
  • The styling helpers wrap strings in inline text automatically, so bold("word") already covers the most common case. Use Span when you need to group several pieces of content or attach an id/classes.