Clarity presents pixel perfect and scalable SVG-based icons. This new icon system gives you complete control over the color, orientation, and visibility all the way down to individual paths in the icon through standard CSS. Multi-colored icons are as easy as setting fill and stroke colors in your styles! Clarity Icons comes with a set of predefined color treatments as CSS classnames that you can use in your HTML right away with more icons and styles on the way.
<clr-icon shape="info" class="icon-size-[sm/md/lg]"></clr-icon>
<clr-icon shape="info" class="icon-orient-[up/right/down/left]"></clr-icon>
<clr-icon shape="info" class="icon-color—[highlight/inverse/success/danger/warning/info]"></clr-icon>
Clarity Navigation is now responsive! You can make up to two levels of navigation responsive. Add the
clr-nav-level
input to your navigation level and assign it a value of
1
for primary navigation and 2
for secondary
navigation.
<clr-main-container>
<clr-header>
...
<div class="header-nav" [clr-nav-level]="1">
...
</div>
...
</clr-header>
<div class="content-container">
<main class="content-area">
...
</main>
<nav class="sidenav" [clr-nav-level]="2">
...
</nav>
</div>
</clr-main-container>
Login Form now supports a select box for Authentication Source and a link for Sign Up.