Ressort Header

A template component for displaying ressort (section) and subressort page headers with optional features including editor image, introduction text, content navigation, RSS feed, and social media links.

Purpose

The Ressort Header component provides consistent header styling for:

Ressort pages: Main section landing pages (e.g., "Heute im Recht")
Subressort pages: Subsection pages with breadcrumb navigation

Features

Two layout types: Ressort (centered) and Subressort (left-aligned)
Optional breadcrumbs for subressort pages
Optional editor avatar (circular image)
RSS feed button
Introduction text with optimized typography
Content navigation (horizontal scrollable)
Social media links (LinkedIn, Mail)
Responsive design with mobile and desktop layouts

Usage

Ressort Header (Default)

{% include "@template-components/ressort-header/ressort-header.twig" with {
  type: "ressort",
  title: "Heute im Recht",
  show_rss: true,
  introduction: "Optionale, einleitende Worte zum Ressort oder Thema.",
  content_navigation: {
    items: [
      { label: "Rechtsprechung", url: "#", active: true },
      { label: "Rechtspolitik & Gesetzgebung", url: "#" },
      { label: "Gesetzesvorhaben", url: "#" }
    ]
  }
} only %}

Subressort Header

{% include "@template-components/ressort-header/ressort-header.twig" with {
  type: "subressort",
  title: "Subressort",
  show_rss: true,
  breadcrumbs: {
    items: [
      { label: "Home", url: "/" },
      { label: "Ressort", url: "/ressort" },
      { label: "Subressort" }
    ]
  },
  introduction: "Optionale, einleitende Worte zum Ressort oder Thema.",
  content_navigation: {
    items: [
      { label: "Rechtsprechung", url: "#", active: true },
      { label: "Rechtspolitik & Gesetzgebung", url: "#" }
    ]
  }
} only %}

With Editor Image

{% include "@template-components/ressort-header/ressort-header.twig" with {
  type: "ressort",
  title: "Heute im Recht",
  show_rss: true,
  editor_image: {
    src: "/path/to/editor.jpg",
    alt: "Editor Name"
  },
  introduction: "Introduction text..."
} only %}

With Social Links

{% include "@template-components/ressort-header/ressort-header.twig" with {
  type: "ressort",
  title: "Heute im Recht",
  show_rss: true,
  introduction: "Introduction text...",
  social_links: [
    {
      type: "linkedin",
      url: "https://www.linkedin.com/company/example",
      label: "LinkedIn"
    },
    {
      type: "mail",
      url: "mailto:contact@example.com",
      label: "E-Mail"
    }
  ]
} only %}

Properties

Property	Type	Required	Description
`type`	string	Yes	Layout type: "ressort" or "subressort"
`title`	string	Yes	Main heading text
`show_rss`	boolean	No	Display RSS feed button
`introduction`	string	No	Introduction paragraph
`editor_image`	object	No	Editor avatar image
`breadcrumbs`	object	No	Breadcrumb navigation (subressort only)
`content_navigation`	object	No	Horizontal navigation
`social_links`	array	No	Social media link buttons
`attributes`	object	No	Additional HTML attributes
`classes`	array	No	Additional CSS classes

Editor Image Object

Property	Type	Required	Description
`src`	string	Yes	Image source URL
`alt`	string	Yes	Alternative text

Social Links Array

Property	Type	Required	Description
`type`	string	Yes	Icon type: "linkedin" or "mail"
`url`	string	No	Link URL
`label`	string	No	Accessible label

Layout Types

Ressort

Visual characteristics:

Centered layout
Roboto Serif font for heading
Large heading size (60px desktop, 36px mobile)
Centered introduction text
Generous vertical padding (112px top/bottom on desktop)

Use when: Creating main section landing pages

Subressort

Visual characteristics:

Left-aligned layout
IBM Plex Sans font for heading
Medium heading size (48px desktop, 32px mobile)
Left-aligned introduction text
Breadcrumb navigation above content
Desktop left padding (148px)

Use when: Creating subsection pages with hierarchical navigation

Responsive Behavior

Mobile (< 768px)

Ressort:

Centered alignment maintained
Font size: 36px (Roboto Serif)
Padding: 48px top, 56px bottom
Editor image: 60px circle
Horizontal padding: 16px

Subressort:

Left-aligned layout
Font size: 32px (IBM Plex Sans, Bold)
Padding: 32px top, 40px bottom
Editor image: 60px circle
Horizontal padding: 16px

Desktop (≥ 768px)

Ressort:

Centered alignment
Font size: 60px (Roboto Serif)
Padding: 112px top/bottom
Editor image: 166px circle
Introduction max-width: 771px

Subressort:

Left-aligned with 148px left padding
Font size: 48px (IBM Plex Sans, SemiBold)
Padding: 48px top, 80px bottom
Editor image: 166px circle
Introduction max-width: 771px

Spacing

Gap values:

Main component gaps: 16px (mobile), 32px (desktop)
Title and RSS button: 12px (mobile), 20px (desktop)
Content sections: 24px (mobile), 32px (desktop)
Social links: 12px

Typography

Ressort heading:

Font: Roboto Serif Medium (500)
Size: 60px (desktop), 36px (mobile)
Line height: 1.3

Subressort heading:

Font: IBM Plex Sans SemiBold (600) desktop, Bold (700) mobile
Size: 48px (desktop), 32px (mobile)
Line height: 1.3

Introduction:

Font: IBM Plex Sans Regular
Size: 18px (desktop), 16px (mobile)
Line height: 1.6 (desktop), 1.3 (mobile)

Accessibility

Semantic HTML

<h1> for main heading
<nav> for breadcrumbs (subressort)
Proper heading hierarchy

ARIA

RSS button has descriptive label (visually hidden)
Social link buttons have accessible labels
Content navigation uses ARIA landmarks

Keyboard Navigation

All interactive elements keyboard accessible
Focus visible styles on buttons and links
Content navigation supports arrow key navigation

Integration with Drupal

The component automatically loads required dependencies:

dependencies:
  - circle_dot/template-components-breadcrumbs
  - circle_dot/pattern-content-navigation

In Page Templates

{% block content %}
  {{ include('@template-components/ressort-header/ressort-header.twig', {
    type: node.bundle,
    title: node.label,
    show_rss: true,
    introduction: node.field_introduction.value,
    content_navigation: navigation_items
  }) }}

  {# Page content #}
{% endblock %}

Browser Support

Modern browsers (last 3 versions of Chrome, Firefox, Edge, Safari)
Progressive enhancement for older browsers

Related Components

Depends on: @template-components/breadcrumbs
Depends on: @patterns/content-navigation
Uses: @elements/button
Uses: @elements/icon
Uses: @elements/image

Design Tokens

Colors:

Text: Semantic color tokens from design system
Borders: Standard border colors

Spacing:

Uses standardized spacing tokens (--size-*)
Consistent with design system

Typography:

Primary font: IBM Plex Sans
Secondary font: Roboto Serif
Size scale follows design system

Information

Folder: src/components/template-components/ressort-header

Files

Schema

Mocks

Template

// src/components/template-components/ressort-header/ressort-header.twig

{{ attach_library("circle_dot/template-components-ressort-header") }}

<div class="RessortHeader u-container RessortHeader--{{ type }} {{ classes|join(' ') }}" {{ attributes }}>
	<div class="RessortHeader-content">
		{% if editor_image %}
			<div class="RessortHeader-editor">
				{% include "@elements/image/image.twig" with {
					uri: editor_image.uri,
					width: editor_image.width,
					height: editor_image.height,
					alt: editor_image.alt,
					rounded: true,
					classes: ["RessortHeader-editorImage"],
				} only %}
			</div>
		{% endif %}

		<div class="RessortHeader-titleWrapper">
			<h1 class="RessortHeader-title">{{ title }}</h1>
			{% if show_rss and rss_url %}
				<div class="RessortHeader-rss">
					{% include "@elements/button/button.twig" with {
						label: "RSS Feed",
						icon: "rss",
						icon_only: true,
						size: "small",
						modifiers: ["tertiary"],
						url: rss_url,
					} only %}
				</div>
			{% endif %}
		</div>

		{% if introduction %}
			<div class="RessortHeader-introduction">
				{{ introduction|raw }}
			</div>
		{% endif %}

		{% if content_navigation %}
			<div class="RessortHeader-navigation">
				{% include "@patterns/content-navigation/content-navigation.twig" with content_navigation only %}
			</div>
		{% endif %}

		{% if social_links %}
			<div class="RessortHeader-social">
				{% for link in social_links %}
					{% set icon_name = link.type %}
					{% include "@elements/button/button.twig" with {
						label: link.label,
						icon: icon_name,
						icon_only: true,
						url: link.url,
						modifiers: ["tertiary"],
					} only %}
				{% endfor %}
			</div>
		{% endif %}
	</div>
</div>

Error: schema is invalid: data/properties must be object