Theme system overview

Same name in other branches
  1. 7.x modules/system/theme.api.php \themeable
  2. 9 core/lib/Drupal/Core/Render/theme.api.php \themeable
  3. 8.9.x core/lib/Drupal/Core/Render/theme.api.php \themeable
  4. 10 core/lib/Drupal/Core/Render/theme.api.php \themeable

Functions and templates for the user interface that themes can override.

Drupal's theme system allows a theme to have nearly complete control over the appearance of the site, which includes both the markup and the CSS used to style the markup. For this system to work, modules, instead of writing HTML markup directly, need to return "render arrays", which are structured hierarchical arrays that include the data to be rendered into HTML (or XML or another output format), and options that affect the markup. Render arrays are ultimately rendered into HTML or other output formats by recursive calls to \Drupal\Core\Render\RendererInterface::render(), traversing the depth of the render array hierarchy. At each level, the theme system is invoked to do the actual rendering. See the documentation of \Drupal\Core\Render\RendererInterface::render() and the Theme system and Render API topic for more information about render arrays and rendering.

Twig Templating Engine

Drupal 8 uses the templating engine Twig. Twig offers developers a fast, secure, and flexible method for building templates for Drupal 8 sites. Twig also offers substantial usability improvements over PHPTemplate, and does not require front-end developers to know PHP to build and manipulate Drupal 8 themes.

For further information on theming in Drupal 8 see https://www.drupal.org/docs/8/theming

For further Twig documentation see https://twig.symfony.com/doc/1.x/templates.html

Theme Hooks

The theme system is invoked in \Drupal\Core\Render\Renderer::doRender() by calling the \Drupal\Core\Theme\ThemeManagerInterface::render() function, which operates on the concept of "theme hooks". Theme hooks define how a particular type of data should be rendered. They are registered by modules by implementing hook_theme(), which specifies the name of the hook, the input "variables" used to provide data and options, and other information. Modules implementing hook_theme() also need to provide a default implementation for each of their theme hooks in a Twig file, and they may also provide preprocessing functions. For example, the core Search module defines a theme hook for a search result item in search_theme():

return [
    'search_result' => [
        'variables' => [
            'result' => NULL,
            'plugin_id' => NULL,
        ],
        'file' => 'search.pages.inc',
    ],
];

Given this definition, the template file with the default implementation is search-result.html.twig, which can be found in the core/modules/search/templates directory, and the variables for rendering are the search result and the plugin ID. In addition, there is a function template_preprocess_search_result(), located in file search.pages.inc, which preprocesses the information from the input variables so that it can be rendered by the Twig template; the processed variables that the Twig template receives are documented in the header of the default Twig template file.

Theme hooks can declare a variable deprecated using the reserved 'deprecations' variable. For example:


 search_result' => [
  'variables' => [
    'result' => NULL,
    'new_result' => NULL,
    'plugin_id' => NULL,
    'deprecations' => [
      'result' => "'result' is deprecated in drupal:X.0.0 and is removed from drupal:Y.0.0. Use 'new_result' instead. See https://www.example.com."
    ]
  ],
],

Template engines should trigger a deprecation error if a deprecated variable is used in a template.

Overriding Theme Hooks

Themes may register new theme hooks within a hook_theme() implementation, but it is more common for themes to override default implementations provided by modules than to register entirely new theme hooks. Themes can override a default implementation by creating a template file with the same name as the default implementation; for example, to override the display of search results, a theme would add a file called search-result.html.twig to its templates directory. A good starting point for doing this is normally to copy the default implementation template, and then modifying it as desired.

Preprocessing for Template Files

Several functions are called before the template file is invoked to modify the variables that are passed to the template. These make up the "preprocessing" phase, and are executed (if they exist), in the following order (note that in the following list, HOOK indicates the hook being called or a less specific hook. For example, if '#theme' => 'node__article' is called, hook is node__article and node. MODULE indicates a module name, THEME indicates a theme name, and ENGINE indicates a theme engine name). Modules, themes, and theme engines can provide these functions to modify how the data is preprocessed, before it is passed to the theme template:

  • template_preprocess(&$variables, $hook): Creates a default set of variables for all theme hooks with template implementations. Provided by Drupal Core.
  • template_preprocess_HOOK(&$variables): Should be implemented by the module that registers the theme hook, to set up default variables.
  • MODULE_preprocess(&$variables, $hook): hook_preprocess() is invoked on all implementing modules.
  • MODULE_preprocess_HOOK(&$variables): hook_preprocess_HOOK() is invoked on all implementing modules, so that modules that didn't define the theme hook can alter the variables.
  • ENGINE_engine_preprocess(&$variables, $hook): Allows the theme engine to set necessary variables for all theme hooks with template implementations.
  • ENGINE_engine_preprocess_HOOK(&$variables): Allows the theme engine to set necessary variables for the particular theme hook.
  • THEME_preprocess(&$variables, $hook): Allows the theme to set necessary variables for all theme hooks with template implementations.
  • THEME_preprocess_HOOK(&$variables): Allows the theme to set necessary variables specific to the particular theme hook.

Theme hook suggestions

In some cases, instead of calling the base theme hook implementation (either the default provided by the module that defined the hook, or the override provided by the theme), the theme system will instead look for "suggestions" of other hook names to look for. Suggestions can be specified in several ways:

  • In a render array, the '#theme' property (which gives the name of the hook to use) can be an array of theme hook names instead of a single hook name. In this case, the render system will look first for the highest-priority hook name, and if no implementation is found, look for the second, and so on. Note that the highest-priority suggestion is at the end of the array.
  • In a render array, the '#theme' property can be set to the name of a hook with a '__SUGGESTION' suffix. For example, in search results theming, the hook 'item_list__search_results' is given. In this case, the render system will look for theme templates called item-list--search-results.html.twig, which would only be used for rendering item lists containing search results, and if this template is not found, it will fall back to using the base item-list.html.twig template. This type of suggestion can also be combined with providing an array of theme hook names as described above.
  • A module can implement hook_theme_suggestions_HOOK(). This allows the module that defines the theme template to dynamically return an array containing specific theme hook names (presumably with '__' suffixes as defined above) to use as suggestions. For example, the Search module does this in search_theme_suggestions_search_result() to suggest search_result__PLUGIN as the theme hook for search result items, where PLUGIN is the machine name of the particular search plugin type that was used for the search (such as node_search or user_search).

For further information on overriding theme hooks see https://www.drupal.org/node/2186401

Altering theme hook suggestions

Modules can also alter the theme suggestions provided using the mechanisms of the previous section. There are two hooks for this: the theme-hook-specific hook_theme_suggestions_HOOK_alter() and the generic hook_theme_suggestions_alter(). These hooks get the current list of suggestions as input, and can change this array (adding suggestions and removing them).

Assets

We can distinguish between three types of assets:

  • Unconditional page-level assets (loaded on all pages where the theme is in use): these are defined in the theme's *.info.yml file.
  • Conditional page-level assets (loaded on all pages where the theme is in use and a certain condition is met): these are attached in hook_page_attachments_alter(), e.g.:
function THEME_page_attachments_alter(array &$page) {
    if ($some_condition) {
        $page['#attached']['library'][] = 'my_theme/something';
    }
}
  • Template-specific assets (loaded on all pages where a specific template is in use): these can be added by in preprocessing functions, using
$variables['#attached'];

, e.g.:

function THEME_preprocess_menu_local_action(array &$variables) {
    // We require touch events detection for button styling.
    $variables['#attached']['library'][] = 'core/drupal.touchevents-test';
}

Front Matter

Twig has been extended in Drupal to provide an easy way to parse front matter from template files. See \Drupal\Component\FrontMatter\FrontMatter for more information:

$metadata = \Drupal::service('twig')->getTemplateMetadata('/path/to/template.html.twig');

Note: all front matter is stripped from templates prior to rendering.

Theme Update functions

Themes support post updates in order to install module dependencies that have been added to the THEME.info.yml after the theme has been installed. Additionally, if a theme has changed its configuration schema, post updates can fix theme settings configuration. See hook_post_update_NAME for more information about post updates.

See also

Hooks

Callbacks

Render API overview

File

core/lib/Drupal/Core/Render/theme.api.php, line 8

Functions

Title Sort descending File name Summary
template_preprocess_system_modules_uninstall core/modules/system/system.admin.inc Prepares variables for module uninstall templates.

Files

Title Sort descending File name Summary
admin-block-content.html.twig core/modules/system/templates/admin-block-content.html.twig Default theme implementation for the content of an administrative block.
admin-block.html.twig core/modules/system/templates/admin-block.html.twig Default theme implementation for an administrative block.
admin-page.html.twig core/modules/system/templates/admin-page.html.twig Default theme implementation for an administrative page.
announcements-feed-admin.html.twig core/themes/stable9/templates/announcements_feed/announcements-feed-admin.html.twig Template file for the theming of announcement_feed admin page.
announcements-feed-admin.html.twig core/modules/announcements_feed/templates/announcements-feed-admin.html.twig Template file for the theming of announcement_feed admin page.
announcements-feed.html.twig core/themes/stable9/templates/announcements_feed/announcements-feed.html.twig Template file for the theming of announcement_feed off-canvas dialog.
announcements-feed.html.twig core/modules/announcements_feed/templates/announcements-feed.html.twig Template file for the theming of announcement_feed off-canvas dialog.
authorize-report.html.twig core/modules/system/templates/authorize-report.html.twig Default theme implementation for authorize.php operation report templates.
block--navigation.html.twig core/modules/navigation/templates/block--navigation.html.twig Default theme implementation to display a navigation_block.
block--page-title-block.html.twig core/themes/olivero/templates/block/block--page-title-block.html.twig Olivero's implementation to display a block.
block--search-form-block.html.twig core/themes/olivero/templates/block/block--search-form-block.html.twig Olivero's theme implementation for a search form block.
block--secondary-menu--plugin-id--search-form-block.html.twig core/themes/olivero/templates/block/block--secondary-menu--plugin-id--search-form-block.html.twig Theme implementation for a search form block in the Secondary Menu region.
block--system-branding-block.html.twig core/modules/system/templates/block--system-branding-block.html.twig Default theme implementation for a branding block.
block--system-menu-block.html.twig core/modules/system/templates/block--system-menu-block.html.twig Default theme implementation for a menu block.
block--system-messages-block.html.twig core/modules/system/templates/block--system-messages-block.html.twig Default theme implementation for the messages block.
block-content-add-list.html.twig core/modules/block_content/templates/block-content-add-list.html.twig Default theme implementation to present a list of block types.
block.html.twig core/themes/olivero/templates/block/block.html.twig Olivero's implementation to display a block.
block.html.twig core/modules/block/templates/block.html.twig Default theme implementation to display a block.
book-all-books-block.html.twig core/modules/book/templates/book-all-books-block.html.twig Default theme implementation for rendering book outlines within a block.
book-export-html.html.twig core/modules/book/templates/book-export-html.html.twig Default theme implementation for printed version of book outline.
book-navigation.html.twig core/modules/book/templates/book-navigation.html.twig Default theme implementation to navigate books.
book-node-export-html.html.twig core/modules/book/templates/book-node-export-html.html.twig Default theme implementation for a single node in a printer-friendly outline.
book-tree.html.twig core/modules/book/templates/book-tree.html.twig Default theme implementation to display a book tree.
breadcrumb.html.twig core/modules/system/templates/breadcrumb.html.twig Default theme implementation for a breadcrumb trail.
checkboxes.html.twig core/modules/system/templates/checkboxes.html.twig Default theme implementation for a 'checkboxes' #type form element.
comment.html.twig core/modules/comment/templates/comment.html.twig Default theme implementation for comments.
common-test-foo.html.twig core/modules/system/tests/modules/common_test/templates/common-test-foo.html.twig Default theme implementation for the common test foo.
common-test-render-element.html.twig core/modules/system/tests/modules/common_test/templates/common-test-render-element.html.twig Default theme implementation for the common test render element.
config_translation_manage_form_element.html.twig core/modules/config_translation/templates/config_translation_manage_form_element.html.twig Default theme implementation for a form element in config_translation.
confirm-form.html.twig core/modules/system/templates/confirm-form.html.twig Default theme implementation for confirm form.
container--media-library-content.html.twig core/profiles/demo_umami/themes/umami/templates/classy/media-library/container--media-library-content.html.twig Theme implementation the content area of the modal media library dialog.
container--media-library-content.html.twig core/themes/claro/templates/classy/media-library/container--media-library-content.html.twig Theme implementation the content area of the modal media library dialog.
container--media-library-widget-selection.html.twig core/profiles/demo_umami/themes/umami/templates/classy/media-library/container--media-library-widget-selection.html.twig Theme implementation of a wrapper for selected media items.
container--media-library-widget-selection.html.twig core/themes/claro/templates/classy/media-library/container--media-library-widget-selection.html.twig Theme implementation of a wrapper for selected media items.
container--text-format-filter-guidelines.html.twig core/profiles/demo_umami/themes/umami/templates/components/text_format/container--text-format-filter-guidelines.html.twig Theme implementation for text filter guidelines.
container--text-format-filter-guidelines.html.twig core/themes/claro/templates/text_format/container--text-format-filter-guidelines.html.twig Theme implementation for text filter guidelines.
container--text-format-filter-help.html.twig core/profiles/demo_umami/themes/umami/templates/components/text_format/container--text-format-filter-help.html.twig Theme implementation for text filter help.
container--text-format-filter-help.html.twig core/themes/claro/templates/text_format/container--text-format-filter-help.html.twig Theme implementation for text filter help.
container--text-format-filter-wrapper.html.twig core/profiles/demo_umami/themes/umami/templates/components/text_format/container--text-format-filter-wrapper.html.twig Theme implementation for the text filter wrapper.
container--text-format-filter-wrapper.html.twig core/themes/claro/templates/text_format/container--text-format-filter-wrapper.html.twig Theme implementation for the text filter wrapper.
container.html.twig core/modules/system/templates/container.html.twig Default theme implementation of a container used to wrap child elements.
datetime-form.html.twig core/modules/system/templates/datetime-form.html.twig Default theme implementation of a datetime form element.
datetime-wrapper.html.twig core/modules/system/templates/datetime-wrapper.html.twig Default theme implementation of a datetime form wrapper.
details.html.twig core/modules/system/templates/details.html.twig Default theme implementation for a details element.
dropbutton-wrapper.html.twig core/modules/system/templates/dropbutton-wrapper.html.twig Default theme implementation for a dropbutton wrapper.
entity-add-list.html.twig core/modules/system/templates/entity-add-list.html.twig Default theme implementation to present a list of available bundles.
entity-page-title.html.twig core/modules/system/templates/entity-page-title.html.twig Default theme implementation for entity page title.
feed-icon.html.twig core/modules/system/templates/feed-icon.html.twig Default theme implementation for a feed icon.
field--node--created.html.twig core/modules/node/templates/field--node--created.html.twig Default theme implementation for the node created field.
field--node--title.html.twig core/modules/node/templates/field--node--title.html.twig Default theme implementation for the node title field.
field--node--uid.html.twig core/modules/node/templates/field--node--uid.html.twig Default theme implementation for the node user field.
field--text.html.twig core/profiles/demo_umami/themes/umami/templates/classy/field/field--text.html.twig Default theme implementation for a text field.
field--text.html.twig core/themes/olivero/templates/field/field--text.html.twig Theme override for a text field.
field--text.html.twig core/themes/claro/templates/classy/field/field--text.html.twig Default theme implementation for a text field.
field--text.html.twig core/themes/starterkit_theme/templates/field/field--text.html.twig Default theme implementation for a text field.
field-multiple-value-form.html.twig core/themes/olivero/templates/form/field-multiple-value-form.html.twig Theme override for an individual form element.
field-multiple-value-form.html.twig core/modules/system/templates/field-multiple-value-form.html.twig Default theme implementation for an individual form element.
field-ui-table.html.twig core/modules/field_ui/templates/field-ui-table.html.twig Default theme implementation to display a Field UI table.
field.html.twig core/modules/system/templates/field.html.twig Default theme implementation for a field.
fieldset.html.twig core/modules/system/templates/fieldset.html.twig Default theme implementation for a fieldset element and its children.
file-audio.html.twig core/profiles/demo_umami/themes/umami/templates/classy/field/file-audio.html.twig Default theme implementation to display the file entity as an audio tag.
file-audio.html.twig core/themes/claro/templates/classy/field/file-audio.html.twig Default theme implementation to display the file entity as an audio tag.
file-audio.html.twig core/themes/starterkit_theme/templates/field/file-audio.html.twig Default theme implementation to display the file entity as an audio tag.
file-audio.html.twig core/modules/file/templates/file-audio.html.twig Default theme implementation to display the file entity as an audio tag.
file-link.html.twig core/modules/file/templates/file-link.html.twig Default theme implementation for a link to a file.
file-managed-file.html.twig core/modules/file/templates/file-managed-file.html.twig Default theme implementation to display a file form widget.
file-upload-help.html.twig core/modules/file/templates/file-upload-help.html.twig Default theme implementation to display help text for file fields.
file-video.html.twig core/profiles/demo_umami/themes/umami/templates/classy/field/file-video.html.twig Default theme implementation to display the file entity as a video tag.
file-video.html.twig core/themes/claro/templates/classy/field/file-video.html.twig Default theme implementation to display the file entity as a video tag.
file-video.html.twig core/themes/starterkit_theme/templates/field/file-video.html.twig Default theme implementation to display the file entity as a video tag.
file-video.html.twig core/modules/file/templates/file-video.html.twig Default theme implementation to display the file entity as a video tag.
file-widget-multiple.html.twig core/modules/file/templates/file-widget-multiple.html.twig Default theme implementation to display a multi file form widget.
filter-guidelines.html.twig core/modules/filter/templates/filter-guidelines.html.twig Default theme implementation for guidelines for a text format.
filter-tips.html.twig core/modules/filter/templates/filter-tips.html.twig Default theme implementation for a set of filter tips.
form-element--new-storage-type.html.twig core/themes/stable9/templates/admin/form-element--new-storage-type.html.twig Theme override for a storage type option form element.
form-element--new-storage-type.html.twig core/modules/field_ui/templates/form-element--new-storage-type.html.twig Default theme implementation for a storage type option form element.
form-element-label.html.twig core/modules/system/templates/form-element-label.html.twig Default theme implementation for a form element label.
form-element.html.twig core/modules/system/templates/form-element.html.twig Default theme implementation for a form element.
form.html.twig core/modules/system/templates/form.html.twig Default theme implementation for a 'form' element.
forum-icon.html.twig core/modules/forum/templates/forum-icon.html.twig Default theme implementation to display a status icon for a forum post.
forum-list.html.twig core/modules/forum/templates/forum-list.html.twig Default theme implementation to display a list of forums and containers.
forum-submitted.html.twig core/modules/forum/templates/forum-submitted.html.twig Default theme implementation for a forum post submission string.
forum-topic.html.twig core/themes/stable9/templates/dataset/forum-topic.html.twig Default theme implementation to display a forum topic.
forum-topic.html.twig core/modules/forum/templates/forum-topic.html.twig Default theme implementation to display a forum topic.
forums.html.twig core/modules/forum/templates/forums.html.twig Default theme implementation to display a forum.
help-section.html.twig core/modules/help/templates/help-section.html.twig Default theme implementation for a section of the help page.
help-topic.html.twig core/modules/help_topics/templates/help-topic.html.twig Default theme implementation to display a help topic.
help-topic.html.twig core/modules/help/templates/help-topic.html.twig Default theme implementation to display a help topic.
html.html.twig core/modules/system/templates/html.html.twig Default theme implementation for the basic structure of a single Drupal page.
image-anchor.html.twig core/modules/image/templates/image-anchor.html.twig Default theme implementation for a 3x3 grid of checkboxes for image anchors.
image-crop-summary.html.twig core/modules/image/templates/image-crop-summary.html.twig Default theme implementation for a summary of an image crop effect.
image-formatter.html.twig core/modules/image/templates/image-formatter.html.twig Default theme implementation to display a formatted image field.
image-resize-summary.html.twig core/modules/image/templates/image-resize-summary.html.twig Default theme implementation for a summary of an image resize effect.
image-rotate-summary.html.twig core/modules/image/templates/image-rotate-summary.html.twig Default theme implementation for a summary of an image rotate effect.
image-scale-and-crop-summary.html.twig core/modules/image/templates/image-scale-and-crop-summary.html.twig Default theme implementation for a summary of an image scale and crop effect.
image-scale-summary.html.twig core/modules/image/templates/image-scale-summary.html.twig Default theme implementation for a summary of an image scale effect.
image-style-preview.html.twig core/modules/image/templates/image-style-preview.html.twig Default theme implementation to display a preview of an image style.
image-style.html.twig core/modules/image/templates/image-style.html.twig Default theme implementation for an image using a specific image style.
image-widget.html.twig core/modules/image/templates/image-widget.html.twig Default theme implementation for an image field widget.
image.html.twig core/modules/system/templates/image.html.twig Default theme implementation of an image.
indentation.html.twig core/modules/system/templates/indentation.html.twig Default theme implementation for a set of indentation divs.
input.html.twig core/modules/system/templates/input.html.twig Default theme implementation for an 'input' #type form element.
install-page.html.twig core/modules/system/templates/install-page.html.twig Default theme implementation to display a Drupal installation page.
item-list.html.twig core/modules/system/templates/item-list.html.twig Default theme implementation for an item list.
language-content-settings-table.html.twig core/modules/language/templates/language-content-settings-table.html.twig Default theme implementation to display a language content settings table.
language-negotiation-configure-form.html.twig core/modules/language/templates/language-negotiation-configure-form.html.twig Default theme implementation for a language negotiation configuration form.
layout--fourcol-section.html.twig core/modules/layout_builder/layouts/fourcol_section/layout--fourcol-section.html.twig Default theme implementation for a four-column 25%-25%-25%-25% layout.
layout--onecol.html.twig core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig Default theme implementation to display a one-column layout.
layout--oneplusfourgrid-section.html.twig core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/layout--oneplusfourgrid-section.html.twig Default theme implementation to display a one plus four grid layout.
layout--threecol-25-50-25.html.twig core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig Default theme implementation for a three column layout.
layout--threecol-33-34-33.html.twig core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig Default theme implementation for a three column layout.
layout--threecol-section.html.twig core/modules/layout_builder/layouts/threecol_section/layout--threecol-section.html.twig Default theme implementation for a three-column layout.
layout--twocol-bricks.html.twig core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig Default theme implementation for a two column layout.
layout--twocol-section.html.twig core/modules/layout_builder/layouts/twocol_section/layout--twocol-section.html.twig Default theme implementation to display a two-column layout.
layout--twocol.html.twig core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig Default theme implementation to display a two-column layout.
link-formatter-link-separate.html.twig core/modules/link/templates/link-formatter-link-separate.html.twig Default theme implementation of a link with separate title and URL elements.
links--node.html.twig core/profiles/demo_umami/themes/umami/templates/classy/content/links--node.html.twig Theme override to display node links.
links--node.html.twig core/themes/claro/templates/classy/content/links--node.html.twig Theme override to display node links.
links--node.html.twig core/themes/starterkit_theme/templates/content/links--node.html.twig Theme override to display node links.
links.html.twig core/modules/system/templates/links.html.twig Default theme implementation for a set of links.
locale-translation-last-check.html.twig core/modules/locale/templates/locale-translation-last-check.html.twig Default theme implementation for the last time we checked for update data.
locale-translation-update-info.html.twig core/modules/locale/templates/locale-translation-update-info.html.twig Default theme implementation for displaying translation status information.
maintenance-page.html.twig core/modules/system/templates/maintenance-page.html.twig Default theme implementation to display a single Drupal page while offline.
maintenance-task-list.html.twig core/modules/system/templates/maintenance-task-list.html.twig Default theme implementation for a list of maintenance tasks to perform.
mark.html.twig core/modules/system/templates/mark.html.twig Default theme implementation for a marker for new or updated content.
media--media-library.html.twig core/profiles/demo_umami/themes/umami/templates/classy/media-library/media--media-library.html.twig Theme override of a media item in the media library.
media--media-library.html.twig core/themes/claro/templates/media-library/media--media-library.html.twig Theme override of a media item in the media library.
media--media-library.html.twig core/modules/media_library/templates/media--media-library.html.twig Default theme implementation to present a media entity in the media library.
media--scale-crop-7-3-large.html.twig core/profiles/demo_umami/themes/umami/templates/content/media--scale-crop-7-3-large.html.twig Theme override to display a hero media item for the Umami theme.
media-embed-error.html.twig core/profiles/demo_umami/themes/umami/templates/classy/content/media-embed-error.html.twig Theme override for a missing media error.
media-embed-error.html.twig core/themes/claro/templates/classy/content/media-embed-error.html.twig Theme override for a missing media error.
media-embed-error.html.twig core/modules/media/templates/media-embed-error.html.twig Default theme implementation for a missing media error.
media-library-item--small.html.twig core/profiles/demo_umami/themes/umami/templates/classy/media-library/media-library-item--small.html.twig Default theme implementation of a media library item.
media-library-item--small.html.twig core/themes/claro/templates/classy/media-library/media-library-item--small.html.twig Default theme implementation of a media library item.
media-library-item.html.twig core/profiles/demo_umami/themes/umami/templates/classy/media-library/media-library-item.html.twig Default theme implementation of a media library item.
media-library-item.html.twig core/themes/claro/templates/classy/media-library/media-library-item.html.twig Default theme implementation of a media library item.
media-library-item.html.twig core/modules/media_library/templates/media-library-item.html.twig Default theme implementation of a media library item.
media-library-wrapper.html.twig core/profiles/demo_umami/themes/umami/templates/classy/media-library/media-library-wrapper.html.twig Theme override of a container used to wrap the media library's modal dialog
interface.
media-library-wrapper.html.twig core/themes/claro/templates/classy/media-library/media-library-wrapper.html.twig Theme override of a container used to wrap the media library's modal dialog
interface.
media-library-wrapper.html.twig core/modules/media_library/templates/media-library-wrapper.html.twig Default theme implementation of a container used to wrap the media library's
modal dialog interface.
media-oembed-iframe.html.twig core/modules/media/templates/media-oembed-iframe.html.twig Default theme implementation to display an oEmbed resource in an iframe.
media.html.twig core/profiles/demo_umami/themes/umami/templates/classy/content/media.html.twig Theme override to display a media item.
media.html.twig core/themes/olivero/templates/content/media.html.twig Theme override to display a media item.
media.html.twig core/themes/claro/templates/classy/content/media.html.twig Theme override to display a media item.
media.html.twig core/themes/starterkit_theme/templates/content/media.html.twig Theme override to display a media item.
media.html.twig core/modules/media/templates/media.html.twig Default theme implementation to present a media item.
menu--primary-menu.html.twig core/themes/olivero/templates/navigation/menu--primary-menu.html.twig Olivero's theme implementation for the menus in the primary_menu region.
menu--secondary-menu.html.twig core/themes/olivero/templates/navigation/menu--secondary-menu.html.twig Olivero's theme implementation for the menus in the secondary_menu region.
menu--toolbar.html.twig core/modules/toolbar/templates/menu--toolbar.html.twig Default theme implementation to display a toolbar menu.
menu-link-form.html.twig core/modules/menu_ui/templates/menu-link-form.html.twig Default theme implementation for menu_link_form.
menu-local-action.html.twig core/themes/olivero/templates/menu-local-action.html.twig Theme override for a single local action link.
menu-local-action.html.twig core/modules/system/templates/menu-local-action.html.twig Default theme implementation for a single local action link.
menu-local-task.html.twig core/modules/system/templates/menu-local-task.html.twig Default theme implementation for a local task link.
menu-local-tasks.html.twig core/themes/olivero/templates/navigation/menu-local-tasks.html.twig Olivero theme implementation to display primary and secondary local tasks.
menu-local-tasks.html.twig core/themes/claro/templates/menu-local-tasks.html.twig Claro theme implementation to display primary and secondary local tasks.
menu-local-tasks.html.twig core/modules/system/templates/menu-local-tasks.html.twig Default theme implementation to display primary and secondary local tasks.
menu-region--footer.html.twig core/modules/navigation/templates/menu-region--footer.html.twig Default theme implementation to display the navigation footer menu.
menu.html.twig core/themes/olivero/templates/navigation/menu.html.twig Olivero's theme implementation for the main menu.
menu.html.twig core/modules/system/templates/menu.html.twig Default theme implementation to display a menu.
navigation.html.twig core/modules/navigation/layouts/navigation.html.twig Default theme implementation to display a navigation layout.
node-add-list.html.twig core/modules/node/templates/node-add-list.html.twig Default theme implementation to list node types available for adding content.
node-edit-form.html.twig core/modules/node/templates/node-edit-form.html.twig Default theme implementation for a node edit form.
node.html.twig core/modules/node/templates/node.html.twig Default theme implementation to display a node.
off-canvas-page-wrapper.html.twig core/themes/claro/templates/off-canvas-page-wrapper.html.twig Default theme implementation for a page wrapper.
off-canvas-page-wrapper.html.twig core/modules/system/templates/off-canvas-page-wrapper.html.twig Default theme implementation for a page wrapper.
page-title.html.twig core/modules/system/templates/page-title.html.twig Default theme implementation for page titles.
page.html.twig core/modules/system/templates/page.html.twig Default theme implementation to display a single page.
pager.html.twig core/modules/system/templates/pager.html.twig Default theme implementation to display a pager.
progress-bar.html.twig core/modules/system/templates/progress-bar.html.twig Default theme implementation for a progress bar.
radios.html.twig core/modules/system/templates/radios.html.twig Default theme implementation for a 'radios' #type form element.
region.html.twig core/modules/system/templates/region.html.twig Default theme implementation to display a region.
responsive-image-formatter.html.twig core/modules/responsive_image/templates/responsive-image-formatter.html.twig Default theme implementation to display a formatted responsive image field.
responsive-image.html.twig core/modules/responsive_image/templates/responsive-image.html.twig Default theme implementation of a responsive image.
search-result.html.twig core/modules/search/templates/search-result.html.twig Default theme implementation for displaying a single search result.
select.html.twig core/modules/system/templates/select.html.twig Default theme implementation for a select element.
status-messages.html.twig core/modules/system/templates/status-messages.html.twig Default theme implementation for status messages.
status-report-counter.html.twig core/themes/claro/templates/status-report-counter.html.twig Theme override for status report counter.
status-report-counter.html.twig core/modules/system/templates/status-report-counter.html.twig Default theme implementation for the status report counter.
status-report.html.twig core/modules/system/templates/status-report.html.twig Default theme implementation for the status report.
system-admin-index.html.twig core/modules/system/templates/system-admin-index.html.twig Default theme implementation for the admin index page.
system-config-form.html.twig core/modules/system/templates/system-config-form.html.twig Default theme implementation for a system settings form.
system-modules-details.html.twig core/themes/claro/templates/admin/system-modules-details.html.twig Default theme implementation for the modules listing page.
system-modules-details.html.twig core/modules/system/templates/system-modules-details.html.twig Default theme implementation for the modules listing page.
system-modules-uninstall.html.twig core/modules/system/templates/system-modules-uninstall.html.twig Default theme implementation for the modules uninstall page.
system-security-advisories-fetch-error-message.html.twig core/themes/stable9/templates/admin/system-security-advisories-fetch-error-message.html.twig Theme override for the message when fetching security advisories fails.
system-security-advisories-fetch-error-message.html.twig core/modules/system/templates/system-security-advisories-fetch-error-message.html.twig Default theme implementation for the message when fetching security advisories fails.
system-themes-page.html.twig core/modules/system/templates/system-themes-page.html.twig Default theme implementation for the Appearance page.
table.html.twig core/modules/system/templates/table.html.twig Default theme implementation to display a table.
tablesort-indicator.html.twig core/modules/system/templates/tablesort-indicator.html.twig Default theme implementation for displaying a tablesort indicator.
taxonomy-term.html.twig core/modules/taxonomy/templates/taxonomy-term.html.twig Default theme implementation to display a taxonomy term.
text-format-wrapper.html.twig core/modules/filter/templates/text-format-wrapper.html.twig Default theme implementation for a text format-enabled form element.
textarea.html.twig core/modules/system/templates/textarea.html.twig Default theme implementation for a 'textarea' #type form element.
toolbar.html.twig core/modules/toolbar/templates/toolbar.html.twig Default theme implementation for the administrative toolbar.
top-bar.html.twig core/modules/navigation/templates/top-bar.html.twig Default theme implementation for the navigation top bar.
update-fetch-error-message.html.twig core/themes/stable9/templates/admin/update-fetch-error-message.html.twig Default theme implementation for the message when fetching data fails.
update-fetch-error-message.html.twig core/modules/update/templates/update-fetch-error-message.html.twig Default theme implementation for the message when fetching data fails.
update-last-check.html.twig core/modules/update/templates/update-last-check.html.twig Default theme implementation for the last time update data was checked.
update-project-status.html.twig core/modules/update/templates/update-project-status.html.twig Default theme implementation for the project status report.
update-report.html.twig core/modules/update/templates/update-report.html.twig Default theme implementation for the project status report.
update-version.html.twig core/modules/update/templates/update-version.html.twig Default theme implementation for the version display of a project.
user--compact.html.twig core/themes/olivero/templates/user/user--compact.html.twig Theme override to present all user data.
user.html.twig core/modules/user/templates/user.html.twig Default theme implementation to present all user data.
username.html.twig core/themes/olivero/templates/user/username.html.twig Theme override for displaying a username.
username.html.twig core/modules/user/templates/username.html.twig Default theme implementation for displaying a username.
vertical-tabs.html.twig core/modules/system/templates/vertical-tabs.html.twig Default theme implementation for vertical tabs.
views-exposed-form.html.twig core/modules/views/templates/views-exposed-form.html.twig Default theme implementation of a views exposed form.
views-mini-pager.html.twig core/modules/views/templates/views-mini-pager.html.twig Default theme implementation for a views mini-pager.
views-ui-build-group-filter-form.html.twig core/themes/claro/templates/views/views-ui-build-group-filter-form.html.twig Theme override for Views UI build group filter form.
views-ui-build-group-filter-form.html.twig core/modules/views_ui/templates/views-ui-build-group-filter-form.html.twig Default theme implementation for Views UI build group filter form.
views-ui-container.html.twig core/modules/views_ui/templates/views-ui-container.html.twig Default theme implementation for a generic views UI container/wrapper.
views-ui-display-tab-bucket.html.twig core/themes/claro/templates/views/views-ui-display-tab-bucket.html.twig Theme override for each "box" on the display query edit screen.
views-ui-display-tab-bucket.html.twig core/modules/views_ui/templates/views-ui-display-tab-bucket.html.twig Default theme implementation for each "box" on the display query edit screen.
views-ui-display-tab-setting.html.twig core/themes/claro/templates/views/views-ui-display-tab-setting.html.twig Theme override for Views UI display tab settings.
views-ui-display-tab-setting.html.twig core/modules/views_ui/templates/views-ui-display-tab-setting.html.twig Default theme implementation for Views UI display tab settings.
views-ui-expose-filter-form.html.twig core/themes/claro/templates/views/views-ui-expose-filter-form.html.twig Theme override for exposed filter form.
views-ui-expose-filter-form.html.twig core/modules/views_ui/templates/views-ui-expose-filter-form.html.twig Default theme implementation for exposed filter form.
views-ui-rearrange-filter-form.html.twig core/modules/views_ui/templates/views-ui-rearrange-filter-form.html.twig Default theme implementation for Views UI rearrange filter form.
views-ui-style-plugin-table.html.twig core/modules/views_ui/templates/views-ui-style-plugin-table.html.twig Default template for the settings of a table style views display.
views-ui-view-displays-list.html.twig core/modules/views_ui/templates/views-ui-view-displays-list.html.twig Default theme implementation for views displays on the views listing page.
views-ui-view-info.html.twig core/modules/views_ui/templates/views-ui-view-info.html.twig Default theme implementation for basic administrative info about a View.
views-ui-view-preview-section--exposed.html.twig core/themes/claro/templates/views/views-ui-view-preview-section--exposed.html.twig Theme override for a views UI preview section.
views-ui-view-preview-section.html.twig core/modules/views_ui/templates/views-ui-view-preview-section.html.twig Default theme implementation for a views UI preview section.
views-ui-views-listing-table.html.twig core/modules/views_ui/templates/views-ui-views-listing-table.html.twig Default theme implementation for views listing table.
views-view--frontpage.html.twig core/themes/olivero/templates/views/views-view--frontpage.html.twig Theme override for the frontpage view template.
views-view--frontpage.html.twig core/modules/views/tests/modules/views_test_data/templates/views-view--frontpage.html.twig Default theme implementation for the frontpage view template.
views-view-field.html.twig core/modules/views/templates/views-view-field.html.twig Default theme implementation for a single field in a view.
views-view-fields.html.twig core/modules/views/templates/views-view-fields.html.twig Default view template to display all the fields in a row.
views-view-grid-responsive.html.twig core/modules/views/templates/views-view-grid-responsive.html.twig Default theme implementation for views to display rows in a responsive grid.
views-view-grid.html.twig core/modules/views/templates/views-view-grid.html.twig Default theme implementation for views to display rows in a grid.
views-view-grouping.html.twig core/modules/views/templates/views-view-grouping.html.twig Default theme implementation to display a single views grouping.
views-view-list.html.twig core/modules/views/templates/views-view-list.html.twig Default theme implementation for a view template to display a list of rows.
views-view-mapping-test.html.twig core/modules/views/tests/modules/views_test_data/templates/views-view-mapping-test.html.twig Default theme implementation to display a view of mapping_test rows.
views-view-mapping-test.html.twig core/modules/views/templates/views-view-mapping-test.html.twig Default theme implementation for testing the mapping row style.
views-view-opml.html.twig core/modules/views/templates/views-view-opml.html.twig Default template for feed displays that use the OPML style.
views-view-row-opml.html.twig core/modules/views/templates/views-view-row-opml.html.twig Default theme implementation to display an item in a views OPML feed.
views-view-row-rss.html.twig core/profiles/demo_umami/themes/umami/templates/classy/views/views-view-row-rss.html.twig Theme override to display an item in a views RSS feed.
views-view-row-rss.html.twig core/themes/claro/templates/classy/views/views-view-row-rss.html.twig Theme override to display an item in a views RSS feed.
views-view-row-rss.html.twig core/modules/views/templates/views-view-row-rss.html.twig Default theme implementation to display an item in a views RSS feed.
views-view-rss.html.twig core/modules/views/templates/views-view-rss.html.twig Default template for feed displays that use the RSS style.
views-view-summary-unformatted.html.twig core/modules/views/templates/views-view-summary-unformatted.html.twig Default theme implementation for unformatted summary links.
views-view-summary.html.twig core/modules/views/templates/views-view-summary.html.twig Default theme implementation to display a list of summary lines.
views-view-table.html.twig core/themes/olivero/templates/views/views-view-table.html.twig Theme override for implementation of displaying a view as a table.
views-view-table.html.twig core/modules/views/templates/views-view-table.html.twig Default theme implementation for displaying a view as a table.
views-view-unformatted.html.twig core/modules/views/templates/views-view-unformatted.html.twig Default theme implementation to display a view of unformatted rows.
views-view.html.twig core/modules/views/templates/views-view.html.twig Default theme implementation for main view template.

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.