build(aio): improve API docs layout and styling

aio/tools/transforms/templates/api/includes/info-bar.html

@@ -1,14 +1,27 @@
 {% import "lib/githubLinks.html" as github -%}
 
 <!-- INFO BAR -->
-<div class="info-banner api-info-bar">
-  <span class="info-bar-item">
-    npm package: <code>@angular/{$ doc.moduleDoc.id $}</code>
-  </span>
+<section class="info-bar">
 
-  {% if doc.ngModule %}
-  <span class="info-bar-item">
-    NgModule: {@link {$ doc.ngModule $}}
-  </span>
-  {% endif %}
-</div>
+<table class="is-full-width">
+<tbody>
+<tr>
+  <th>npm Package</th>
+  <td><a href="https://www.npmjs.com/package/@angular/{$ doc.moduleDoc.id.split('/')[0] $}">@angular/{$ doc.moduleDoc.id.split('/')[0] $}</a></td>
+</tr>
+<tr>
+  <th>Module</th>
+  <td><code>import { {$ doc.name $} } from <a href="{$ doc.moduleDoc.path $}">@angular/{$ doc.moduleDoc.id $}</a>;</code></td>
+</tr>
+<tr>
+  <th>Source</th>
+  <td>{$ github.githubViewLink(doc, versionInfo) $}</td>
+</tr>
+{% if doc.ngModule %}
+<tr>
+  <th>NgModule</th>
+  <td>{@link {$ doc.ngModule $}}</td>
+</tr>
+{% endif %}
+</tbody>
+</table>