HTML Header Markdown

HTML Header

Source: https://dripyard.com/docs/dripyard-base/components/html-header

Theme: dripyard-base

A utility component for inserting custom HTML elements into the document `` section. This component contains no styles or JavaScript and is designed to be overridden per theme using the replaces key within Single Directory Components definition.

Usage

This component is automatically invoked from the dripyard_base theme's html.html.twig template and should be overridden in child themes to include theme-specific head elements.

{% set font_path = '/' ~ directory ~ '/fonts/instrument-sans/' %}

Common Use Cases

Font Preloading

Preload critical fonts that appear "above the fold" on page load:

{% set font_path = '/' ~ directory ~ '/fonts/font-family/' %}

Hard code Meta Tags

Add theme-specific meta tags:

Favicon Links

Include theme-specific favicon files:

Best Practices

  • Performance: Only preload fonts that appear "above the fold" on page load
  • Maintenance: Update font preloads when changing theme fonts

Column Layout Helper

This is the column layout helper, which you can use to configure

  • Vertical and horizontal spacing
  • Vertical and horizontal alignment
  • Spacing between components
  • Enable stickyness

This helper will not be visible unless editing this page.

Current values:

Padding top Not set
Padding bottom Not set
Horizontal alignment Not set
Vertical alignment Not set
Gutter medium
Stickyness Enabled
Hide mobile Not set
Hide desktop Not set