{#
/**
 * Section
 *
 * A section is a simple container that can hold arbitrary content.
 *
 * @var string $heading The main heading.
 * @var string $eyebrow_heading The eyebrow heading.
 * @var string $blurb Generally short text or blurb.
 * @var array $link An optional array with `url` and `text` keys.
 * @var array $icon_data An array of icon data (e.g. `icon`, `title`, `size`, `label`, etc.)
 * @var string $content Any old HTML markup or content.
 * @var Drupal\Core\Template\Attribute $attributes Attributes (class, data, etc.) for the entire component.
 *
 * @union-variation cu-section--wide Supersized!
 * @union-variation cu-section--gapless Snug!
 * @union-variation cu-section--framed Adds a frame to the heading. Defaults to left.
 * @union-variation cu-section--framed-right Places the frame to the right. Use with `cu-section--framed`.
 * @union-variation cu-section--left Moves the headings, icon, etc. to the left in a column.
 * @union-variation cu-section--centered Centers content vertically in columns when using `cu-section--left`.
 */
#}
{% set attributes = union_attributes(attributes|default([])) %}

<section{{attributes.addClass('cu-section')}}>
  {% if icon_data or eyebrow_heading or heading %}
  {% include '@union/_composite-heading.twig' with {
    icon_data: icon_data,
    eyebrow_heading: eyebrow_heading,
    heading: heading,
    body: blurb,
    link: link,
    attributes: {
      class: [
        'cu-section__heading',
        attributes.hasClass('cu-section--left') ? 'cu-composite-heading--left',
        not attributes.hasClass('cu-section--left') ? 'cu-composite-heading--minimal',
      ]
    }
  } only %}
  {% endif %}
  <div class="cu-section__content">{{ content }}</div>
</section>