Clip
Elements rendered with shortcodes can be clipped using the clip argument. Clipping changes the top/bottom angle of the element.
Clip shortcode arguments
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
Lorem ipsum dolor sit amet.
Ipsum
Lorem ipsum dolor sit amet.
Dolor
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
Lorem ipsum dolor
Lorem ipsum dolor sit ipsum sit dolor amet.
<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>