Avatars
Standard Avatars
Avatars are :wrappable, so you can send in an :href to the options and it'll automatically generate the avatar as a link.
Avatars come with sizes: :sm, :md: ,lg:, :xl. :md is default
Pass in an image to render an image, or a body to send in text (e.g.: initials) to the component. If passing in an image, :alt is available and will be passed through to the image as an alt tag.
Default avatars, no sizing set
KM
No options
= ui.nfg :avatar, body: 'KM'
%br
= ui.nfg :typeface, caption: 'No options'<div class="avatar avatar-md"><span class="avatar-text">KM</span></div>
<br/>
<p class="font-size-sm">No options</p>KM
Manually set body via do block
= ui.nfg :avatar do
KM
%br
= ui.nfg :typeface, caption: 'Manually set body via do block'<div class="avatar avatar-md"><span class="avatar-text">KM
</span></div>
<br/>
<p class="font-size-sm">Manually set body via do block</p>= ui.nfg :avatar, body: 'KM', href: '#test'
%br
= ui.nfg :typeface, caption: 'Linked by adding :href to options'<a class="avatar avatar-md" href="#test"><span class="avatar-text">KM</span></a>
<br/>
<p class="font-size-sm">Linked by adding :href to options</p>= ui.nfg :avatar, body: 'KM', href: '#test', tooltip: 'Test Tooltip'
%br
= ui.nfg :typeface, caption: 'Tooltipped and linked'<a class="avatar avatar-md" data-toggle="tooltip" data-placement="top" data-html="true" href="#test" title="Test Tooltip"><span class="avatar-text">KM</span></a>
<br/>
<p class="font-size-sm">Tooltipped and linked</p>No options
= ui.nfg :avatar, image: 'https://via.placeholder.com/300'
%br
= ui.nfg :typeface, caption: 'No options'<div class="avatar avatar-md"><img src="https://via.placeholder.com/300" /></div>
<br/>
<p class="font-size-sm">No options</p>Linked by adding :href to options
= ui.nfg :avatar, image: 'https://via.placeholder.com/300', href: '#test'
%br
= ui.nfg :typeface, caption: 'Linked by adding :href to options'<a class="avatar avatar-md" href="#test"><img src="https://via.placeholder.com/300" /></a>
<br/>
<p class="font-size-sm">Linked by adding :href to options</p>Tooltipped and linked
= ui.nfg :avatar, image: 'https://via.placeholder.com/300', href: '#test', tooltip: 'Test Tooltip'
%br
= ui.nfg :typeface, caption: 'Tooltipped and linked'<a class="avatar avatar-md" data-toggle="tooltip" data-placement="top" data-html="true" href="#test" title="Test Tooltip"><img src="https://via.placeholder.com/300" /></a>
<br/>
<p class="font-size-sm">Tooltipped and linked</p>Small avatars, set using :sm trait
KM
No options
= ui.nfg :avatar, :sm, body: 'KM'
%br
= ui.nfg :typeface, caption: 'No options'<div class="avatar avatar-sm"><span class="avatar-text">KM</span></div>
<br/>
No options
KM
Manually set body via do block
= ui.nfg :avatar, :sm do
KM
%br
= ui.nfg :typeface, caption: 'Manually set body via do block'<div class="avatar avatar-sm"><span class="avatar-text">KM
</span></div>
<br/>
<p class="font-size-sm">Manually set body via do block</p>
KM
Linked by adding :href to options
<a class="avatar avatar-sm" href="#test"><span class="avatar-text">KM</span></a>
<br/>
<p class="font-size-sm">Linked by adding :href to options</p>= ui.nfg :avatar, :sm, body: 'KM', href: '#test', tooltip: 'Test Tooltip'
%br
= ui.nfg :typeface, caption: 'Tooltipped and linked'<a class="avatar avatar-sm" data-toggle="tooltip" data-placement="top" data-html="true" href="#test" title="Test Tooltip"><span class="avatar-text">KM</span></a>
<br/>
<p class="font-size-sm">Tooltipped and linked</p>No options
= ui.nfg :avatar, :sm, image: 'https://via.placeholder.com/300'
%br
= ui.nfg :typeface, caption: 'No options'<div class="avatar avatar-sm"><img src="https://via.placeholder.com/300" /></div>
<br/>
<p class="font-size-sm">No options</p>Linked by adding :href to options
= ui.nfg :avatar, :sm, image: 'https://via.placeholder.com/300', href: '#test'
%br
= ui.nfg :typeface, caption: 'Linked by adding :href to options'<a class="avatar avatar-sm" href="#test"><img src="https://via.placeholder.com/300" /></a>
<br/>
<p class="font-size-sm">Linked by adding :href to options</p>Tooltipped and linked
= ui.nfg :avatar, :sm, image: 'https://via.placeholder.com/300', href: '#test', tooltip: 'Test Tooltip'
%br
= ui.nfg :typeface, caption: 'Tooltipped and linked'<a class="avatar avatar-sm" data-toggle="tooltip" data-placement="top" data-html="true" href="#test" title="Test Tooltip"><img src="https://via.placeholder.com/300" /></a>
<br/>
<p class="font-size-sm">Tooltipped and linked</p>Medium avatars, set using :md trait
KM
No options
= ui.nfg :avatar, :md, body: 'KM'
%br
= ui.nfg :typeface, caption: 'No options'<div class="avatar avatar-md"><span class="avatar-text">KM</span></div>
<br/>
<p class="font-size-sm">No options</p>KM
Manually set body via do block
= ui.nfg :avatar, :md do
KM
%br
= ui.nfg :typeface, caption: 'Manually set body via do block'<div class="avatar avatar-md"><span class="avatar-text">KM
</span></div>
<br/>
<p class="font-size-sm">Manually set body via do block</p>= ui.nfg :avatar, :md, body: 'KM', href: '#test'
%br
= ui.nfg :typeface, caption: 'Linked by adding :href to options'<a class="avatar avatar-md" href="#test"><span class="avatar-text">KM</span></a>
<br/>
<p class="font-size-sm">Linked by adding :href to options</p>= ui.nfg :avatar, :md, body: 'KM', href: '#test', tooltip: 'Test Tooltip'
%br
= ui.nfg :typeface, caption: 'Tooltipped and linked'<a class="avatar avatar-md" data-toggle="tooltip" data-placement="top" data-html="true" href="#test" title="Test Tooltip"><span class="avatar-text">KM</span></a>
<br/>
<p class="font-size-sm">Tooltipped and linked</p>No options
= ui.nfg :avatar, :md, image: 'https://via.placeholder.com/300'
%br
= ui.nfg :typeface, caption: 'No options'<div class="avatar avatar-md"><img src="https://via.placeholder.com/300" /></div>
<br/>
<p class="font-size-sm">No options</p>Linked by adding :href to options
= ui.nfg :avatar, :md, image: 'https://via.placeholder.com/300', href: '#test'
%br
= ui.nfg :typeface, caption: 'Linked by adding :href to options'<a class="avatar avatar-md" href="#test"><img src="https://via.placeholder.com/300" /></a>
<br/>
<p class="font-size-sm">Linked by adding :href to options</p>Tooltipped and linked
= ui.nfg :avatar, :md, image: 'https://via.placeholder.com/300', href: '#test', tooltip: 'Test Tooltip'
%br
= ui.nfg :typeface, caption: 'Tooltipped and linked'<a class="avatar avatar-md" data-toggle="tooltip" data-placement="top" data-html="true" href="#test" title="Test Tooltip"><img src="https://via.placeholder.com/300" /></a>
<br/>
<p class="font-size-sm">Tooltipped and linked</p>Large avatars, set using :lg trait
KM
No options
= ui.nfg :avatar, :lg, body: 'KM'
%br
= ui.nfg :typeface, caption: 'No options'<div class="avatar avatar-lg"><span class="avatar-text">KM</span></div>
<br/>
<p class="font-size-sm">No options</p>KM
Manually set body via do block
= ui.nfg :avatar, :lg do
KM
%br
= ui.nfg :typeface, caption: 'Manually set body via do block'<div class="avatar avatar-lg"><span class="avatar-text">KM
</span></div>
<br/>
<p class="font-size-sm">Manually set body via do block</p>= ui.nfg :avatar, :lg, body: 'KM', href: '#test'
%br
= ui.nfg :typeface, caption: 'Linked by adding :href to options'<a class="avatar avatar-lg" href="#test"><span class="avatar-text">KM</span></a>
<br/>
<p class="font-size-sm">Linked by adding :href to options</p>= ui.nfg :avatar, :lg, body: 'KM', href: '#test', tooltip: 'Test Tooltip'
%br
= ui.nfg :typeface, caption: 'Tooltipped and linked'<a class="avatar avatar-lg" data-toggle="tooltip" data-placement="top" data-html="true" href="#test" title="Test Tooltip"><span class="avatar-text">KM</span></a>
<br/>
<p class="font-size-sm">Tooltipped and linked</p>No options
= ui.nfg :avatar, :lg, image: 'https://via.placeholder.com/300'
%br
= ui.nfg :typeface, caption: 'No options'<div class="avatar avatar-lg"><img src="https://via.placeholder.com/300" /></div>
<br/>
<p class="font-size-sm">No options</p>Linked by adding :href to options
= ui.nfg :avatar, :lg, image: 'https://via.placeholder.com/300', href: '#test'
%br
= ui.nfg :typeface, caption: 'Linked by adding :href to options'<a class="avatar avatar-lg" href="#test"><img src="https://via.placeholder.com/300" /></a>
<br/>
<p class="font-size-sm">Linked by adding :href to options</p>Tooltipped and linked
= ui.nfg :avatar, :lg, image: 'https://via.placeholder.com/300', href: '#test', tooltip: 'Test Tooltip'
%br
= ui.nfg :typeface, caption: 'Tooltipped and linked'<a class="avatar avatar-lg" data-toggle="tooltip" data-placement="top" data-html="true" href="#test" title="Test Tooltip"><img src="https://via.placeholder.com/300" /></a>
<br/>
<p class="font-size-sm">Tooltipped and linked</p>X-Large avatars, set using :xl trait
KM
No options
= ui.nfg :avatar, :xl, body: 'KM'
%br
= ui.nfg :typeface, caption: 'No options'<div class="avatar avatar-xl"><span class="avatar-text">KM</span></div>
<br/>
<p class="font-size-sm">No options</p>KM
Manually set body via do block
= ui.nfg :avatar, :xl do
KM
%br
= ui.nfg :typeface, caption: 'Manually set body via do block'<div class="avatar avatar-xl"><span class="avatar-text">KM
</span></div>
<br/>
<p class="font-size-sm">Manually set body via do block</p>= ui.nfg :avatar, :xl, body: 'KM', href: '#test'
%br
= ui.nfg :typeface, caption: 'Linked by adding :href to options'<a class="avatar avatar-xl" href="#test"><span class="avatar-text">KM</span></a>
<br/>
<p class="font-size-sm">Linked by adding :href to options</p>= ui.nfg :avatar, :xl, body: 'KM', href: '#test', tooltip: 'Test Tooltip'
%br
= ui.nfg :typeface, caption: 'Tooltipped and linked'<a class="avatar avatar-xl" data-toggle="tooltip" data-placement="top" data-html="true" href="#test" title="Test Tooltip"><span class="avatar-text">KM</span></a>
<br/>
<p class="font-size-sm">Tooltipped and linked</p>No options
= ui.nfg :avatar, :xl, image: 'https://via.placeholder.com/300'
%br
= ui.nfg :typeface, caption: 'No options'<div class="avatar avatar-xl"><img src="https://via.placeholder.com/300" /></div>
<br/>
<p class="font-size-sm">No options</p>Linked by adding :href to options
= ui.nfg :avatar, :xl, image: 'https://via.placeholder.com/300', href: '#test'
%br
= ui.nfg :typeface, caption: 'Linked by adding :href to options'<a class="avatar avatar-xl" href="#test"><img src="https://via.placeholder.com/300" /></a>
<br/>
<p class="font-size-sm">Linked by adding :href to options</p>Tooltipped and linked
= ui.nfg :avatar, :xl, image: 'https://via.placeholder.com/300', href: '#test', tooltip: 'Test Tooltip'
%br
= ui.nfg :typeface, caption: 'Tooltipped and linked'<a class="avatar avatar-xl" data-toggle="tooltip" data-placement="top" data-html="true" href="#test" title="Test Tooltip"><img src="https://via.placeholder.com/300" /></a>
<br/>
<p class="font-size-sm">Tooltipped and linked</p>