Skip to content
WC-2026

Component Examples

apps/docs/src/content/docs/components/examples Click to copy
Copied! apps/docs/src/content/docs/components/examples

Live component examples will be available once the component library is implemented in Phase 2. Below are usage patterns from the specification.

Card Component

Section titled “Card Component”
<wc-card variant="elevated">
  <wc-heading level="3" slot="header">
    Patient Resources
  </wc-heading>
  <wc-text>
    Access healthcare information, appointment scheduling,
    and support services.
  </wc-text>
  <wc-button slot="actions" variant="primary">
    Learn More
  </wc-button>
</wc-card>

Alert Component

Section titled “Alert Component”
<wc-alert variant="info" dismissible>
  <wc-icon name="info-circle" slot="icon"></wc-icon>
  New flu vaccines are now available at all locations.
</wc-alert>


<wc-alert variant="warning">
  <wc-icon name="alert-triangle" slot="icon"></wc-icon>
  This facility is currently at capacity. Please check back later.
</wc-alert>

Accordion Component

Section titled “Accordion Component”
<wc-accordion>
  <wc-accordion-item heading="What insurance do you accept?">
    We accept Medicare, Medicaid, and most major private insurance plans.
  </wc-accordion-item>
  <wc-accordion-item heading="How do I schedule an appointment?">
    Call our scheduling line or use the online patient portal.
  </wc-accordion-item>
</wc-accordion>

Form Components

Section titled “Form Components”
<form>
  <wc-input
    label="Full Name"
    required
    error-message="Please enter your name"
  ></wc-input>


  <wc-select label="Department" required>
    <option value="">Select a department</option>
    <option value="primary">Primary Care</option>
    <option value="cardiology">Cardiology</option>
    <option value="oncology">Oncology</option>
  </wc-select>


  <wc-textarea
    label="Additional Notes"
    rows="4"
    maxlength="500"
  ></wc-textarea>


  <wc-button type="submit" variant="primary">
    Submit Request
  </wc-button>
</form>

Drupal TWIG Integration

Section titled “Drupal TWIG Integration”
{# Drupal template using WC-2026 components #}
<wc-card variant="{{ content.field_card_variant.0['#markup'] }}">
  <wc-heading level="3" slot="header">
    {{ content.field_title }}
  </wc-heading>
  {{ content.field_body }}
  {% if content.field_cta_url %}
    <wc-button slot="actions" variant="primary"
      href="{{ content.field_cta_url.0['#url'] }}">
      {{ content.field_cta_text }}
    </wc-button>
  {% endif %}
</wc-card>

Next Steps

Section titled “Next Steps”