Using panelsets

How to add panelsets in plain markdown posts.

By Alison Hill in Theme features

January 2, 2021

Courtesy of panelset.js by Garrick Aden-Buie, from his xaringanExtra package: https://pkg.garrickadenbuie.com/xaringanExtra/#/panelset

For example, this panelset:

Hello! 👋

hello

Goodbye 💨

goodbye

Was created by combining this theme’s panelset and panel shortcodes:

{{< panelset class="greetings" >}}
{{< panel name="Hello! :wave:" >}}
  hello
{{< /panel >}}
{{< panel name="Goodbye :dash:" >}}
  goodbye
{{< /panel >}}
{{< /panelset >}}

You could also revert to HTML as well. For example, this panelset:

Question

Which came first: the 🐔 or the 🥚?

Answer 🐣

Team 🥚 FTW!

Was created with this HTML code:

<div class="panelset">
  <div class="panel">
    <div class="panel-name">Question</div>
    <!-- Panel content -->
    <p>Which came first: the 🐔 or the 🥚?</p>
  </div>
  <div class="panel">
    <div class="panel-name">Answer 🐣</div>
    <!-- Panel content -->
    <p>Team 🥚 FTW!</p>
  </div>
</div>
Posted on:
January 2, 2021
Length:
1 minute read, 121 words
Categories:
Theme features
See Also: