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 adapted into Hugo Shortcodes
For example, this panelset:
Hello! 👋
Hello ! You can put markdown content, it will be nicely rendered 😄
Goodbye 💨
goodbye
Was created by combining this theme’s panelset and panel shortcodes:
{{< panelset class="greetings" >}}
{{% panel name="Hello! :wave:" %}}
__Hello__ ! You can put `markdown` content, it will be nicely rendered 😄
{{% /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>