Round Images
Originally image sizes:
- Cat 960 x 960
- Pixelated Tweetie 315 x 315
Rounded images for all or just in a list style
This style is designed to make your pages feel more interesting without a distracting amount of ongoing changes to the page. The round style alone will affect all images within that section, and the list_round_{size} style will only affect images within a list. You can use the list_round style with many of our list styles (boxes, cards, and catalog, for example) for an extra flourish.
TIP: The more square your image, the better it will be rounded. Otherwise, you end up with an oval shape.
CSS Style
round
Round for all
These images will be 100% the size of the image, or 100% size of the space, whichever is smaller (this also depends on other styles applied or template choice). These images were sized to 250 x 250 for this example.
CSS Style
list_round_100
With list_box_medBlue
-
HEADER 2
-
Header 3
-
Link 1
-
Text under here
CSS Style
list_round_150
With list_cards_lightBlue
-
HEADER 2
-
Header 3
-
Link 1
-
Text under here
CSS Style
list_round_200
With list_cards_gray
-
HEADER 2
-
Header 3
-
Link 1
-
Text under here
CSS Style
list_round_250
Getting Bigger
See below for this style. As the image size gets better, the more space is required.
With list_boxes_orange
-
HEADER 2
-
Header 3
-
Link 1
-
Text under here
CSS Style
list_round_300
list_round_350
And bigger
Below you will find the 300 size version. The 350 size version will only be usuable if you are using the max width template body style.
With list_cards_black
-
HEADER 2
-
Header 3
-
Link 1
-
Text under here
