Using panelsets

How to add panelsets in plain markdown posts.

By Alison Hill in Theme features

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: