<div class="c-subheader u-relative">
<div class="o-container u-flex u-column u-row@md u-items-center@md ">
<div class="c-subheader__head u-py-small u-flex u-row u-items-center u-items-center u-justify-between">
<a href="#" class="o-link-text u-m-none u-size-fit u-contents">
<img decoding="async" referrerpolicy="no-referrer" src="https://citynews.stgy.ovh/~shared/images/v7/channel-custom/vision-logo.svg" class="c-subheader__logo" height="40">
</a>
</div>
<nav class="c-subheader__navbar u-flex u-items-center u-overflow-auto u-gap-medium">
<a href="#" class="c-subheader__item u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
Televisione
</a>
<a href="#" class="c-subheader__item c-subheader__item--active u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
Streaming
</a>
<a href="#" class="c-subheader__item u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
Cinema
</a>
</nav>
</div>
<nav class="c-subheader__subnavbar">
<div class="o-container u-flex u-items-center u-overflow-auto u-gap-small">
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Netflix
</a>
<a href="#" class="c-subheader__item c-subheader__item--active u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Prime
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Disney+
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Sky
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Apple
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Migliori SerieTv
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Al Cinema
</a>
<a href="#" class="c-subheader__item u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
Programmi TV
</a>
</nav>
</div>
</div>
<div class="c-subheader {% if sticky %} u-sticky u-top u-z-cover {% endif %} {% if modifier %} c-subheader--branded {% endif %} u-relative" >
<div class="{% if not wide %}o-container{% else %}u-px-large{% endif %} u-flex {% if not modifier %}u-column u-row@md u-items-center@md {% elif modifier=="sponsor" or modifier %} u-items-center{% endif %} ">
{% if logo %}
<div class="c-subheader__head u-py-small u-flex u-row u-items-center u-items-center u-justify-between">
<a href="#" class="o-link-text u-m-none u-size-fit u-contents">
{% if dossier %}
<svg xmlns="http://www.w3.org/2000/svg" class="c-dossier-logo" fill="none" viewBox="0 0 111 24">
<path fill="currentColor" d="M85.4 4a.3.3 0 0 1-.3-.3V.3a.3.3 0 0 1 .3-.3h7.3a.3.3 0 0 1 .4.3v3.4a.3.3 0 0 1-.4.3h-7.3ZM.4 24a.3.3 0 0 1-.4-.4V.3A.3.3 0 0 1 .4 0H4a.3.3 0 0 1 .4.3v23.4a.3.3 0 0 1-.4.3H.4ZM12.6 1.7a5.5 5.5 0 0 1 2 4v12.5c0 3.2-3 5.8-6.6 5.8H6.6a.3.3 0 0 1-.3-.3v-3.4a.3.3 0 0 1 .3-.3H8a2 2 0 0 0 2-1.8V5.8A2 2 0 0 0 8 4H6.6a.3.3 0 0 1-.3-.3V.3a.3.3 0 0 1 .3-.3H8a7 7 0 0 1 4.6 1.7M24 .1a.3.3 0 0 1 .1.3v3.4a.3.3 0 0 1-.2.3A2 2 0 0 0 22.3 6v12a2 2 0 0 0 1.6 1.9.3.3 0 0 1 .2.3v3.4a.3.3 0 0 1 0 .2.4.4 0 0 1-.4.1c-3.3-.4-5.9-2.9-5.9-5.9V6c.1-3 2.6-5.6 6-6l.2.1ZM32.3 6v12c0 3-2.6 5.5-6 6a.4.4 0 0 1-.2-.2.3.3 0 0 1-.1-.2v-3.4a.3.3 0 0 1 .2-.3 2 2 0 0 0 1.6-1.9V6a2 2 0 0 0-1.6-2 .3.3 0 0 1-.2-.3V.4a.3.3 0 0 1 0-.3h.4C29.7.4 32.3 3 32.3 6Zm9.3 14.2v3.4a.3.3 0 0 1-.1.2l-.3.1c-3.4-.4-6-3-6-6v-1.8a.3.3 0 0 1 .2-.2h4.1a.3.3 0 0 1 .3.2v1.8a2.2 2.2 0 0 0 1.5 2 .3.3 0 0 1 .3.3M41.5.1a.3.3 0 0 1 0 .3v3.4a.3.3 0 0 1-.1.3 2 2 0 0 0-1.6 2v1.1a2.3 2.3 0 0 0 1.5 2.1l.1.1a.3.3 0 0 1 .2.3v3.8a.3.3 0 0 1-.2.3.4.4 0 0 1-.3 0l-2-1a6.3 6.3 0 0 1-3.8-5.6v-1c0-3 2.5-5.7 5.9-6.1h.3ZM49.7 6v1.7a.3.3 0 0 1-.2.3h-4a.3.3 0 0 1-.3-.3V6.1a2.2 2.2 0 0 0-1.6-2 .3.3 0 0 1-.2-.3V.4a.3.3 0 0 1 0-.3.4.4 0 0 1 .4 0c3.4.4 6 3 6 6m-.1 10.7v1c0 3-2.6 5.7-6 6.1a.4.4 0 0 1-.2 0 .3.3 0 0 1-.1-.3v-3.4a.3.3 0 0 1 .2-.3 2 2 0 0 0 1.6-2v-1.1a2.4 2.4 0 0 0-1.5-2.2h-.1a.3.3 0 0 1-.2-.3v-3.8a.3.3 0 0 1 .2-.3.4.4 0 0 1 .3 0l2 .9a6.3 6.3 0 0 1 3.9 5.7m8.9 3.4v3.4a.3.3 0 0 1 0 .2l-.4.1c-3.4-.4-6-3-6-6v-1.8a.3.3 0 0 1 .4-.3h4a.3.3 0 0 1 .2.3v1.8a2.2 2.2 0 0 0 1.6 2 .3.3 0 0 1 .2.3M58.6.1a.3.3 0 0 1 .1.3v3.4a.3.3 0 0 1-.2.3 2 2 0 0 0-1.6 2v1.1a2.4 2.4 0 0 0 1.5 2.1l.1.1a.3.3 0 0 1 .2.3v3.8a.3.3 0 0 1-.1.3.4.4 0 0 1-.4 0l-1.9-1a6.3 6.3 0 0 1-3.9-5.6v-1c0-3 2.6-5.7 6-6.1h.2ZM66.9 6v1.7a.3.3 0 0 1-.3.3h-4a.3.3 0 0 1-.3-.3V6.1a2.2 2.2 0 0 0-1.5-2 .3.3 0 0 1-.3-.3V.4a.3.3 0 0 1 .2-.3.4.4 0 0 1 .3 0c3.4.4 5.9 3 5.9 6m0 10.7v1c0 3-2.6 5.7-6 6.1a.4.4 0 0 1-.3 0 .3.3 0 0 1 0-.3v-3.4a.3.3 0 0 1 .2-.3 2 2 0 0 0 1.5-2v-1.1a2.4 2.4 0 0 0-1.4-2.2h-.2a.3.3 0 0 1-.2-.3v-3.8a.3.3 0 0 1 .2-.3.4.4 0 0 1 .4 0l1.9.9a6.3 6.3 0 0 1 3.9 5.7m3.7 7.2a.3.3 0 0 1-.4-.4V.3a.3.3 0 0 1 .4-.3h3.8a.3.3 0 0 1 .3.3v23.4a.3.3 0 0 1-.3.3h-3.8Zm8.5 0a.3.3 0 0 1-.3-.4V.3A.3.3 0 0 1 79 0h4a.3.3 0 0 1 .4.3v23.4a.3.3 0 0 1-.4.3h-3.8Zm6.3-10.2a.3.3 0 0 1-.3-.3v-3.3a.3.3 0 0 1 .3-.3h5.1a.3.3 0 0 1 .4.3v3.3a.3.3 0 0 1-.4.3h-5Zm0 10.2a.3.3 0 0 1-.3-.4v-3.3a.3.3 0 0 1 .3-.3h7.3a.3.3 0 0 1 .4.3v3.3a.3.3 0 0 1-.4.4h-7.3Zm15.1-24a.3.3 0 0 1 .1.3v23.4a.3.3 0 0 1-.3.2h-3.9a.3.3 0 0 1-.3-.2V.3a.3.3 0 0 1 .3-.3h4.1m10.1 23.8a.3.3 0 0 1-.3.2h-4.5a.3.3 0 0 1-.2-.2l-3.2-5v-4.6a.3.3 0 0 1 .3-.3h2a1.2 1.2 0 0 0 1.2-1.1V5a1.2 1.2 0 0 0-1.3-1.1h-1.8a.3.3 0 0 1-.4-.3V.3l.1-.2.3-.1h1.8c3.3 0 5.9 2.3 5.9 5.1v7.7a5.2 5.2 0 0 1-3.5 4.7.3.3 0 0 0 0 .3l3.6 5.8a.2.2 0 0 1 0 .2Z"/>
</svg>
{% elif cibo %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.4 50">
<path fill="#fff" d="M0 50V0h105.4v50Z"/>
<path d="M58.5 27.3h-3.9v9.3h4.1c2.8 0 4.1-1.6 4.1-4.6 0-3-1.7-4.7-4.3-4.7Zm27-14.1c-4 0-6 3-6 11.7s2 12 6 12 6.1-3 6.1-12-2-11.7-6-11.7Zm-23.8 4.1c0-2.5-1.3-4-3.7-4h-3.4v8h3.5c2 0 3.6-1.4 3.6-4Z" fill="#e31d57"/>
<path d="M0 0v50h105.4V0Zm19.8 36.8c3.2 0 4.5-2.1 5.4-5.3l6.7 1.9c-1.6 6.2-4.7 10.4-12.2 10.4-8.2 0-13.5-5.2-13.5-19S11.3 6.2 19.7 6.2c6.5 0 11 3 12.3 11.1l-6.7 1.8c-.5-2.5-1.5-6-5.5-6-4.2 0-6 3.6-6 11.5 0 9.1 2 12.2 6 12.2ZM42.7 43h-7.4V6.9h7.4ZM59 43H47.4V6.9h11.3c6.2 0 10 3.5 10 9.4 0 4.5-2.8 7-5.1 7.5v.2c3 .7 6.5 3 6.5 8.8C70.1 39.5 66.8 43 59 43Zm26.5.8c-8.5 0-13.6-5.4-13.6-19S77 6.3 85.5 6.3s13.7 5 13.7 18.7S94 43.8 85.5 43.8Z" fill="#e31d57"/>
</svg>
{% else %}
<img decoding="async" referrerpolicy="no-referrer" src="{{ logo }}" class="c-subheader__logo" height="40">
{% endif %}
</a>
{% if dossier %}
{% render "@button--dossier",{label:'Abbonati', size: 'small'},true %}
{% endif%}
{% if channetitle %}
<a class="c-header__channel o-link-inverse u-ml-xsmall" href="#">
{{ channetitle }}
</a>
{% endif %}
</div>
{% else%}
{% if title %}
<div class="c-subheader__head u-py-small u-flex {% if not modifier %} u-column u-row@md {% else %} u-row u-items-center {% endif %} {% if avatar %}u-items-center{% endif %}">
<h1 class="u-title-01 u-m-none">
<a href="#" class="u-no-underline c-subheader__title ">
{{ title }}
</a>
</h1>
</div>
{% endif %}
{% endif %}
{% if navigation and not modifier %}
<nav class="c-subheader__navbar u-flex u-items-center u-overflow-auto u-gap-medium">
{% for nav in navigation %}
<a href="#" class="c-subheader__item {% if nav.status=='active' %}c-subheader__item--active{% endif %} u-nav-02 u-cursor-pointer u-whitespace u-no-underline u-relative">
{{ nav.item }}
</a>
{% endfor %}
</nav>
{% endif %}
{% if sponsor %}
<img decoding="async" referrerpolicy="no-referrer" src="{{ sponsor }}" class="u-ml-auto">
{% endif%}
{% if modifier=="large" %}
<span class="c-subheader__menu u-label-02 u-cursor-pointer {% if logo %}u-color-inverse{% else%}o-link-text{% endif %} u-none@lg u-ml-auto u-mr-small u-my-small" onclick="this.classList && document.querySelectorAll('[data-subheader-nav]').forEach( function(oNode){ oNode.classList.toggle('is-open');})">
MENU
</span>
{% endif %}
</div>
{% if children and not modifier %}
<nav class="c-subheader__subnavbar">
<div class="o-container u-flex u-items-center u-overflow-auto u-gap-small">
{% for child in children %}
<a href="#" class="c-subheader__item {% if child.status=='active' %}c-subheader__item--active{% endif %} u-nav-05 u-notransform u-cursor-pointer u-whitespace u-no-underline u-relative">
{{ child.item }}
</a>
{% endfor %}
</nav>
</div>
{% endif %}
{% if modifier %}
<nav class="c-subheader__navbar c-subheader__navbar--lg u-m-none" data-subheader-nav>
<div class="o-container">
<ul class="c-subheader__main-list u-list-none u-list-reset u-flex u-column u-row@lg u-items-center">
{% for nav in navigation %}
<li tabindex="1" class="c-subheader__item {% if nav.status %}c-subheader__item--active{% endif %} u-relative u-py-base u-cursor-pointer" data-subheader-item>
<div class="u-flex u-justify-between u-justify-center">
<a href="#" class="u-no-underline {% if logo %}u-color-inverse{% else%}o-link-text{% endif %}">
{{ nav.item }}
</a>
{% if nav.list %}
<svg class="o-icon o-icon--sm u-ml-xxsmall u-cursor-pointer u-block" data-subheader-arrow>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
</svg>
{% endif %}
</div>
{% if nav.list %}
<ul class="c-subheader__list u-justify-between u-wrap u-row u-column@lg u-list-none" data-subheader-list>
{% for a in nav.list %}
<li class="c-subheader__item c-subheader__item--small u-label-07 u-py-small">
<a href="#" class="u-cursor-pointer u-no-underline {% if logo %}u-color-inverse{% else%}o-link-text{% endif %}">
{{ a.item }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</nav>
{% endif %}
</div>
{
"media": "https://via.placeholder.com/56",
"title": "Cronaca",
"logo": "https://citynews.stgy.ovh/~shared/images/v7/channel-custom/vision-logo.svg",
"navigation": [
{
"item": "Televisione"
},
{
"item": "Streaming",
"status": "active"
},
{
"item": "Cinema"
}
],
"children": [
{
"item": "Netflix"
},
{
"item": "Prime",
"status": "active"
},
{
"item": "Disney+"
},
{
"item": "Sky"
},
{
"item": "Apple"
},
{
"item": "Migliori SerieTv"
},
{
"item": "Al Cinema"
},
{
"item": "Programmi TV"
}
]
}
// Name: Subheader
// Description: Subheader of website
//
// Component: `c-subheader`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/colors.mode`
// `settings/v7/spacing.tokens`
//
// ========================================================================
@use '../../../assets/sass/objects/v7/links' as *;
@use '../../../assets/sass/objects/v7/icons' as *;
@use '../../../assets/sass/tools/v7/utils'as *;
@use '../../../assets/sass/tools/v7/colors'as *;
@use '../../../assets/sass/tools/v7/mq'as *;
@use '../../../assets/sass/tools/v7/spacing'as *;
@use '../../../assets/sass/tools/v7/typography'as *;
@use '../../../assets/sass/tools/v7/zindex'as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/atomictypography.map' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/colors.map' as *;
@use '../../../assets/sass/settings/v7/sizes.map' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/typography.tokens' as *;
@use '../../../assets/sass/settings/v7/visibility.map' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/properties' as *;
@use '../../../assets/sass/settings/v7/scrollbar' as *;
// Variables
// ========================================================================
$subheader-nav-line-height: 3px;
$subheader-nav-line-active: var(--nav-active-bg);
$subheader-nav-line-hover: var(--nav-active-bg-hover);
$subheader-height-logo: 40px;
$subheader-width-logo: 200px;
$subheader-custom-spacing: 26px;
// ========================================================================
.c-subheader {
// Custom properties
// ======================================================================
--subheader-border: transparent;
--subheader-navbar-spacing: 0;
--subheader-item-spacing: #{$padding-base};
// Category color variations
// Default colors are applied to 'notizie' or '/' data-channel
--subheader-border: var(--divider-color);
--subheader-text: var(--body-color);
--subheader-title: var(--body-color);
--subheader-text-hover: var(--hover-02, #{$hover-04});
// ======================================================================
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--subheader-border);
background-color: var(--subheader-background, var(--background-color)); //var(--subheader-background);
background-image: var(--subheader-background-image);
background-repeat: no-repeat;
background-position: center center;
background-size: var(--subheader-background-size);
transition: $global-interactive-transition;
@each $category, $name in $categories {
@if ($category!="notizie"){
@if $layout!=amp {
@media (prefers-color-scheme: dark) {
[data-theme="today"][data-channel*="#{$category}"]:not([data-color-scheme*="light"]) & {
--subheader-background: #{rgba(grabcolor($categories, $category, darker), .25)};
--subheader-text: #{$inverse-01};
--subheader-border: #{grabcolor($categories, $category, darker)};
}
}
[data-color-scheme*="dark"][data-theme="today"][data-channel*="#{$category}"] & {
--subheader-background: #{rgba(grabcolor($categories, $category, darker), .25)};
--subheader-text: #{$inverse-01};
--subheader-border: #{grabcolor($categories, $category, darker)};
}
}
[data-theme="today"][data-channel*="#{$category}"] & {
--subheader-border: #{grabcolor($categories, $category, base)};
--subheader-background: #{grabcolor($categories, $category, lighter)};
--subheader-text: #{grabcolor($categories, $category, darker)};
--subheader-text-hover: #{grabcolor($categories, $category, base)};
}
[data-theme="today"][data-channel*="/gossip"] & {
--subheader-background: #8947a3;
--subheader-text: #fff;
}
}
}
&::after {
position: absolute;
right: 0;
bottom: -5px;
content: '';
width: 100%;
height: 1px;
background-color: var(--subheader-border);
[data-channel*="dossier"] & {
display: none;
}
}
> div:first-child {
@include bp(md){
gap: #{$padding-small};
}
}
// Hide ::after border when modifier is branded
&.c-subheader--branded::after{
display: none;
}
//
// Subheader List
//
&__list {
display: none;
position: relative;
width: 100%;
margin-top: $margin-xxsmall;
margin-left: 0;
padding-left: 0;
@if $responsive-breakpoints {
@include bp(lg) {
position: absolute;
left: 0;
width: auto;
min-width: 100%;
margin-top: 0;
}
}
[data-subheader-item]:focus &,
[data-subheader-item]:hover & {
display: flex;
top: 100%;
background-color: var(--subheader-background-active, var(--background-color));
}
}
//
// Subheader Main List
//
&__main-list {
margin-right: -$padding-small;
margin-left: -$padding-small;
@if $responsive-breakpoints {
@include bp(lg) {
margin: 0;
}
}
}
//
// Subheader Title
//
&__title {
color: var(--subheader-title);
}
//
// Subheader Navbar
//
&__navbar {
// padding-top: var(--subheader-navbar-spacing);
// Custom Firefox scrollbar style
scrollbar-width: thin;
@if $layout!=amp {
// Navbar Large Variant
&--lg {
--subheader-navbar-spacing: 0;
display: none;
@include bp(lg) {
display: block;
border-top: 1px solid var(--subheader-light-line);
}
&.is-open {
display: block;
}
}
}
// Webkit scrollbar style
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
&::-webkit-scrollbar-track,
&::-webkit-scrollbar-thumb {
-webkit-border-radius: 8px;
}
&::-webkit-scrollbar-track {
background: var(--background-color-light);
}
&::-webkit-scrollbar-thumb {
background: var(--theme-color-light);
}
.c-subheader__head ~ & {
// Remove padding top when adiacent to subheader head
--subheader-navbar-spacing: 0;
@if $responsive-breakpoints {
// Restore padding top on medium devices
@include bp(md) {
--subheader-navbar-spacing: #{$subheader-custom-spacing};
}
}
}
}
&__subnavbar {
backdrop-filter: brightness(90%);
&::after {
position: absolute;
top: 0;
right: 0;
content: '';
height: 1px;
background-color: var(--subheader-border);
}
}
//
// Subheader Item
//
&__item {
padding-top: var(--subheader-item-spacing);
padding-bottom: var(--subheader-item-spacing );
color: var(--subheader-text);
@include z(cover);
&:hover {
color: var(--subheader-text-hover);
}
// Subheader item children of Main List
.c-subheader__main-list > & {
padding-right: $padding-base;
padding-left: $padding-base;
@include bp(lg) {
padding-right: $padding-xsmall;
padding-left: $padding-xsmall;
}
}
.c-subheader__head ~ .c-subheader__navbar & {
// Remove padding top when adiacent to subheader head
//padding-top: 0;
// Change item spacing from medium devices
@include bp(md) {
--subheader-item-spacing : #{$subheader-custom-spacing};
}
}
// Active state modifier
&--active {
&::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: $subheader-nav-line-height;
background-color: var(--subheader-text);
.c-subheader__navbar--lg & {
width: $subheader-nav-line-height;
height: 100%;
@include bp(lg) {
width: 100% ;
height: $subheader-nav-line-height;
}
}
}
}
// Small modifier
&--small {
width: 50%;
padding-right: $padding-small;
padding-left: 0;
@include bp(lg) {
width: 100%;
padding-left: $padding-small;
}
}
// Subheader item children of Navbar Large
.c-subheader__navbar--lg & {
width: 100%;
@include type(nav-02);
@include bp(lg) {
font-size: type-size("brevier", base);
width: auto;
}
&:focus,
&:hover {
outline: none;
background-color: var(--subheader-background-active, var(--background-color));
color: var(--subheader-text);
&::after {
display: none;
}
[data-subheader-arrow] {
transform: rotate(180deg);
}
}
&:first-child {
margin-left: 0;
}
}
}
//
// Subheader Avatar
//
&__avatar {
margin-bottom: $margin-xsmall;
@include bp(md) {
margin-right: $margin-xsmall;
margin-bottom: 0;
}
}
//
// Subheader Logo
//
&__logo {
max-height: $subheader-height-logo;
// min-width: $subheader-width-logo;
}
// approfondimento custom values
body[data-channel*="dossier"] & {
--subheader-background: #{$ui-02};
--subheader-text: #{$ui-01};
.c-subheader__item--active::after{
@if $layout==amp {
background-color: #FFFF00;
}
@else {
background-color: var(--component-color-accent);
}
}
.c-dossier-logo path {
fill: #{$ui-01};
}
}
}
The peculiarity of this is to provide more navigation information on the page or channel you are visiting.
The Subheader component snaps into place as the header– slim component.
Possible layout variations:
In order to generate a variation you must set parameter declaration in it’s config file. If the evaluation of parameter will result true, because present a value in it’s configuration, it will be rendered in the component
In order to display a default subheader template use following syntax:
{% render "@subheader" %}