{% set is_outline = c.outline or 'card-outline' in (c.css_class or '') %}
{% set card_variant = c.variant %}
{% if not card_variant and c.css_class %}
  {% if 'card-primary' in c.css_class %}{% set card_variant = 'primary' %}
  {% elif 'card-success' in c.css_class %}{% set card_variant = 'success' %}
  {% elif 'card-danger' in c.css_class %}{% set card_variant = 'danger' %}
  {% elif 'card-warning' in c.css_class %}{% set card_variant = 'warning' %}
  {% elif 'card-info' in c.css_class %}{% set card_variant = 'info' %}
  {% endif %}
{% endif %}

<div {% if c.id %}id="{{ c.id }}"{% endif %}
     class="fcu-card {% if is_outline %}fcu-card--outline{% endif %} {% if card_variant %}fcu-card--{{ card_variant }}{% endif %} {{ c.css_class if c.css_class }}">
  {% if c.title %}
    <div class="fcu-card-header">
      <h3>{{ c.title }}</h3>
      {% if c.header_extra %}
        <div class="fcu-card-tools">
          {{ c.header_extra | safe }}
        </div>
      {% endif %}
    </div>
  {% endif %}
  <div class="fcu-card-body">{{ component_html|safe }}</div>
</div>