Components

Compare

1.0.0

Requires Celeste 1.1.0

Before

After

Install or Update

wp celeste pull component Compare

Dependencies will automatically be installed.

External Dependencies

Before using this, you’ll need to install the external dependencies:

npm install two-up-element

Properties

Prop	Description
`orientation`	`horizontal` or `vertical`

How to use it

<Compare>
    <div class="grid">
        <img class="col-start-1 row-start-1" src="https://unsplash.it/1000?random=1" alt="" />
        <div class="col-start-1 row-start-1 flex items-end p-md">
            <Badge>Before</Badge>
        </div>
    </div>
    <div class="grid">
        <img class="col-start-1 row-start-1" src="https://unsplash.it/1000?random=2" alt="" />
        <div class="col-start-1 row-start-1 flex items-end justify-end p-md">
            <Badge>After</Badge>
        </div>
    </div>
</Compare>