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
Placeholder image
Placeholder image
<image inverted src="//placehold.it/150" clip="1">
<image inverted src="//placehold.it/150" clip="-1">
Clipped from the top
Placeholder image
Placeholder image
<image inverted src="//placehold.it/150" clip="2 0">
<image inverted src="//placehold.it/150" clip="-2 0">
Clipped from the bottom
Placeholder image
Placeholder image
<image inverted src="//placehold.it/150" clip="0 3">
<image inverted src="//placehold.it/150" 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>

Leave a comment

Your email address will not be published. Required fields are marked *