4 posts
The text-rotate shortcode displays text that rotates through a list of words with an infinite loop animation. It’s great for hero sections, taglines, or adding visual interest to your content. Basic Usage # Use the text-rotate shortcode with one word per line: {{< text-rotate >}} ONE TWO THREE {{< /text-rotate >}} ONE TWO THREE Custom Size # The default size is text-xl. Use the size parameter to change it:
The sentence-rotate shortcode displays a sentence with rotating words appended to the end. Each word can have its own color styling. Basic Usage # Use the sentence-rotate shortcode with a sentence parameter and a list of words with optional color classes. Use daisyUI theme colors for consistent styling: {{< sentence-rotate sentence="Providing AI Agents for" >}} Designers | bg-primary text-primary-content Developers | bg-secondary text-secondary-content Managers | bg-accent text-accent-content {{< /sentence-rotate >}} Providing AI Agents for Designers Developers Managers Custom Size # Use the size parameter to change the text size:
The timeline shortcode displays a horizontal timeline of events. Each event consists of a label (left side) and description (right side), connected by visual markers. Basic Usage # Use the timeline shortcode with one event per line in label: description format: {{< timeline >}} 1984: Macintosh PC 1998: iMac 2001: iPod 2007: iPhone 2015: Apple Watch 2024: Vision Pro {{< /timeline >}} 1984 Macintosh PC 1998 iMac 2001 iPod 2007 iPhone 2015 Apple Watch 2024 Vision Pro Using Text Labels # The label doesn’t have to be a year. You can use any text:
The preview shortcode displays HTML in a tabbed interface with a live preview and the source code. It’s useful for documentation and component showcases. Basic Usage # Use the preview shortcode with raw HTML inside: {{< preview >}} <button class="btn btn-primary">Click me</button> {{< /preview >}} Click me <button class="btn btn-primary">Click me</button> Button Group # {{< preview >}} <div class="flex gap-2"> <button class="btn">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-accent">Accent</button> </div> {{< /preview >}} Default Primary Secondary Accent <div class="flex gap-2"> <button class="btn">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-accent">Accent</button> </div> Card Component # {{< preview >}} <div class="card bg-base-200 w-80"> <div class="card-body"> <h2 class="card-title">Card Title</h2> <p>This is a sample card with some content inside.</p> <div class="card-actions justify-end"> <button class="btn btn-primary">Action</button> </div> </div> </div> {{< /preview >}} Card Title This is a sample card with some content inside.