webawesome/docs/_layouts/element.njk

{% set hasSidebar = true %}
{% set hasOutline = true %}

{% extends '../_includes/base.njk' %}

{# Component header #}
{% block beforeContent %}
  <h1 class="title">{{ title }}</h1>
  <div class="component-info">
    {% for tag, url in elements %}
      <code class="tag"><a href="{{ url }}">{{ tag }}</a></code>
    {% endfor %}
    {% if since %}<wa-badge variant="neutral">Since {{ since }}</wa-badge>{% endif %}
    {% if status %}
      <wa-badge
        {% if status == 'stable' %}variant="brand"{% endif %}
        {% if status == 'experimental' %}variant="warning"{% endif %}
      >
        {{ status }}
      </wa-badge>
    {% endif %}

    {% if isPro %}
      <wa-badge class="pro">PRO</wa-badge>
    {% endif %}
  </div>
  {% if description -%}
    <p class="summary">{{ description | inlineMarkdown | safe }}</p>
  {%- endif %}
  {% if component %}
  <wa-callout variant="success">
    <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
    Want to do more?
    Check out the {% for name in (component | toArray) -%}
      {{ ' and ' if loop.last and not loop.first }}<a href="/docs/components/{{ name }}"><code>&lt;wa-{{ name }}&gt;</code></a>{{ ', ' if not loop.last }}
      {%- endfor %} component{{ 's' if (component | isArray) }}</a>!
  </wa-callout>
  {% endif %}
{% endblock %}

{# Content #}
{% block content %}
  {{ content | safe }}
{% endblock %}

{# Component API #}
{% block afterContent %}
  {# Slots #}
  {% if css_file %}
    <h2>Using these styles</h2>
    <p>If you want to use these styles without using the entirety of Web Awesome Natives, you can include the following CSS files:</p>


  {% endif %}
{% endblock %}