Chip
Bootstrap 4 Chip with Material Design UI
Chip component is a small, interactive element. Chip is commonly used for contacts, text, rules, icons, and photos.
Basic Chip
To create a chip add .pmd-chip
to the tag.
Example Chip
close
Chip with Icon
You can also create a chip with an icon.
mood
Example Chip
close
Chip with Avatar
To create chip that contain images, add .pmd-chip-contact
to the image.
Trevor Hensen
close
Contextual Chips
To create contextual chip, use .pmd-chip-*
class.
Contextual Outline Chips
To create an outline contextual chip, use .pmd-chip-outline-*
class.
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the Badge. The table lists the available classes and their effects.
Classes | Effect | Remark |
---|---|---|
.pmd-chip |
Add this class to create chips. | Required |
.pmd-chip-contact |
Add this class to create chips with an image/icon. | Optional |
.pmd-chip-action |
Add this class to the close button to remove the chip. | Optional |
.pmd-chip-* |
Add this class to the create a contextual chip. | Optional |
.pmd-chip-outline-* |
Add this class to the create an outline contextual chip. | Optional |