Composition Examples

<?php ws_card_start(['variant' => 'content', 'bordered' => true]); ?>
  <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
    <?= ws_avatar('Jane Doe', ['size' => 'md']) ?>
    <div>
      <div style="font-weight: 600;">Jane Doe</div>
      <div style="font-size: 13px; color: #78716C;">Lead Facilitator</div>
    </div>
    <?= ws_status('Active', 'success') ?>
  </div>
  <div style="display: flex; gap: 8px;">
    <?= ws_badge('Design Sprint', ['variant' => 'category', 'color' => '#3B82F6']) ?>
    <?= ws_badge('Retro', ['variant' => 'category', 'color' => '#EC4899']) ?>
    <?= ws_duration('120+ hours') ?>
  </div>
<?php ws_card_end(); ?>

<section class="section">
  <?= ws_section_header('Everything you need to run', [
      'subtitle' => 'world-class workshops.',
      'description' => 'Workshopr brings the energy of in-person collaboration to your remote team.',
  ]) ?>

  <div class="features-grid">
    <?= ws_feature_card('Curated Library', 'Browse workshops, exercises, and icebreakers.', [
        'icon' => 'menu_book',
    ]) ?>
    <?= ws_feature_card('AI Coach', 'Intelligent recommendations and live coaching.', [
        'icon' => 'smart_toy',
    ]) ?>
    <?= ws_feature_card('Clear Agendas', 'Every workshop includes timing and tips.', [
        'icon' => 'calendar_month',
    ]) ?>
  </div>
</section>

<?= ws_alert('Please fix the errors below.', ['variant' => 'error', 'title' => 'Form Error']) ?>

<form style="display: flex; flex-direction: column; gap: 16px;">
  <?= ws_form_row(ws_input('name'), ['label' => 'Name', 'required' => true]) ?>
  <?= ws_form_row(ws_input('email', ['type' => 'email']), [
      'label' => 'Email', 'required' => true,
      'error' => 'Please enter a valid email address.',
  ]) ?>
  <?= ws_button('Submit', ['variant' => 'primary', 'type' => 'submit']) ?>
</form>

<?= ws_breadcrumb([
    ['label' => 'Home', 'href' => '/'],
    ['label' => 'Workshops', 'href' => '/library/workshops/'],
    ['label' => 'Design Sprint'],
]) ?>

<?= ws_section_header('Design Sprint', [
    'subtitle' => 'by Jake Knapp',
    'description' => 'A 5-day process for answering critical business questions.',
    'align' => 'left',
]) ?>

<div style="display: flex; gap: 8px;">
  <?= ws_category('Strategy', '#3B82F6') ?>
  <?= ws_duration('5 days') ?>
  <?= ws_status('Popular', 'success') ?>
</div>

<?= ws_empty_state('No workshops found', [
    'description' => 'Try adjusting your search or browse all workshops.',
    'icon' => 'search_off',
    'action' => 'Browse All Workshops',
    'actionHref' => '/library/workshops/',
]) ?>

<?= ws_tabs([
    ['id' => 'overview', 'label' => 'Overview', 'active' => true],
    ['id' => 'agenda',   'label' => 'Agenda'],
    ['id' => 'reviews',  'label' => 'Reviews', 'count' => 12],
], ['variant' => 'underline']) ?>

<div id="tab-overview" class="tab-panel active">
  <?php ws_card_start(['variant' => 'content']); ?>
    <p>Workshop overview content...</p>
  <?php ws_card_end(); ?>
</div>

<div id="tab-agenda" class="tab-panel" style="display:none;">
  <?php ws_card_start(['variant' => 'content']); ?>
    <p>Agenda timeline...</p>
  <?php ws_card_end(); ?>
</div>

<div style="display: flex; gap: 40px;">
  <?= ws_stats([
      ['value' => '50+', 'label' => 'Workshops', 'color' => '#E54D4D'],
      ['value' => '120+', 'label' => 'Exercises', 'color' => '#E54D4D'],
  ]) ?>

  <?= ws_checklist([
      'Pre-built agendas for every session',
      'Expert-curated exercise library',
      'AI-powered facilitation coaching',
      'Free to get started',
  ]) ?>
</div>