Shape blocks with outlined borders

Note: Always check mobile and make adjustments!

Instructions below involve adding a shape block, selecting rectangle and then adjusting the top left radius value to a set amount (the dotted square value underneath the shape block)

Add an outlined rectangle border

  1. Add a block

  2. Choose shape

  3. Select the rectangle shape and set the first radius value to 1

  4. add an image block and drag it overtop

  5. Add the words: “inset-image” to filename area of image content tab area

Options to change in CSS area:

The pixel width of the outline or size

@outline-size-1: 1px;

// image inset amount - amount of space around image

@imageinset-amount: 10px;

Line options

All of these options use the rectangle shape

  1. Add a block

  2. Choose shape

  3. Select the first option which is the rectangle

  4. Select the desired color

  5. The stretch option can be toggled on or off (will not apply)

  6. Change the first value of the individual radius settings (the second option as shown below) to the exact value noted below to get the effect

Vertical line on desktop and horizontal on mobile

Top left radius set to 101

drag frame to adjust height of line on desktop and mobile

options to adjust line width:

in Design -> CSS there is a variable called @verticallinewidth. Set this to the desired width in px.

ie @verticallinewidth : 2px;

(can change 2 to a different value)

Vertical line on desktop and mobile

Top left radius set to 102

drag frame to adjust height of line on desktop and width on mobile

options to adjust line width:

in Design -> CSS there is a variable called @verticallinewidth. Set this to the desired width in px.

ie @verticallinewidth : 2px;

(can change 2 to a different value)

Diagonal line

Top left radius set to 15

drag frame to adjust height of line on desktop and mobile

options to adjust line width:

in Design -> CSS there is a variable called @diagonallinewidth. Set this to the desired width in px.

ie @diagonallinewidth : 5px;

(can change 5 to a different value)

Horizontal line on desktop and mobile

Top left radius set to :

103 for line aligned at top of block

104 for line aligned in middle of block

105 for line aligned at bottom of block

drag frame to adjust height of line on desktop and mobile

options to adjust line width:

in Design -> CSS there is a variable called @horizontallinewidth. Set this to the desired width in px.

ie @horizontallinewidth : 1px;

(can change 1 to a different value)

Adding borders to regular images that are not using a shape option

  1. Add an image block

  2. On the design tab choose “fill”

  3. add the keyword to the filename

add “imageborder1” to filename area

Adjust border color and size in the CSS panel:

Go to Design -> CSS

find this near the top:

@imageborder1size: 15px;

@imageborder1color: @white;

@imageborder1offset:0px;

Change the 15 to a bigger or smaller number

change @white to any color value

change the offset value to any positive number to push the border away from the image

add “imageborder2” to filename area

Adjust border color and size in the CSS panel:

Go to Design -> CSS

find this near the top:

@imageborder2size: 2px;

@imageborder2color: @dark;

@imageborder2offset:10px;

Change the 2 to a bigger or smaller number

change @dark to any color value

change the offset value to any positive number to push the border away from the image

Add borders to arch shapes

We can fake the look of a border on an arch block by actually adding 2 blocks - a shape block (with arch shape) and layering the image block overtop and selecting the arch shape and adding a keyword to the image

Here are the steps:

  1. Add a shape block then select the pen tool

  2. from the dropdown scroll down and select the arch shape

  3. make sure stretch is toggled on

  4. select the color you want for the border from the color option

  5. Select Shape -> and then select the arch shape

  6. Add an image block

  7. Select Shape and then under 2:3 select the arch

  8. toggle on the stretch option

  9. add either keyword inset-image1 or inset-image2 to the image filename section

  10. The width of the border is controlled in the CSS panel which can be found under Design -> CSS. Look for these variables near the top:

    @imageinset-amount1: 10px;

    @imageinset-amount2: 4px;

    and change the value of the number as desired

  11. drag the image block directly over the arch shape and make the sure the frame sizes match exactly

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fusce non magna non lacus auctor commodo sed eu odio. Sed vitae diam eu tellus bibendum tristique a quis justo. Nam cursus, purus nec placerat consectetur, metus dui pulvinar eros, et mattis ipsum tortor in magna. Etiam in ex quis massa ornare consectetur. Aenean eget egestas est. Nullam blandit interdum porttitor. Donec facilisis turpis sit amet massa vehicula, non lacinia tortor accumsan. Quisque non est vitae tellus mollis luctus in vel eros. Sed vitae velit nec justo pulvinar consequat sit amet eu erat. Duis volutpat lectus in dolor venenatis, a bibendum quam vehicula. Integer tincidunt sapien in nibh ullamcorper, eget porta mauris lacinia. Vivamus ante magna, posuere ut dolor id, congue auctor ipsum. Sed pulvinar auctor arcu, eu pretium nulla venenatis vitae. Aliquam a dui vel lorem volutpat fermentum.