Passing variables into twig components Based on this interesting article: DRY templating with Twig and Craft CMS. I found myself trying to update the approach with include instead of macro following reading I had about twig 2 and craftcms 3.

So basically there is my component

_hero-banner.twig

{# Defaults #}

{% set defaults = {
    heroTitle : title is defined ? title : 'Title not set',
    titleColor : color is defined ? color : null,
    heroImage : image is defined ? image : null,
    heroButton : button is defined ? button : null,
    heroClasses : classes is defined ? classes : null
  }
%}

{# Options #}

{% set options = options is defined ? defaults|merge(options) : defaults %}

{# Variables #}

{% set imageMobile = {
    mode: 'crop',
    width: 640,
    height: 500,
    quality: 75,
    position: 'focus-point'
} %}

{# Output #}
 &lt;div class="row c-hero-banner" {% if options.heroImage %} style="background-image:url('{{ options.heroImage.one.getUrl(imageMobile) }}')" {% endif %}&gt;
  &lt;div class="container"&gt;
    &lt;div class="col-xs-12 col-lg-6"&gt;
      {# Display the entries #}
            &lt;h1 {% if options.titleColor %} class="t-text-white" {% endif %}&gt;{{ options.heroTitle }}&lt;/h1&gt;
            {% if options.heroButton %}
              &lt;button type="button" class="o-button o-button--primary"&gt; {{ options.heroButton }} &lt;/button&gt;
            {% endif %}
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


And there is my include

index.twig

{% set heroBannerOptions = {
    title : homepage.mainTitle,
    image : homepage.heroBanner,
    color: true
  }
%}

{% include 'components/_hero-banner.twig' with { options : heroBannerOptions } %}


Somehow I cannot pass the variables into the component and I cannot figure out why...
I forgot to post the solution: 

_hero-banner.twig


{% set defaults = {
    heroTitle : options.title is defined ? options.title : 'Title not set',
    titleColor : options.color is defined ? options.color : false,
    heroImage : options.image is defined ? options.image : null,
    heroClasses : options.classes is defined ? options.classes : null,
    heroButton : options.button is defined ? options.button: null
  }
%}

{# Options #}

{% set options = options is defined ? defaults|merge(options) : defaults %}

{# Variables #}

{% set imageMobile = {
    mode: 'crop',
    width: 640,
    height: 500,
    quality: 75,
    position: 'focus-point'
} %}

{# Output #}
 &lt;div class="row c-hero-banner" {% if defaults.heroImage %} style="background-image:url('{{ defaults.heroImage.one.getUrl(imageMobile) }}')" {% endif %}&gt;
  &lt;div class="container"&gt;
    &lt;div class="col-xs-12 col-lg-6"&gt;
      {# Display the entries #}
            &lt;h1 {% if defaults.titleColor %} class="t-text-white" {% endif %}&gt;{{ defaults.heroTitle }}&lt;/h1&gt;
            {% if defaults.heroButton %}
              {% include "components/_buttons.twig" with options %}
            {% endif %}
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


I wasn't calling my variables properly...