{# Heading -- This macro is designed for building the different components contained within heading group at the top of the main area. This includes the primary heading, page actions, secondary heading, and tabs. By default all data required to render out the different components of the heading group should be obtained from `decor`, however if you need to, it is possible to overide each part in your local template. The heading component can be called like so: -------------------------------------------------------------------------------- {%- import "macros/heading.html" as _heading -%} {% block heading %} {{ _heading.heading( primary=_heading.primary(primary_heading), secondary=_heading.secondary(secondary_heading), actions=_heading.actions(decor.actions), tabs=_heading.tabs(decor.tabs) ) }} {%- endblock %} -------------------------------------------------------------------------------- The primary heading and secondary heading can both be ovewritten easily. If you simply want to replace the text displayed and nothing else in the heading component, the best way to do so is to simply set `primary_heading` or `secondary_heading` in your local template like so: -------------------------------------------------------------------------------- {% set primary_heading = 'My heading' %} {% set secondary_heading = 'My sub heading' %} -------------------------------------------------------------------------------- If you need to overide anything else in the heading component, then you will need to overide the whole component and pass it new macros where applicable. It is also possible to use the `heading` macro in other places in the admin UI. For example, if you want to add a heading to a box macro you can. This gives you the option to add a headings, actions, or tabs local to a specific area of the page. -------------------------------------------------------------------------------- {{ _heading.heading(primary=_heading.primary(text='My heading')) }} -------------------------------------------------------------------------------- #} {# Primary heading -- A macro for building the main heading for the page, positioned to the left of page actions at the top of the page. The macro must be passed `text`. By default, the text should be obtained from `decor.title`, however if you want to simply replace the text shown in the heading, you can do so by either overwriting the `primary_heading` variable in your local template or by overwriting the heading macro and passing it new text using the existing `_heading.primary` macro like so: -------------------------------------------------------------------------------- {% set primary_heading = 'My heading' %} -------------------------------------------------------------------------------- {% block heading %} {{ _heading.heading( primary=_heading.primary('My heading'), secondary=_heading.secondary(secondary_heading), actions=_heading.actions(decor.actions), tabs=_heading.tabs(decor.tabs) ) }} {%- endblock %} -------------------------------------------------------------------------------- Alternatively, if you want to overide the entire primary heading element you can send the heading macro an entirely new macro for it to use like so: -------------------------------------------------------------------------------- {% block heading %} {% macro heading_primary() -%} ... {%- endmacro %} {{ _heading.heading( primary=heading_primary(), secondary=_heading.secondary(secondary_heading), actions=_heading.actions(decor.actions), tabs=_heading.tabs(decor.tabs) ) }} {%- endblock %} -------------------------------------------------------------------------------- As standard you can also pass `class` to apply a custom class style to the heading element. You can also pass `type` to set the heading type that you want to use. This can be `h1`, `h2`, or `h3`. -------------------------------------------------------------------------------- #} {% macro primary(text, type='h1', class=None) -%} {% set type = type if type in ['h1', 'h2', 'h3'] else 'h1' %} <{{ type }} class="mh-heading__primary{{ ' ' + class if class }}"> {{- text -}} {{ type }}> {%- endmacro %} {# Secondary heading -- A macro for building the sub heading of the page, positioned under the primary heading and page actions. The macro must be passed `text`. By default, the text should be obtained from `decor.sub_heading`, however if you want to simply replace the text shown in the heading, you can do so by either overwriting the `secondary_heading` variable in your local template or by overwriting the heading macro and passing it new text using the existing `_heading.secondary` macro like so: -------------------------------------------------------------------------------- {% set secondary_heading = 'My heading' %} -------------------------------------------------------------------------------- {% block heading %} {{ _heading.heading( primary=_heading.primary(primary_heading), secondary=_heading.secondary('My sub heading'), actions=_heading.actions(decor.actions), tabs=_heading.tabs(decor.tabs) ) }} {%- endblock %} -------------------------------------------------------------------------------- Alternatively, if you want to overide the entire secondary heading element you can send the heading macro an entirely new macro for it to use like so: -------------------------------------------------------------------------------- {% block heading %} {% macro secondary_heading() -%} ... {%- endmacro %} {{ _heading.heading( primary=_heading.primary(primary_heading), secondary=secondary_heading(), actions=_heading.actions(decor.actions), tabs=_heading.tabs(decor.tabs) ) }} {%- endblock %} -------------------------------------------------------------------------------- As standard you can also pass `class` to apply a custom class style to the heading element. You can also pass `type` to set the heading type that you want to use. This can be `h2` or `h3`. -------------------------------------------------------------------------------- #} {% macro secondary(text, type='h2', class=None) -%} {% set type = type if type in ['h2', 'h3'] else 'h2' %} <{{ type }} class="mh-heading__secondary{{ ' ' + class if class }}"> {{- text -}} {{ type }}> {%- endmacro %} {# Actions -- A macro used to show actions relating to the current page. Actions are positioned in the top right hand side of the page on desktop, and pinned to the bottom of the screen on mobile. On desktop, by default, we limit the number of visible macros initially shown on the page to 3. This is due to limited screen space alongside the primary heading. However, if more than 3 actions are provided, the other actions will appear in a dropdown list next to the first 3. This default number of `visible_actions` can be set in the `_settings.scss` file. By default, the list actions should be obtained from `decor`, however if you want to overide them, you can do so by sending a new macro through as the `list` parameter like so: -------------------------------------------------------------------------------- {% block heading %} {% macro actions_list() -%} {{ _heading.action('Action 1', url='/some-url-1') }} {{ _heading.action('Action 2', url='/some-url-2') }} {{ _heading.action('Action 3') }} ... {%- endmacro %} {{ _heading.heading( primary=_heading.primary(primary_heading), secondary=heading.secondary(secondary_heading), actions=_heading.actions(actions_list()), tabs=_heading.tabs(decor.tabs) ) }} {%- endblock %} -------------------------------------------------------------------------------- As standard you can also pass `class` to apply a custom class style to the containing element. -------------------------------------------------------------------------------- #} {% macro actions(list=None, class=None) -%} {% if list and (list.children or list is string) %}