Drupal Radix Theme
  • Introduction
    • Overview & Support
  • Installation
    • Requirements
    • Getting Started
    • Setup with ddev
  • Understanding Radix
    • Individual files and directories
    • Bootstrap Build
    • Bootswatch
  • Working with the components
    • Components: Intro
    • Components: A deep dive
    • An example component
    • The drupal-radix-cli
    • Copy and modify a component
  • Components
    • Accordion
    • Alerts
    • Badge
    • Block
    • Buttons
    • Button Group
    • Breadcrumb
    • Card
    • Carousel
    • Close button
    • Comment
    • Collapse
    • Details
    • Dropdown menu
    • Field
    • Field Comment
    • Fieldset
    • Figure
    • Form
    • Form: Element
    • Form Element Label
    • Form Element: Radio Checkbox
    • Heading
    • HTML
    • Image
    • Input
    • List group
    • Local Tasks
    • Media
    • Modal
    • Nav
    • Nav Item
    • Navbar
    • Navbar Brand
    • Node
    • Offcanvas
    • Page
    • Page: Content
    • Page: Footer
    • Page: Navigation
    • Page: Title
    • Pagination
    • Progress
    • Radios
    • Region
    • Select
    • Spinners
    • Table
    • Taxonomy
    • Textarea
    • Toasts
    • Tooltips
    • User
    • Views: view
    • Views: view--grid
    • Views: view--table
    • Views: view--unformatted
  • Misc
    • Migration and upgrading
    • Roadmap
    • Credits & Contributions
Powered by GitBook
On this page
  • Properties:
  • Slots:
  • Usage

Was this helpful?

  1. Components

Heading

All HTML headings, <h1> through <h6> are available.

PreviousForm Element: Radio CheckboxNextHTML

Last updated 1 year ago

Was this helpful?

Properties:

  • html_tag : The HTML tag to use for the header. Defaults to h1 (h1 | h2 | h3 | h4 | h5 | h6)

  • display: When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

  • attributes: Attributes array.

  • heading_utility_classes: This property contains an array of utility classes.

  • heading_link_utility_classes: This property contains an array of utility classes if the heading is linked. eg. title_link is not null.

  • title_link: The URL to link the title to.

HTML Tag (html_tag)

Heading HTML tag (h1, h2, h3, h4, h5, h6)

Display (display):

When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. optional values are: ( display-1, display-2, display-3, display-4, display-5, display-6) https://getbootstrap.com/docs/5.3/content/typography/#display-headings

Utility Classes (heading_utility_classes):

This property contains an array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.

Slots:

  • content: Content text for the heading.

Usage

Example #1: Have a heading for the h1 page title

{% include 'radix:heading' with {
    heading_html_tag: 'h1',
    content: title|render|striptags|trim,
    attributes: title_attributes,
    heading_utility_classes: classes
  }
%}

Example #2: Use for the heading of a block

{% include 'radix:heading' with {
    heading_html_tag: heading_tag,
    content: heading_text|render|striptags|trim,
  }
%}

Example #3: Use in views title

{% embed "radix:heading" with {
  heading_attributes: title_attributes,
  content: label,
  heading_html_tag: 'h2',
} %}

</div>

Example #4: Have a title with utility classes

{% include "radix:heading" with {
  heading_attributes: your_custom_heading_attributes,
  heading_html_tag: 'h2',
  content: heading,
  heading_utility_classes: ['rich-heading', 'mb-2']
} %}

Example #5: Heading with a link

{% include 'radix:heading' with {
    heading_html_tag: 'h3',
    title_link: url,
    content: label,
    heading_utility_classes: [
      'card-date__title',
      'fs-2',
      'mb-0',
    ],
    heading_link_utility_classes: [
      'text-black',
      'stretched-link',
    ]
  }
%}
Bootstrap docs
Bootstrap Display headings docs