{
  "breadcrumb": [
    {
      "url": "http://bing.com",
      "text": "This is item one"
    },
    {
      "url": "http://bing.com",
      "text": "Two"
    },
    {
      "url": "http://bing.com",
      "text": "This is 3"
    },
    {
      "url": "http://bing.com",
      "text": "Karate School"
    }
  ]
}

// Breadcrumbs
//
// Styles for the Breadcrumbs Component.

// Import site utilities.
@import '../../00-global/utils/init';

.breadcrumb {
  width: 100%;
  display: none;
  flex-wrap: wrap;
  justify-content: flex-start;

  @include breakpoint($bp-sm) {
    display: flex;
  }
}

.breadcrumb--container {
  padding: 0.5rem 0;
  display: none;

  @include breakpoint($bp-sm) {
    display: block;
  }
}

.breadcrumb__item {
  color: $color-black;
  font-size: 1rem;
  margin-left: 0.75rem;
  position: relative;
  text-decoration: none;

  a {
    color: $color-black;
  }

  &:first-child {
    margin: 0;
  }

  &::after {
    content: '>';
    margin-left: 0.5rem;
  }

  &:last-child {
    &::after {
      display: none;
    }
  }
}

{{ attach_library('@theme/breadcrumb') }}

{% if breadcrumb %}
  <nav role="navigation" aria-labelledby="system-breadcrumb" class="breadcrumb--container">
    <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
    <ol class="breadcrumb">
      {% for item in breadcrumb %}
        <li class="breadcrumb__item">
          {% if item.url %}
            <a href="{{ item.url }}">{{ item.text }}</a>
          {% else %}
            <span class="breadcrumb__current">{{ item.text }}</span>
          {% endif %}
        </li>
      {% endfor %}
    </ol>
  </nav>
{% endif %}

breadcrumb:
  - text: About
    url: "#"
  - text: Dimensions of Energy
    url: "#"
  - text: Current Page
    url: ""

{#
/**
 * @file
 * Theme override for a breadcrumb trail.
 *
 * Available variables:
 * - breadcrumb: Breadcrumb trail items.
 */
#}
  {%
    include '@theme/breadcrumb/breadcrumb.twig' with {
      breadcrumb: breadcrumb
    } only
  %}

// Layout 2x.

// Import site utilities.
@import '../../00-global/utils/init';

.l-2x {

  .l-container {

    @include breakpoint($bp-sm) {
      display: flex;
      // Catch-all for items beyond 2x.
      flex-wrap: wrap;
    }

    > * {

      @include breakpoint($bp-sm) {
        flex: 0 1 50%;
      }

      // On mobile, all items, except last child, get a margin-bottom.
      &:not(:last-child) {
        margin-bottom: 1rem;

        @include breakpoint($bp-sm) {
          margin-bottom: 0;
        }
      }

      // As a catch-all, on desktop,
      // all items after the standard 2 get a margin-top.
      &:nth-child(1n + 3) {

        @include breakpoint($bp-sm) {
          margin-top: 1rem;
        }
      }
    }
  }
}

{#
  This file is intended to only provide an
  example presentation of l-2x.
  The l-2x__items may not be needed in basic implementations. :)
#}
<div class="l-2x">
  <div class="l-container">
    <div class="l-2x__item"><img src="https://via.placeholder.com/250x250.png?text=2x+Layout+Item" alt="Placeholder" style="display:block;height:100%;max-height:250px;max-width:250px;width:100%;" /></div>
    <div class="l-2x__item"><img src="https://via.placeholder.com/250x250.png?text=2x+Layout+Item" alt="Placeholder" style="display:block;height:100%;max-height:250px;max-width:250px;width:100%;" /></div>
  </div>
</div>

{% if media_slide.video %}
  {% block video %}
    <a href="#{{ media_id }}" data-lity>
      <button class="media-slide__play">
        {{ icons.get('icon-circle-play') }}
      </button>
    </a>

    <div id="{{ media_id }}" class="lity-hide">
       {{ media_slide.video }}
    </div>
  {% endblock %}
{% endif %}

// Accordion
//
// The accordion.
// This uses Scot Ohara' accessible accordion.
// This github page has some good docs: <br/>
// https://github.com/scottaohara/a11y_accordions <br/>
// All `data-aria-accordion-` items are required by the js. <br/>
// The js lives in the libraries/a11y-accordion folder. <br/>
// Be sure to test all changes in html. Inserting html wrappers <br/>
// is known to break the `a11y_accordions` plugin.
//
// Markup: accordion.twig
//
// Style guide: Components.Accordion

// sass-lint:disable indentation

// Import site utilities.
@import '../../00-global/utils/init';

// Accordion container element.
.accordion-container {

  @include breakpoint($bp-sm) {
    border: 3rem solid $color-black;
    padding-bottom: 4.4rem;
    padding-top: 5.9rem;
    position: relative;
    z-index: $zi-lowest;
  }
}

// Accordion container element.
.accordion {

  @include breakpoint($bp-sm) {
    margin-left: 5rem;
    margin-right: 5rem;
  }
}

.accordion__title .heading {
  @include font-stack-secondary;
  color: $color-pwc-orange;
  font-size: 1.75rem;
  font-weight: $font-weight-normal;
  margin-bottom: 2rem;

  @include breakpoint($bp-sm) {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    margin-left: 5rem;
  }
}

// Accordion Heading.
.accordion__heading {
  font-size: inherit;
  margin: 0;
  border-top: 1px solid $color-gray-dk;
}

.accordion__trigger {
  @include font-stack-primary;
  align-items: center;
  appearance: none;
  background-color: $color-white;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  color: $color-pwc-gray-dk;
  cursor: pointer;
  display: flex;
  font-size: 1.125rem;
  font-weight: $font-weight-bold;
  margin: 0;
  padding: 1.5rem;
  position: relative;
  text-align: left;
  width: 100%;
  z-index: $zi-above-ground;

  &[aria-disabled='true']:hover {
    cursor: not-allowed;
  }

  &[aria-expanded='true'] {
    background-color: $color-pwc-gray-faint;
    color: $color-pwc-orange;

    &::after {
      background-image: url('../images/icon-chevron-right-orange.svg');
    }
  }

  &::after {
    background-image: url('../images/icon-chevron-right.svg');
    background-repeat: no-repeat;
    background-size: 10px;
    content: '';
    display: block;
    height: 20px;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    will-change: transform, opacity;
  }

  // Disabled == `true` means that the accordion is open/opening.
  &[aria-expanded='true']::after {
    opacity: 1;
    transform: translateY(-50%) rotate(90deg);
    transition: visibility $motion-default linear, opacity $transition, transform $transition;
    visibility: visible;
  }
}

// Content Panel exposed in the accordion.
.accordion__panel {
  @include font-stack-primary;
  background-color: inherit;
  color: $color-pwc-gray-dk;
  font-size: 1.125rem;
  font-weight: $font-weight-normal;
  max-height: 0;
  overflow: hidden;
  padding: 0.001em 1.25em;
  position: relative;
  visibility: hidden;
  z-index: $zi-above-ground;
}

.accordion__panel--transition {
  transition: max-height $transition, padding-top $transition, padding-bottom $transition;
}

.accordion__panel > :last-child {
  margin-bottom: 0;
}

.accordion__panel[aria-hidden='false'] {
  background-color: $color-pwc-gray-faint;
  border-top: 1px solid $color-pwc-black-70;
  font-size: 1.125rem;
  max-height: 100vh;
  overflow: auto;
  padding: 1em;
  visibility: visible;

  p {
    padding-left: 1rem;

    @include breakpoint($bp-sm) {
      padding-left: 5rem;
    }
  }
}

{{ attach_library('pwc_bw3_theme/accordion') }}

{# Preserve the Drupal attributes if they're available. #}
{%
  set attributes = attributes ? attributes.addClass('accordion-container') : ' class="accordion-container"'
%}

<section {{ attributes|raw }}>
  {% block heading %}
    {% if accordion.heading %}
      <div class="accordion__title">
        {%
        include '@pwc_bw3_theme/heading/heading.twig' with {
          heading: accordion.heading
        } only
        %}
      </div>
    {% endif %}
  {% endblock %}
  <div class="accordion" data-aria-accordion="" {% if accordion.first_open %} data-constant=""{% endif %}>
    {% for item in accordion.accordion_items %}
      <h3 data-aria-accordion-heading="" class="accordion__heading">
        <button type="button" id="{{ item.id }}_trigger" class="accordion__trigger">
          {{ item.title }}
        </button>
      </h3>
      <div data-aria-accordion-panel="" id="{{ item.id }}"  class="accordion__panel">
        {{ item.body }}
      </div>
    {% endfor %}
  </div>
</section>

accordion:
  heading:
    title: "FAQ"
    url: ''
    heading_level: 2
    modifier: ''
  first_open: false
  accordion_items:
  - id: panel_one
    title: Question 1
    body: "<p>Qui ipsorum lingua Celtae, nostra Galli appellantur.</p>"
  - id: panel_two
    title: Question 2
    body: "<p>Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.</p>"
  - id: panel_three
    title: Question 3
    body: "<p>Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.</p>"

<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="16px" viewBox="0 0 8 16"><title>icon-chevron-right</title><path d="M5.33,8l-5,5.63a1.52,1.52,0,0,0,0,2,1.13,1.13,0,0,0,1.74,0L7.64,9.32A1.52,1.52,0,0,0,8,8a1.52,1.52,0,0,0-.32-1.32L2.09.41A1.13,1.13,0,0,0,.36.41a1.52,1.52,0,0,0,0,2Z" fill="#d04a02"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="16px" viewBox="0 0 8 16"><title>icon-chevron-right</title><path d="M5.33,8l-5,5.63a1.52,1.52,0,0,0,0,2,1.13,1.13,0,0,0,1.74,0L7.64,9.32A1.52,1.52,0,0,0,8,8a1.52,1.52,0,0,0-.32-1.32L2.09.41A1.13,1.13,0,0,0,.36.41a1.52,1.52,0,0,0,0,2Z" fill="#404041"/></svg>

{% set rendered_content = content|render %}
{%
  include '@pwc_bw3_theme/accordion/_accordion-item.twig' with {
    id: 'accordion-item--' ~ paragraph.id(),
    title: content.field_title,
    body: content.field_body,
  } only
%}

{% set rendered_content = content|render %}
{% embed '@pwc_bw3_theme/accordion/accordion.twig' with {
  accordion: {
    modifier: '',
    heading: {
      title: content.field_title
    },
    first_open: false,
  }
} %}
  {% block accordion_list %}
    {{ content.field_items }}
  {% endblock %}
{% endembed %}

{#
/**
 * @file
 * Macro for embedding svg icons
 *
 * @var string name
 *   The name of the svg to embed. It should match one of the svgs
 *   that exist within the icons/assets/ directory.
 *
 * Optional vars:
 * @var string classNames
 *   Any additional classes to be added to the svg element.
 *   The default classes will be replaced with any classes provided.
 *
 * Implementation:
 *
 * {% import "_icons.twig" as icons %}
 * {{ icons.get(item.icon) }}
 */
  @theme_name
#}
{% macro get(name) %}
  {% set svg_path = '@theme_name/icons/assets/' %}
  {{ source(svg_path ~ name ~ '.svg') }}
{% endmacro %}

{{ kint() }}

{# Singles #}
{% set entry = craft.entries.section('section_handle').one() %}

{# Channels or structures #}
{% set entry = craft.entries.section('section_handle').slug('my_slug').one() %}

{# General #}
{% set entry = craft.entries.id(5).one() %}

{% for item in header.cf.cases_list %} {# de alguna lista #}
  {% set bg_image_mobile = item.bg_image_mobile | first %} {# obtengo la imagen (de un blueprint tipo File, el primero de la lista) #}
  {# aqui puedo obtener un tipo ImageMedium (o algo asi) que tiene el metodo cropResize y varios mas, como url, etc...  #}      
  {{ media_directory(page.path~'/uploads')[bg_image_mobile.name].cropResize(375,501).html }}
{% endfor %}

{#
https://www.drupal.org/node/1906780
Beware of dump()
If you want to see all variables, but dump() results in exhausted memory because of recursion or the like, you can loop through _context to see the all the keys in it:
#}
<ol>
  {% for key, value in _context %}
    <li>{{ key }}</li>
  {% endfor %}
</ol>

{% extends 'docs.html.twig' %}

{% block content %}
	<div id="chapter">
		<div id="body-inner">

			<h1>{{ page.title }}</h1>

			{{ page.content }}

			{% set options = { items: {'@page.children': page.route}, 'limit': 30, 'order': {'by': 'default', 'dir': 'asc'}, 'pagination': false } %}
			{% set my_collection = page.collection(options) %}

			<div id="chapter-links">
				<p><strong>The following topics are covered in this section:</strong><br>
					{% for p in my_collection %}
					<a href="{{ p.url }}">{{ p.title }}</a><br/>
					{% endfor %}
				</p>
			</div>

		</div>
	</div>
{% endblock %}