feat(aio): add brand and concept icons, img style class more flexible (#23589)

PR Close #23589
This commit is contained in:
Stefanie Fluin
2018-04-27 20:47:23 -07:00
committed by Alex Rickabaugh
parent 313bdce590
commit b7c417f618
46 changed files with 457 additions and 1 deletions

View File

@ -78,6 +78,440 @@
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div>
<h2>BRAND ICONS</h2>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/animations.png" alt="Animations Icon">
</div>
<div>
<h3 class="l-space-left-3">ANIMATIONS</h3>
<ul class="l-space-left-3">
<li>
<span>Animations Icon (png) - <a href="assets/images/logos/concept-icons/animations.png" download>Download</a></span>
</li>
<li>
<span>Animations Icon (svg) - <a href="assets/images/logos/concept-icons/animations.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/augury.png" alt="Augury Icon">
</div>
<div>
<h3 class="l-space-left-3">AUGURY</h3>
<ul class="l-space-left-3">
<li>
<span>Augury Icon (png) - <a href="assets/images/logos/concept-icons/augury.png" download>Download</a></span>
</li>
<li>
<span>Augury Icon (svg) - <a href="assets/images/logos/concept-icons/augury.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/cdk.png" alt="CDK Icon">
</div>
<div>
<h3 class="l-space-left-3">COMPONENT DEV KIT (CDK)</h3>
<ul class="l-space-left-3">
<li>
<span>CDK Icon (png) - <a href="assets/images/logos/concept-icons/cdk.png" download>Download</a></span>
</li>
<li>
<span>CDK Icon (svg) - <a href="assets/images/logos/concept-icons/cdk.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/cli.png" alt="CLI Icon">
</div>
<div>
<h3 class="l-space-left-3">CLI</h3>
<ul class="l-space-left-3">
<li>
<span>CLI Icon (png) - <a href="assets/images/logos/concept-icons/cli.png" download>Download</a></span>
</li>
<li>
<span>CLI Icon (svg) - <a href="assets/images/logos/concept-icons/cli.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/compiler.png" alt="Compiler Icon">
</div>
<div>
<h3 class="l-space-left-3">COMPILER</h3>
<ul class="l-space-left-3">
<li>
<span>Compiler Icon (png) - <a href="assets/images/logos/concept-icons/compiler.png" download>Download</a></span>
</li>
<li>
<span>Compiler Icon (svg) - <a href="assets/images/logos/concept-icons/compiler.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/components.png" alt="Components Icon">
</div>
<div>
<h3 class="l-space-left-3">WEB COMPONENTS</h3>
<ul class="l-space-left-3">
<li>
<span>Web Components Icon (png) - <a href="assets/images/logos/concept-icons/components.png" download>Download</a></span>
</li>
<li>
<span>Web Components Icon (svg) - <a href="assets/images/logos/concept-icons/components.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/forms.png" alt="Forms Icon">
</div>
<div>
<h3 class="l-space-left-3">FORMS</h3>
<ul class="l-space-left-3">
<li>
<span>Forms Icon (png) - <a href="assets/images/logos/concept-icons/forms.png" download>Download</a></span>
</li>
<li>
<span>Forms Icon (svg) - <a href="assets/images/logos/concept-icons/forms.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/http.png" alt="HTTP Icon">
</div>
<div>
<h3 class="l-space-left-3">HTTP</h3>
<ul class="l-space-left-3">
<li>
<span>HTTP Icon (png) - <a href="assets/images/logos/concept-icons/http.png" download>Download</a></span>
</li>
<li>
<span>HTTP Icon (svg) - <a href="assets/images/logos/concept-icons/http.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/i18n.png" alt="i18n Icon">
</div>
<div>
<h3 class="l-space-left-3">i18n</h3>
<ul class="l-space-left-3">
<li>
<span>HTTP Icon (png) - <a href="assets/images/logos/concept-icons/i18n.png" download>Download</a></span>
</li>
<li>
<span>HTTP Icon (svg) - <a href="assets/images/logos/concept-icons/i18n.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/karma.png" alt="Karma Icon">
</div>
<div>
<h3 class="l-space-left-3">KARMA</h3>
<ul class="l-space-left-3">
<li>
<span>Karma Icon (png) - <a href="assets/images/logos/concept-icons/karma.png" download>Download</a></span>
</li>
<li>
<span>Karma Icon (svg) - <a href="assets/images/logos/concept-icons/karma.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/labs.png" alt="Labs Icon">
</div>
<div>
<h3 class="l-space-left-3">LABS</h3>
<ul class="l-space-left-3">
<li>
<span>Labs Icon (png) - <a href="assets/images/logos/concept-icons/labs.png" download>Download</a></span>
</li>
<li>
<span>Labs Icon (svg) - <a href="assets/images/logos/concept-icons/labs.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/language-services.png" alt="Language Services Icon">
</div>
<div>
<h3 class="l-space-left-3">LANGUAGE SERVICES</h3>
<ul class="l-space-left-3">
<li>
<span>Language Services Icon (png) - <a href="assets/images/logos/concept-icons/language-services.png" download>Download</a></span>
</li>
<li>
<span>Language Services Icon (svg) - <a href="assets/images/logos/concept-icons/language-services.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/material.png" alt="Material Icon">
</div>
<div>
<h3 class="l-space-left-3">MATERIAL</h3>
<ul class="l-space-left-3">
<li>
<span>Material Icon (png) - <a href="assets/images/logos/concept-icons/material.png" download>Download</a></span>
</li>
<li>
<span>Material Icon (svg) - <a href="assets/images/logos/concept-icons/material.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/protractor.png" alt="Protractor Icon">
</div>
<div>
<h3 class="l-space-left-3">PROTRACTOR</h3>
<ul class="l-space-left-3">
<li>
<span>Protractor Icon (png) - <a href="assets/images/logos/concept-icons/protractor.png" download>Download</a></span>
</li>
<li>
<span>Protractor Icon (svg) - <a href="assets/images/logos/concept-icons/protractor.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/pwa.png" alt="PWA Icon">
</div>
<div>
<h3 class="l-space-left-3">PWA</h3>
<ul class="l-space-left-3">
<li>
<span>PWA Icon (png) - <a href="assets/images/logos/concept-icons/pwa.png" download>Download</a></span>
</li>
<li>
<span>PWA Icon (svg) - <a href="assets/images/logos/concept-icons/pwa.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/router.png" alt="Router Icon">
</div>
<div>
<h3 class="l-space-left-3">ROUTER</h3>
<ul class="l-space-left-3">
<li>
<span>Router Icon (png) - <a href="assets/images/logos/concept-icons/router.png" download>Download</a></span>
</li>
<li>
<span>Router Icon (svg) - <a href="assets/images/logos/concept-icons/router.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/universal.png" alt="Universal Icon">
</div>
<div>
<h3 class="l-space-left-3">UNIVERSAL</h3>
<ul class="l-space-left-3">
<li>
<span>Universal Icon (png) - <a href="assets/images/logos/concept-icons/universal.png" download>Download</a></span>
</li>
<li>
<span>Universal Icon (svg) - <a href="assets/images/logos/concept-icons/universal.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div>
<h2>CONCEPT & FEATURE ICONS</h2>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/dependency-injection.png" alt="Dependency Injection Icon">
</div>
<div>
<h3 class="l-space-left-3">DEPENDENCY INJECTION</h3>
<ul class="l-space-left-3">
<li>
<span>Dependency Injection Icon (png) - <a href="assets/images/logos/concept-icons/dependency-injection.png" download>Download</a></span>
</li>
<li>
<span>Dependency Injection Icon (svg) - <a href="assets/images/logos/concept-icons/dependency-injection.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/lazy-loading.png" alt="Lazy Loading Icon">
</div>
<div>
<h3 class="l-space-left-3">LAZY LOADING</h3>
<ul class="l-space-left-3">
<li>
<span>Lazy Loading Icon (png) - <a href="assets/images/logos/concept-icons/lazy-loading.png" download>Download</a></span>
</li>
<li>
<span>Lazy Loading Icon (svg) - <a href="assets/images/logos/concept-icons/lazy-loading.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/libraries.png" alt="Libraries Icon">
</div>
<div>
<h3 class="l-space-left-3">LIBRARIES</h3>
<ul class="l-space-left-3">
<li>
<span>Libraries Icon (png) - <a href="assets/images/logos/concept-icons/libraries.png" download>Download</a></span>
</li>
<li>
<span>Libraries Icon (svg) - <a href="assets/images/logos/concept-icons/libraries.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/performance.png" alt="Performance Icon">
</div>
<div>
<h3 class="l-space-left-3">PERFORMANCE</h3>
<ul class="l-space-left-3">
<li>
<span>Performance Icon (png) - <a href="assets/images/logos/concept-icons/performance.png" download>Download</a></span>
</li>
<li>
<span>Performance Icon (svg) - <a href="assets/images/logos/concept-icons/performance.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div class="presskit-image-container">
<img src="assets/images/logos/concept-icons/templates.png" alt="Templates Icon">
</div>
<div>
<h3 class="l-space-left-3">TEMPLATES</h3>
<ul class="l-space-left-3">
<li>
<span>Templates Icon (png) - <a href="assets/images/logos/concept-icons/templates.png" download>Download</a></span>
</li>
<li>
<span>Templates Icon (svg) - <a href="assets/images/logos/concept-icons/templates.svg" download>Download</a></span>
</li>
</ul>
</div>
</div>
</div>
<div class="presskit-row">
<div class="presskit-inner">
<div>