ns-illustration
#
IntroductionIllustrations are visual symbols used to bring the warmth of British Gas brand and personality to the website.
Illustrations simplify products and services to users in a friendly manner. Illustrations always accompany content.
#
Best practice๐ Do's | ๐ Don'ts |
---|---|
Use them to convey depth | Make the illustrations small |
Use on their own as the primary visual element |
#
Considerations of best practices- List of when to use which illustration (need to talk to Will about it).
#
Usage#
Component placementThe ns-illustration component can be used in a number of components to help create bespoke UIs.
#
SpecificationAttribute | Type | Default | Options | Description |
---|---|---|---|---|
type | string | gas | appliance , boiler , boilerRepair , bulb , centralHeating , clock , dualFuel , electrics , electricVehicle , engineer , gas , help , home , oven , pipeAndDrain , protect , tap , savings , yellowShield See Illustration component in Storybook | Picks the illustration that is to be shown. |
size | number | '' | '' , 1 , 2 , 3 , 4 , 5 | Changes the size of the illustration, with 1 being the smallest. |
inactive | string | false | true , false | Will grey out the illustration. |
#
Specification notes#
Size- If you pass an empty size the icon will fill the parent element
#
Inactive- This is for decorative purposes only (does not work in IE11).
#
Creating new illustrationsIf you are looking to create a new illustration then please check there is not something similar already in use. If there is no suitable illustration then you should let us know and we can look at creating it for the design system.
Read our illustration foundation page for more information on creating illustrations.
#
Feedback- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
๐ฉ ๐ ๐ฆ You can also contact the team on Slack on the #product-nucleus
channel!
#
Related links- Exporting illustrations SVG in Sketch https://github.com/ConnectedHomes/nucleus/issues/670.
- Creating an engaging experience through illustrations and the difference between icons and illustrations in Brand Guidelines.