Clip

June 9, 2017bywebsevendev

Elements rendered with shortcodes can be clipped using the clip argument. Clipping changes the top/bottom angle of the element.

`clip [ n ]`	Clip the top and bottom.
`clip [ n \| 0 ]`	Clip the top.
`clip [ 0 \| n ]`	Clip the bottom.

Clipped images

[image inverted src="//placehold.co/150x150" clip="1"]
[image inverted src="//placehold.co/150x150" clip="-1"]

Clipped from the top

[image inverted src="//placehold.co/150x150" clip="2 0"]
[image inverted src="//placehold.co/150x150" clip="-2 0"]

Clipped from the bottom

[image inverted src="//placehold.co/150x150" clip="0 3"]
[image inverted src="//placehold.co/150x150" clip="0 -3"]

Clipped front page composite

Lorem ipsum dolor sit amet.

[segment borderless feature alternate vertical stripe clip="4 -2"]
  [container three column center aligned relaxed stackable grid]
    [row]
      [column]
        [header large icon icon="code"]Lorem[/header]
        [p]Lorem ipsum dolor sit amet.[/p]
        [button large]Ipsum[/button]
      [/column]
      [column]
        [header large icon icon="upload"]Ipsum[/header]
        [p]Lorem ipsum dolor sit amet.[/p]
        [button large primary]Dolor[/button]
      [/column]
      [column]
        [header large icon icon="paint brush"]Dolor[/header]
        [p]Lorem ipsum dolor sit amet.[/p]
        [button large]Lorem[/button]
      [/column]
    [/row]
  [/container]
[/segment]

Top clipped front page composite

[segment alternate vertical stripe clip="-9 0"]
  [container center aligned stackable grid]
    [column fourteen wide]
      [header huge paddingless icon icon="bullhorn"]Lorem ipsum dolor[subheader normal]Lorem ipsum dolor sit ipsum sit dolor amet.[/subheader][/header]
      [p][button huge marginless positive right labeled icon icon="right arrow"]Let's do this![/button][/p]
    [/column]
  [/container]
[/segment]