contacts_subscriptions-1.x-dev/templates/contacts-subscription-options.html.twig

{#
/**
 * @file
 * Default theme implementation to present subscription options.
 *
 * Available variables:
 * - options: A list of subscription options. Each item is an array containing:
 *   - title: The title of the option.
 *   - price: The base price of the option.
 *   - intro_price: The introductory offer, if available, for the option.
 *   - description: The description of the option.
 *   - link: The sign-up link for the option.
 *   - attributes: HTML attributes for the option container.
 *   - is_active: Whether the option is the currently active.
 * - wrapper_attributes: HTML attributes for the container element.
 * - has_links: Whether any of the options have links.
 *
 * @ingroup themeable
 */
#}
<div{{ wrapper_attributes.addClass('subscription-options-block', 'row') }}>
  {% for option in options %}
    {% set option_classes = [] %}
    {% if option.is_active %}
      {% set option_classes = ['bg-primary', 'text-white'] %}
    {% endif %}
    <div class="col-12 col-lg-4 mb-md-4">
      <div{{ option.attributes.addClass('card', 'card-pricing', 'h-100').addClass(option_classes).addClass(option.title | replace({' ': '-'}) | lower) }}>
        <div class="card-body">
          <h4 class="card-title">{{ option.title }}</h4>
          <div class="price">
            <h3 class="mb-2">
            {% if option.price %}
              {% if option.price_intro %}<span class="text-muted">{% endif %}{{ option.price }}</span>{% if option.price_intro %}<h5 class="intro-offer">{{ option.price_intro }}</h5>{% endif %}
            {% else %}&nbsp;{% endif %}
            </h3>
          </div>
          {% if option.description %}
          <div class="card-text">
            {{ option.description }}
          </div>
          {% endif %}
        </div>
        {% if has_links %}
        <div class="card-footer">
          {% if option.link %}
            {{ option.link }}
          {% else %}
            <span class="btn disabled">&nbsp;</span>
          {% endif %}
        </div>
        {% endif %}
      </div>
  </div>
  {% endfor %}
</div>