Chips[ Variable Reference ]

Jellyfish contains simple styles for chips; elements which can be used to display relevant information to the side of a parent or independently. They are sized with em units, to scale based on the parent.

Heading 1 Chip

Heading 2 Chip

Heading 3 Chip

Heading 4 Chip

Heading 5 Chip

Heading 6 Chip

Paragraph Chip

A stand-alone chip

Chip List

Wrap chips in an element with class .chip-list to group them into a list. Chips in a chip list have consistent spacing and will wrap over multiple lines.

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty

Chip Group

Wrap two or more chips in a .chip-group class to group them together.

Species of Jellyfish found in the UK 6

Species of Jellyfish found worldwide 2,000 (~ 300,000 undiscovered)

Colors and Outlines

Use modifier classes to change the coloring / semantics of the chip, or to display the chip as an outlined chip.

Normal Outline Primary Primary Outline Secondary Secondary Outline Success Success Outline Warning Warning Outline Error Error Outline

Nesting Chips

Chips can be nested...

Heading 2 Notifications 5

Heading 2 Errors 14

Heading 2 OK That'senough!

Create-your-own

It's easy to create chips with additional color schemes; simply add a new color to the $colors SCSS map. As with buttons, Jellyfish will automatically determine the best text color for the chip based on the contrast ratio against the chip background color.