{"title":"Atoms\/Image","parameters":{"componentSubtitle":"Bootstrap Image component","docs":{"description":{"component":"Image component with responsive behavior for the system image."},"story":{"inline":true}}},"argTypes":{"align":{"name":"Aligning images","description":"(optional) Align images with the helper float classes or text alignment classes. block-level images can be centered using the `.mx-auto` margin utility class.","defaultValue":"","control":"select","options":{"'- none -'":"","Start":"start","Center":"center","End":"end"}},"responsive":{"name":"Responsive image","description":"(optional) Images in Bootstrap are made responsive with `.img-fluid`. This applies max-width with 100% and height with auto to the image so that it scales with the parent width.","defaultValue":false,"control":"boolean"},"thumbnails":{"name":"Image thumbnails","description":"(optional) In addition to Bootstrap border-radius utilities, you can use `.img-thumbnail` to give an image a rounded 1px border appearance.","defaultValue":false,"control":"boolean"},"rounded":{"name":"Rounded image","defaultValue":false,"control":"boolean"},"image_utility_classes":{"name":"Utility Classes","description":"An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.","control":"object","defaultValue":[]},"attributes":{"name":"Attributes","description":"HTML attributes for the containing element.","control":"object","defaultValue":[]}},"stories":[{"name":"Image","args":{"align":"","responsive":true,"thumbnails":false,"rounded":false,"image_utility_classes":[],"attributes":{"src":"https:\/\/raw.githubusercontent.com\/Vardot\/varbase_media_demo\/10.0.0\/content\/file\/coworking-1.jpg"}},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL2F0b21zXC9pbWFnZVwvaW1hZ2Uuc3Rvcmllcy50d2lnIiwiaWQiOiJJbWFnZURlZmF1bHQifQ%3D%3D"}}},{"name":"Thumbnails","args":{"align":"","responsive":true,"thumbnails":true,"rounded":false,"image_utility_classes":[],"attributes":{"src":"https:\/\/raw.githubusercontent.com\/Vardot\/varbase_media_demo\/10.0.0\/content\/file\/avatar-1.jpg"}},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL2F0b21zXC9pbWFnZVwvaW1hZ2Uuc3Rvcmllcy50d2lnIiwiaWQiOiJJbWFnZVRodW1ibmFpbHMifQ%3D%3D"}}},{"name":"Rounded","args":{"align":"","responsive":true,"thumbnails":false,"rounded":true,"image_utility_classes":[],"attributes":{"src":"https:\/\/raw.githubusercontent.com\/Vardot\/varbase_media_demo\/10.0.0\/content\/file\/avatar-1.jpg"}},"parameters":{"server":{"id":"eyJwYXRoIjoidGhlbWVzXC9jb250cmliXC92YXJ0aGVtZV9iczVcL2NvbXBvbmVudHNcL2F0b21zXC9pbWFnZVwvaW1hZ2Uuc3Rvcmllcy50d2lnIiwiaWQiOiJJbWFnZVJvdW5kZWQifQ%3D%3D"}}}]}