Panelsets, Part 1
How to add panelsets in plain markdown posts.
By Alison Hill in Theme features
January 2, 2021
Hi, I'm the here-bot cat!
Use me to find your way in your website.
- Here I am:
- content/blog/2021-01-25-panelsets-md/index.md
To remove me, delete this line inside that file: {{< here >}}
- My content section is:
- blog
- My layout is:
- single
- Images in this page bundle:
- /blog/2021-01-25-panelsets-md/featured.jpg
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>