Boomla UI kit
Full-width blocks
Text Gallery Features Testimonials Team Pricing Call to action Alert Contact form F.A.Q. Info header Breadcrumbs Footer
Elements
Top menu Left menu Subpage list Breadcrumbs Button Button group Image shaper rectangle Image shaper circle Feature Gallery Slideshow Testimonial v1 Testimonial v2 Icon Social icon group Text Display text List Contact form Subscribe Call request Alert Separator F.A.Q. (accordion) Tabs File attachments Anchor Metadata Google Analytics Powered by Boomla
Layouts
Grid Space Horizontal container Hero layout Paper Paper 2 Group Responsive show/hide Background Card Scroll container Page layout 1

Image shaper circle

Crop an image into a circular shape.

Configure:

  • max width

     

  • shadow

  • alt tag

  • url, open in new window

 

Max container width

Customize how large the image can be at most. If there is less space, the image container will always shrink to be no bigger than that.

 

Image title
Image title
Image title

Shadow

You can configure to use various shadows. Let's look at matching various images with various shadows. Notice that not all pairings look good.

 

Image title

none

Image title

increased contrast

Image title

shadow 8px 60%

Image title

none

Image title

increased contrast

Image title

shadow 8px 60%

Image title

none

Image title

increased contrast

Image title

shadow 8px 60%

Linkable, open in new window

You can turn the image into a clickable link. Optionally make it open in a new window.

 

ALT tag

You can customize the ALT tag. It is technically a HTML attribute used to tell robots and screen readers what the image contains. It is also used as a placeholder for the image in case the image can not be loaded.

You can only observe the alt tag by looking at the source code of this page. The alt tag of the image below is set to Custom alt tag.

 

Custom alt tag

Empty state