Skip to main content

heading

Heading​

from dara.components.common.heading import Heading

class Heading(ContentComponent)

Heading

A Heading component is the basic component for adding any kind of title/sub-title to your app. It accepts the text to display as the first argument as well as an optional level argument, which controls the heading size/weight, defaults to 1 which is the highest(largest) level.

The heading component also adds an anchor automatically to the heading, which can be linked to using the anchor_name property that is exposed on an instance of the header.

A Heading component is created via:


from dara.components.common import Heading

Heading(
    heading="This is the heading text"
)

The heading can be linked to with an Anchor, which when clicked scrolls to that heading within the same page:


from dara.components.common import Anchor, Heading, Stack, Spacer

heading = Heading(
    heading="This is a second-level heading",
    level=2
)

Stack(
    heading,
    Spacer(height='100vh'),
    Anchor('Click here to go to heading', href=f'#{heading.anchor_name}')
)

Arguments:

  • heading: The text for the heading to display
  • level: The level of heading to display, defaults to 1

Attributes​

  • heading: Union[str, NonDataVariable]
  • level: int