changed guidance to best practices

app/templates/components/best-practices/cards.html

@@ -0,0 +1,47 @@
+<h3 class="padding-bottom-2">
+  {% if card_header %}
+  {{card_header}}
+  {% endif %}
+</h3>
+<ul class="usa-card-group">
+  {% for item in card_contents %}
+  <li class="usa-card grid-col tablet:grid-col-4 {% if item.link %}linked-card linked-content{% endif %}">
+    <div class="usa-card__container">
+      {% if item.card_heading %}
+      <div class="usa-card__header">
+        {% if item.link %}
+        <a href="{{ item.link }}">
+          {% endif %}
+          <h4
+            class="usa-card__heading {% if text_align != 'left' or text_align is not defined %}text-center{% else %}text-left{% endif %} {% if item.link %}linked-card{% endif %}">
+            {{ item.card_heading }}
+          </h4>
+          {% if item.link %}
+        </a>
+        {% endif %}
+      </div>
+      {% endif %}
+      {% if item.svg_src or item.image_src%}
+      <div class="usa-card__media usa-card__media--inset">
+        {% if item.svg_src %}
+        <svg aria-hidden="true" focusable="false" role="img" class="best-practices_card_img">
+          <use xlink:href="{{asset_url('images/best-practices-card-sprite.svg')}}#{{item.svg_src}}"></use>
+        </svg>
+        {% endif %}
+        {% if item.image_src %}
+        <img class="best-practices_card_img" src="{{item.image_src}}" alt="{{item.card_heading}} image" />
+        {% endif %}
+      </div>
+      {% endif %}
+      {% if item.p_text %}
+      <div class="usa-card__body">
+        <p
+          class="{% if text_align != 'left' or text_align is not defined %}text-center{% else %}text-left{% endif %} {% if item.link %}linked-card{% endif %}">
+          {{item.p_text|safe}}
+        </p>
+      </div>
+      {% endif %}
+    </div>
+  </li>
+  {% endfor %}
+</ul>

app/templates/components/best-practices/circle_number.html

@@ -0,0 +1,9 @@
+{% macro circle_number(number) %}
+<svg xmlns="http://www.w3.org/2000/svg" class="svg-circle-icon" width="24" height="24" viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="37" stroke="#005ea2" stroke-width="7" fill="none" />
+    <text x="50%" y="50%" text-anchor="middle" font-size="40" font-weight="bolder" fill="#005ea2" font-family="Arial"
+        dy=".35em">
+        {{ number }}
+    </text>
+</svg>
+{% endmacro %}

app/templates/components/best-practices/nav_breadcrumb.html

@@ -0,0 +1,13 @@
+<nav class="navigation-service usa-breadcrumb padding-top-0">
+  <ol class="usa-breadcrumb__list">
+    <li class="usa-breadcrumb__list-item">
+      <span class="usa-breadcrumb__label"><a href="{{ url_for('.best_practices') }}"
+          class="usa-link navigation-organization-link">Best Practices</a></span>
+    </li>
+    {% if title %}
+    <li class="usa-breadcrumb__list-item">
+      <span class="usa-breadcrumb__label">{{ title }}</span>
+    </li>
+    {% endif %}
+  </ol>
+</nav>