diff --git a/aio/tools/transforms/templates/api/decorator.template.html b/aio/tools/transforms/templates/api/decorator.template.html
index dca547549f0a0..7a1ffece3ff64 100644
--- a/aio/tools/transforms/templates/api/decorator.template.html
+++ b/aio/tools/transforms/templates/api/decorator.template.html
@@ -26,7 +26,7 @@ <h3>{$ option.name $}</h3>
       </tr>
       <tr>
         <td>
-          <code-example language="ts" hideCopy="true" class="no-box api-heading">
+          <code-example language="ts" hideCopy="true" class="no-box api-heading {% if option.deprecated %} deprecated-api-item{% endif %}">
           {$ option.name $}: {$ option.type | escape $}
           </code-example>
         </td>
diff --git a/aio/tools/transforms/templates/api/includes/annotations.html b/aio/tools/transforms/templates/api/includes/annotations.html
index 0f5ad42332566..ef5b9d38e6ca4 100644
--- a/aio/tools/transforms/templates/api/includes/annotations.html
+++ b/aio/tools/transforms/templates/api/includes/annotations.html
@@ -2,7 +2,7 @@
 <section class="annotations">
   <h2>Annotations</h2>
   {%- for decorator in doc.decorators %}
-    <code-example language="ts" hideCopy="true" class="no-box api-heading">@{$ decorator.name $}({$ decorator.arguments $})</code-example>
+    <code-example language="ts" hideCopy="true" class="no-box api-heading {% if decorator.deprecated %} deprecated-api-item{% endif %}">@{$ decorator.name $}({$ decorator.arguments $})</code-example>
     {% if not decorator.notYetDocumented %}{$ decorator.description | marked $}{% endif %}
   {% endfor %}
 </section>
diff --git a/aio/tools/transforms/templates/api/includes/pipe-overview.html b/aio/tools/transforms/templates/api/includes/pipe-overview.html
index 03b00ea29cc00..48b1044ca358a 100644
--- a/aio/tools/transforms/templates/api/includes/pipe-overview.html
+++ b/aio/tools/transforms/templates/api/includes/pipe-overview.html
@@ -2,7 +2,7 @@
 {% import "lib/paramList.html" as params -%}
 
 <section class="{$ doc.docType $}-overview">
-  <code-example hideCopy="true" class="no-box api-heading">{{ {$ doc.valueParam.name $}_expression | <span class="kwd nocode">{$ doc.pipeName $}</span>
+  <code-example hideCopy="true" class="no-box api-heading {% if doc.deprecated %} deprecated-api-item{% endif %}">{{ {$ doc.valueParam.name $}_expression | <span class="kwd nocode">{$ doc.pipeName $}</span>
     {%- for param in doc.pipeParams %}
       {%- if param.isOptional or param.defaultValue !== undefined %} [{% endif %} : {$ param.name $}
     {%- endfor %}
diff --git a/aio/tools/transforms/templates/api/lib/memberHelpers.html b/aio/tools/transforms/templates/api/lib/memberHelpers.html
index 966aa445dac99..d8bda64880521 100644
--- a/aio/tools/transforms/templates/api/lib/memberHelpers.html
+++ b/aio/tools/transforms/templates/api/lib/memberHelpers.html
@@ -12,15 +12,15 @@
 
 {%- macro renderMembers(doc) -%}
   {%- for member in doc.staticProperties %}{% if not member.internal %}
-  <a class="code-anchor {% if member.deprecated %} deprecated-api-item{% endif %}" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+  <a class="code-anchor  {% if member.deprecated %} deprecated-api-item{% endif %}" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
   {% for member in doc.staticMethods %}{% if not member.internal %}
-  <a class="code-anchor {% if member.deprecated %} deprecated-api-item{% endif %}" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+  <a class="code-anchor  {% if member.deprecated %} deprecated-api-item{% endif %}" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
   {% if doc.constructorDoc and not doc.constructorDoc.internal %}
-  <a class="code-anchor {% if member.deprecated %} deprecated-api-item{% endif %}" href="{$ doc.path $}#{$ doc.constructorDoc.anchor | urlencode $}">{$ renderMemberSyntax(doc.constructorDoc, 1) $}</a>{% endif -%}
+  <a class="code-anchor  {% if member.deprecated %} deprecated-api-item{% endif %}" href="{$ doc.path $}#{$ doc.constructorDoc.anchor | urlencode $}">{$ renderMemberSyntax(doc.constructorDoc, 1) $}</a>{% endif -%}
   {% for member in doc.properties %}{% if not member.internal %}
-  <a class="code-anchor {% if member.deprecated %} deprecated-api-item{% endif %}" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+  <a class="code-anchor  {% if member.deprecated %} deprecated-api-item{% endif %}" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
   {% for member in doc.methods %}{% if not member.internal %}
-  <a class="code-anchor {% if member.deprecated %} deprecated-api-item{% endif %}" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
+  <a class="code-anchor  {% if member.deprecated %} deprecated-api-item{% endif %}" href="{$ doc.path $}#{$ member.anchor | urlencode $}">{$ renderMemberSyntax(member, 1) $}</a>{% endif %}{% endfor -%}
 
   {%- for ancestor in doc.extendsClauses %}{% if ancestor.doc %}
 
@@ -46,7 +46,7 @@
     {$ overload.shortDescription | marked $}
   </div>{% endif %}
 
-  <code-example language="ts" hideCopy="true" class="no-box api-heading">{$ renderMemberSyntax(overload) $}</code-example>
+  <code-example language="ts" hideCopy="true" class="no-box api-heading {% if overload.deprecated %} deprecated-api-item{% endif %}">{$ renderMemberSyntax(overload) $}</code-example>
 
   {% if overload.deprecated !== undefined %}
   <div class="deprecated">
diff --git a/aio/tools/transforms/templates/api/package.template.html b/aio/tools/transforms/templates/api/package.template.html
index 2dab4b53bd812..4eba57c5b459a 100644
--- a/aio/tools/transforms/templates/api/package.template.html
+++ b/aio/tools/transforms/templates/api/package.template.html
@@ -8,7 +8,7 @@ <h3>{$ title $}</h3>
     <table class="is-full-width list-table">
       {% for item in filteredItems %}
       <tr>
-        <td><code class="code-anchor"><a href="{$ overridePath or item.path $}"{%- if item.deprecated != undefined %} class="deprecated-api-item"{% endif %}>{$ item.name $}</a></code></td>
+        <td><code class="code-anchor  {% if item.deprecated %} deprecated-api-item{% endif %}"><a href="{$ overridePath or item.path $}"{%- if item.deprecated != undefined %} class="deprecated-api-item"{% endif %}>{$ item.name $}</a></code></td>
         <td>
           {% if item.deprecated !== undefined %}{$ ('**Deprecated:** ' + item.deprecated) | marked $}{% endif %}
           {% if item.shortDescription %}{$ item.shortDescription | marked $}{% endif %}
diff --git a/aio/tools/transforms/templates/api/var.template.html b/aio/tools/transforms/templates/api/var.template.html
index 5375b8c11787a..cacbd50c9a5d1 100644
--- a/aio/tools/transforms/templates/api/var.template.html
+++ b/aio/tools/transforms/templates/api/var.template.html
@@ -1,7 +1,7 @@
 {% extends 'export-base.template.html' %}
 
 {% block overview %}
-  <code-example language="ts" hideCopy="true" class="no-box api-heading">
+  <code-example language="ts" hideCopy="true" class="no-box api-heading {% if doc.deprecated %} deprecated-api-item{% endif %}">
   const {$ doc.name $}: {$ (doc.type | escape) or 'any' $};
   </code-example>
 {% endblock %}
diff --git a/aio/tools/transforms/templates/cli/lib/cli.html b/aio/tools/transforms/templates/cli/lib/cli.html
index c42407d655da4..f8e7f8c78f1f3 100644
--- a/aio/tools/transforms/templates/cli/lib/cli.html
+++ b/aio/tools/transforms/templates/cli/lib/cli.html
@@ -1,6 +1,6 @@
 {% macro renderSyntax(container, prefix) -%}
 {% for name in container.names %}
-<code-example hideCopy="true" class="no-box api-heading no-auto-link">ng {%if prefix %}{$ prefix $} {% endif %}<span class="cli-name">{$ name $}</span>
+<code-example hideCopy="true" class="no-box api-heading no-auto-link {% if container.deprecated %} deprecated-api-item{% endif %}">ng {%if prefix %}{$ prefix $} {% endif %}<span class="cli-name">{$ name $}</span>
   {%- for arg in container.positionalOptions %} &lt;<var>{$ arg.name $}</var>&gt;{% endfor %}
   {%- if container.namedOptions.length %} [<var>options</var>]{% endif -%}
 </code-example>