<ui-pricing>

<template
  is="ui-pricing"
  plan="string"
  badge="string"
  info="string"
  price="string"
  features="array"
  ctaUrl="string"
  ctaLabel="string"
>
  <div class="ui-pricing">
    <div class="ui-pricing-content">
      <div class="ui-pricing-top">
        <div if="props.plan" class="ui-pricing-plan">{{props.plan |> esc}}</div>
        <div if="props.badge" class="ui-pricing-badge">
          {{props.badge |> esc}}
        </div>
      </div>
      <div if="props.info" class="ui-pricing-info">{{props.info |> esc}}</div>
      <div if="props.price" class="ui-pricing-price">
        {{props.price |> esc}}
      </div>
      <ul if="props.features?.length" class="ui-pricing-features">
        <li map="feature of props.features">{{feature |> esc}}</li>
      </ul>
      <div if="props.ctaUrl && props.ctaLabel" class="ui-pricing-cta">
        <a href="{{props.ctaUrl}}">{{props.ctaLabel |> esc}}</a>
      </div>
    </div>
  </div>
</template>