Pop

Pop is a popup system for displaying content.

Default

The most basic mark-up.

Pop content.

<ca-pop>
  <button slot="pop-button">Open pop</button>
  <div slot="pop-content">Pop content.</div>
</ca-pop>

With fancier styles

Use the ca-button class to add button styles to the pop button. We can also include an icon.

Pop content.

<ca-pop>
  <button class="ca-button" slot="pop-button">
    Open pop
    <ca-icon name="arrow-down"></ca-icon>
  </button>
  <div slot="pop-content">Pop content.</div>
</ca-pop>

With direction

Use the direction attribute to change the direction of the pop. Also note the change in icon.

Pop content.

<ca-pop direction="up">
  <button class="ca-button" slot="pop-button">
    Open up
    <ca-icon name="arrow-up"></ca-icon>
  </button>
  <div slot="pop-content">Pop content.</div>
</ca-pop>
<hr />
<ca-pop direction="right">
  <button class="ca-button" slot="pop-button">
    Open right
    <ca-icon name="arrow-right"></ca-icon>
  </button>
  <div slot="pop-content">Pop content.</div>
</ca-pop>
<hr />
<ca-pop direction="left">
  <button class="ca-button" slot="pop-button">
    <ca-icon name="arrow-left"></ca-icon>
    Open left
  </button>
  <div slot="pop-content">Pop content.</div>
</ca-pop>