Illustrations

Standard

Illustrations are a great way to use specific sizes for images. ALWAYS include a alt attribute to describe the illustration to screen readers.

Sample Illustration 
= ui.nfg :illustration, :lg, image: 'test_app/send_now_lg.png', alt: 'Sample Illustration'
<img class="illustration illustration-lg" alt="Sample Illustration" src="/assets/test_app/send_now_lg-a78f5972db37e861a4b4c7f13ae5ce04823d15c323b6995e76377d737816295d.png" />
Sizing

There are a multiple sizes for illustrations: x-small, small, medium, large. For now the x-small option doesn't have a corresponding trait and needs a class trait to achieve the sizing.

X-Small Sample Illustration Small Sample Illustration Medium Sample Illustration Large Sample Illustration 
= ui.nfg :illustration, image: 'test_app/send_now_sm.png', alt: 'X-Small Sample Illustration', class: 'illustration-xs'
= ui.nfg :illustration, :sm, image: 'test_app/send_now_sm.png', alt: 'Small Sample Illustration'
= ui.nfg :illustration, image: 'test_app/send_now_lg.png', alt: 'Medium Sample Illustration'
= ui.nfg :illustration, :lg, image: 'test_app/send_now_lg.png', alt: 'Large Sample Illustration'
<img class="illustration illustration-xs" alt="X-Small Sample Illustration" src="/assets/test_app/send_now_sm-05226a3883a999e35e456a7dbc7b8fa7c0b6e864c1ac7a4eebf714507b027ffc.png" /><img class="illustration illustration-sm" alt="Small Sample Illustration" src="/assets/test_app/send_now_sm-05226a3883a999e35e456a7dbc7b8fa7c0b6e864c1ac7a4eebf714507b027ffc.png" /><img class="illustration" alt="Medium Sample Illustration" src="/assets/test_app/send_now_lg-a78f5972db37e861a4b4c7f13ae5ce04823d15c323b6995e76377d737816295d.png" /><img class="illustration illustration-lg" alt="Large Sample Illustration" src="/assets/test_app/send_now_lg-a78f5972db37e861a4b4c7f13ae5ce04823d15c323b6995e76377d737816295d.png" />
Responsive

By default, illustrations have responsive set to false and will not include img-fluid. When responsive is set to true, all of the illustration specific css classes (including sizing) is removed from the image tag.

Sample Illustration 
= ui.nfg :illustration, :responsive, image: 'test_app/send_now_lg.png', alt: 'Sample Illustration'
<img class="img-fluid" alt="Sample Illustration" src="/assets/test_app/send_now_lg-a78f5972db37e861a4b4c7f13ae5ce04823d15c323b6995e76377d737816295d.png" />
Traits

The illustration component has these avaiable traits.

Trait
Options
Example
id:

Adds an ID to the illustration.

id: 'my_id'
= ui.nfg :illustration, id: 'my_id'
class:

Adds a class to the illustration.

class: 'my-class'
= ui.nfg :illustration, class: 'my-class'
describe:

For addding a data-describe to any illustration.

describe: 'test-data-describe'
= ui.nfg :illustration, describe: 'test-data-describe'
image:

For including a path to the file.

image: 'test.png'
= ui.nfg :illustration, image: 'test.png'
src:

For including a path to the file.

src: 'test.png'
= ui.nfg :illustration, src: 'test.png'
size:

Adds a size to the illustration.

:sm
:lg
= ui.nfg :illustration, :sm
alt:

Adds alternate text to the illustration.

alt: 'This is my alt text.'
= ui.nfg :illustration, alt: 'This is my alt text.'
tooltip:

Shows a tooltip on illustration.

tooltip: 'This is my tooltip!'
= ui.nfg :illustration, tooltip: 'Hi there!'
responsive:

Makes the illustration responsive.

responsive: true
= ui.nfg :illustration, :responsive
render_if:

Condition to determine if the illustration shows or not.

render_if: (1==1)
= ui.nfg :illustration, render_if: (1==1)
render_unless:

Condition to determine if the illustration shows or not.

render_unless: (1==1)
= ui.nfg :illustration, render_unless: (1==1)