UI Components

{{{ sdk.ui.menu('primary') }}}

<nav class="menu menu-primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li class="has-children">
      <a href="/about">About</a>
      <ul class="submenu">
        <li><a href="/about/team">Team</a></li>
        <li><a href="/about/contact">Contact</a></li>
      </ul>
    </li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

{{{ sdk.ui.menu('primary', { 
  class: 'main-nav',
  depth: 2,
  activeClass: 'current'
}) }}}

{{{ sdk.ui.breadcrumbs() }}}

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category/tech">Technology</a></li>
    <li aria-current="page">Current Post Title</li>
  </ol>
</nav>

{{{ sdk.ui.breadcrumbs({ 
  separator: '›',
  homeText: 'Start',
  class: 'my-breadcrumbs'
}) }}}

<aside class="sidebar">
  {{{ sdk.ui.widgetArea('sidebar') }}}
</aside>

<footer>
  <div class="footer-widgets">
    {{{ sdk.ui.widgetArea('footer-1') }}}
    {{{ sdk.ui.widgetArea('footer-2') }}}
    {{{ sdk.ui.widgetArea('footer-3') }}}
  </div>
</footer>

{{{ sdk.ui.pagination({ 
  current: pagination.current, 
  total: pagination.total,
  baseUrl: '/blog/page/'
}) }}}

<nav class="pagination" aria-label="Pagination">
  <a href="/blog/page/1" class="pagination-prev">Previous</a>
  <a href="/blog/page/1">1</a>
  <a href="/blog/page/2">2</a>
  <span class="pagination-current">3</span>
  <a href="/blog/page/4">4</a>
  <a href="/blog/page/5">5</a>
  <span class="pagination-ellipsis">...</span>
  <a href="/blog/page/10">10</a>
  <a href="/blog/page/4" class="pagination-next">Next</a>
</nav>

{{{ sdk.ui.pagination({ 
  current: 3, 
  total: 10,
  baseUrl: '/blog/page/',
  prevText: '← Prev',
  nextText: 'Next →',
  maxVisible: 7,
  class: 'my-pagination'
}) }}}

{{{ sdk.ui.searchForm() }}}

<form class="search-form" action="/search" method="GET">
  <input type="search" name="q" placeholder="Search..." aria-label="Search">
  <button type="submit">Search</button>
</form>

{{{ sdk.ui.searchForm({ 
  placeholder: 'Find articles...',
  buttonText: 'Go',
  class: 'header-search'
}) }}}

{{{ sdk.ui.shareButtons(post.url, post.title) }}}

<div class="share-buttons">
  <a href="https://facebook.com/sharer/sharer.php?u=..." target="_blank" rel="noopener" class="share-btn share-facebook">Facebook</a>
  <a href="https://twitter.com/intent/tweet?url=..." target="_blank" rel="noopener" class="share-btn share-twitter">Twitter</a>
  <a href="https://pinterest.com/pin/create/button/?url=..." target="_blank" rel="noopener" class="share-btn share-pinterest">Pinterest</a>
</div>

{{{ sdk.ui.shareButtons(post.url, post.title, {
  platforms: ['facebook', 'twitter', 'linkedin', 'email'],
  showLabels: false,
  class: 'post-share'
}) }}}

{% posts.forEach(post => { %}
  {{{ sdk.ui.postCard(post) }}}
{% }) %}

<article class="post-card">
  <a href="/post-slug" class="post-card__image">
    <img src="/uploads/image.jpg" alt="Post Title">
  </a>
  <div class="post-card__content">
    <a href="/category/tech" class="post-card__category">Technology</a>
    <h3 class="post-card__title">
      <a href="/post-slug">Post Title</a>
    </h3>
    <p class="post-card__excerpt">Post excerpt text...</p>
    <div class="post-card__meta">
      <time>March 15, 2024</time>
    </div>
  </div>
</article>

{{{ sdk.ui.postCard(post, {
  showImage: true,
  showCategory: true,
  showExcerpt: true,
  showDate: true,
  showAuthor: false,
  excerptLength: 100,
  imageSize: 'medium',
  class: 'featured-card'
}) }}}

{{{ sdk.ui.categoryList() }}}

<ul class="category-list">
  <li><a href="/category/tech">Technology</a> <span class="count">(15)</span></li>
  <li><a href="/category/design">Design</a> <span class="count">(8)</span></li>
  <li><a href="/category/business">Business</a> <span class="count">(12)</span></li>
</ul>

{{{ sdk.ui.categoryList({
  showCount: true,
  orderBy: 'name', // 'name', 'count'
  limit: 10,
  class: 'sidebar-categories'
}) }}}

{{{ sdk.ui.tagCloud() }}}

<div class="tag-cloud">
  <a href="/tag/javascript" class="tag tag-size-5">JavaScript</a>
  <a href="/tag/css" class="tag tag-size-3">CSS</a>
  <a href="/tag/react" class="tag tag-size-4">React</a>
  ...
</div>

{{{ sdk.ui.contactForm() }}}

<form class="contact-form" action="/api/contact" method="POST">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  <button type="submit">Send Message</button>
</form>

{{{ sdk.ui.contactForm({
  fields: ['name', 'email', 'phone', 'subject', 'message'],
  submitText: 'Send',
  successMessage: 'Thanks! We\'ll be in touch.',
  class: 'styled-form'
}) }}}

{{{ sdk.ui.newsletterForm() }}}

{{{ sdk.ui.newsletterForm({
  placeholder: 'Enter your email',
  buttonText: 'Subscribe',
  class: 'footer-newsletter'
}) }}}

{{{ sdk.ui.image(post.featuredImage, {
  alt: post.title,
  sizes: '(max-width: 768px) 100vw, 50vw',
  loading: 'lazy',
  class: 'post-image'
}) }}}

<img 
  src="/uploads/image.jpg"
  srcset="/uploads/image-400.jpg 400w, /uploads/image-800.jpg 800w, /uploads/image-1200.jpg 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Post Title"
  loading="lazy"
  class="post-image"
>

{{{ sdk.ui.gallery(post.gallery, {
  columns: 3,
  lightbox: true,
  class: 'post-gallery'
}) }}}

{{{ sdk.ui.authorBox(post.author) }}}

<div class="author-box">
  <img src="/avatars/john.jpg" alt="John Doe" class="author-avatar">
  <div class="author-info">
    <h4 class="author-name">John Doe</h4>
    <p class="author-bio">Writer and developer passionate about web technologies.</p>
    <div class="author-social">
      <a href="https://twitter.com/johndoe">Twitter</a>
      <a href="https://github.com/johndoe">GitHub</a>
    </div>
  </div>
</div>

{{{ sdk.ui.comments(post.id) }}}

{{{ sdk.ui.menu('primary', { class: 'my-custom-nav' }) }}}
{{{ sdk.ui.pagination(data, { class: 'custom-pagination' }) }}}
{{{ sdk.ui.searchForm({ class: 'header-search-form' }) }}}