### Install Willow via NPM

Source: https://context7.com/unumux/willow/llms.txt

Commands to install the Willow library and an optional default theme as development dependencies.

```bash
# Install Willow as a development dependency
npm install --save-dev @unumux/willow

# Optional: Install a theme
npm install --save-dev @unumux/theme-unum-default
```

--------------------------------

### Install Willow Theme NPM Package

Source: https://github.com/unumux/willow/blob/master/README.md

Optionally, install a provided theme as a development dependency. Replace 'theme-name-goes-here' with the actual theme name.

```bash
npm install --save-dev @unumux/theme-name-goes-here
```

--------------------------------

### Install Willow NPM Package

Source: https://github.com/unumux/willow/blob/master/README.md

Install Willow as a development dependency using npm. This method requires a tool to compile SCSS to CSS.

```bash
npm install --save-dev @unumux/willow
```

--------------------------------

### Willow-Card HTML Structure Examples

Source: https://github.com/unumux/willow/blob/master/components/card/readme.md

Provides two distinct HTML structures for the Willow-Card component: one using an `<article>` tag for actions and another using an `<a>` tag for a clickable card.

```html
<article class="willow-card">
  <div class="willow-card__image"></div>
  <div class="willow-card__content">
      <div class="willow-card__icon"></div>
      <h1 class="willow-card__heading">Heading Text</h1>
      <div class="willow-card__description">
          <!-- insert content components here -->
      </div>
      <ul class="willow-card__actions">
          <li class="willow-card__action"><!-- insert action component here --></li>
          <li class="willow-card__action"><!-- insert action component here --></li>
      </ul>
  </div>
</article>
```

```html
<a class="willow-card willow-card--link" href="" aria-label="">
  <div class="willow-card__content">
      <div class="willow-card__icon"></div>
      <h1 class="willow-card__heading">Heading Text</h1>
      <div class="willow-card__description">
          <!-- insert content components here -->
      </div>
  </div>
</a>
```

--------------------------------

### Willow-Modal Close State Example

Source: https://github.com/unumux/willow/blob/master/components/modal/readme.md

This example demonstrates how to enable closing the modal by adding the 'data-modal-close="true"' attribute to the main modal section. This attribute controls the modal's closability.

```html
<section class="willow-modal" data-modal-close="true">
</section>
```

--------------------------------

### HTML Snippets for Willow-Icons

Source: https://github.com/unumux/willow/blob/master/components/icons/readme.md

These examples demonstrate various Willow-Icons with different modifiers. Ensure a modifier class is added to the 'willow-icon' class for the icon to display.

```html
<span class="willow-icon willow-icon--menu"></span>
```

```html
<span class="willow-icon willow-icon--menu-inverse"></span>
```

```html
<span class="willow-icon willow-icon--menu-close"></span>
```

```html
<span class="willow-icon willow-icon--menu-close-inverse"></span>
```

```html
<span class="willow-icon willow-icon--close"></span>
```

```html
<span class="willow-icon willow-icon--close-inverse"></span>
```

```html
<span class="willow-icon willow-icon--info"></span>
```

```html
<span class="willow-icon willow-icon--info-inverse"></span>
```

```html
<span class="willow-icon willow-icon--success"></span>
```

```html
<span class="willow-icon willow-icon--success-inverse"></span>
```

```html
<span class="willow-icon willow-icon--warning"></span>
```

```html
<span class="willow-icon willow-icon--warning-inverse"></span>
```

```html
<span class="willow-icon willow-icon--error"></span>
```

```html
<span class="willow-icon willow-icon--error-inverse"></span>
```

--------------------------------

### Import Willow Styles in SCSS

Source: https://context7.com/unumux/willow/llms.txt

Instructions for importing the theme and Willow styles, either as a full library or individual components.

```scss
// Import theme before Willow (optional)
@import "node_modules/@unumux/theme-unum-default/styles";

// Import entire Willow library
@import "node_modules/@unumux/willow/styles";

// Or import individual components
@import "node_modules/@unumux/willow/components/banner/styles/banner";
@import "node_modules/@unumux/willow/components/button/styles/button";
```

--------------------------------

### Implement Willow-Grid HTML Structure

Source: https://github.com/unumux/willow/blob/master/components/grid/readme.md

Basic grid structure and responsive configuration using modifier classes.

```html
<div class="willow-grid">
    <div class="willow-grid__item">
        <!-- insert components here -->
    </div>
</div>

<!-- modified example -->
<div class="willow-grid willow-grid--md-4 willow-grid--lg-6">
    <div class="willow-grid__item">
        <!-- insert components here -->
    </div>
</div>
```

--------------------------------

### Implement Willow Grids

Source: https://context7.com/unumux/willow/llms.txt

The grid system supports responsive layouts with configurable column counts per breakpoint.

```html
<!-- Default responsive grid -->
<div class="willow-grid">
  <div class="willow-grid__item">
    <article class="willow-card"><!-- Card 1 --></article>
  </div>
  <div class="willow-grid__item">
    <article class="willow-card"><!-- Card 2 --></article>
  </div>
  <div class="willow-grid__item">
    <article class="willow-card"><!-- Card 3 --></article>
  </div>
  <div class="willow-grid__item">
    <article class="willow-card"><!-- Card 4 --></article>
  </div>
</div>

<!-- Custom column layout: 4 columns on medium, 6 on large screens -->
<div class="willow-grid willow-grid--md-4 willow-grid--lg-6">
  <div class="willow-grid__item"><!-- Item 1 --></div>
  <div class="willow-grid__item"><!-- Item 2 --></div>
  <div class="willow-grid__item"><!-- Item 3 --></div>
  <div class="willow-grid__item"><!-- Item 4 --></div>
  <div class="willow-grid__item"><!-- Item 5 --></div>
  <div class="willow-grid__item"><!-- Item 6 --></div>
</div>
```

--------------------------------

### Accessible Icon in Actionable Element

Source: https://github.com/unumux/willow/blob/master/components/icons/readme.md

When an icon conveys meaning within an actionable component, add a 'title' attribute to the icon element for accessibility. This example shows a close icon within a button.

```html
<button><span class="willow-icon--menu-close" title="Close Menu"></span></button>
```

--------------------------------

### Willow-Grid with Modifiers

Source: https://github.com/unumux/willow/blob/master/components/grid/readme.md

Demonstrates how to use modifiers to control the number of columns per row for different screen sizes.

```APIDOC
## HTML Snippet - With Modifiers

### Description
This example illustrates how to apply modifiers to the `willow-grid` class to define the number of columns displayed per row on specific screen sizes (medium and large in this case).

### Code
```html
<div class="willow-grid willow-grid--md-4 willow-grid--lg-6">
    <div class="willow-grid__item">
        <!-- insert components here -->
    </div>
</div>
```
```

--------------------------------

### Implement Skip Navigation

Source: https://context7.com/unumux/willow/llms.txt

Enable keyboard and screen reader users to bypass navigation by linking directly to the main content area.

```html
<div class="willow-skip-nav">
  <a href="#main-content" class="willow-skip-nav__link" aria-label="skip to main content">
    Skip to Content
  </a>
</div>
```

--------------------------------

### Import Entire Willow Library SCSS

Source: https://github.com/unumux/willow/blob/master/README.md

Include the entire Willow library's stylesheet in your primary SCSS file. This should be done after any theme imports.

```scss
@import "node_modules/@unumux/willow/styles";
```

--------------------------------

### Implement Page Header Component

Source: https://context7.com/unumux/willow/llms.txt

Header component containing branding and navigation, with JavaScript for mobile menu toggling.

```html
<header class="willow-page-header" role="banner">
  <div class="container-fluid">
    <div class="willow-page-header__container">
      <div class="willow-page-header__branding">
        <a class="willow-logo-link" href="/" aria-label="go to home page">
          <img class="willow-logo-link__image" src="/logo.png" alt="Company Logo">
        </a>
      </div>
      <div class="willow-page-header__content-controls">
        <a class="willow-page-header__content-open" aria-label="Open Menu" href="#">menu</a>
        <a class="willow-page-header__content-close" aria-label="Close Menu" href="#">close</a>
      </div>
      <div class="willow-page-header__content">
        <div class="willow-page-header__navigation">
          <!-- Primary navigation goes here -->
        </div>
      </div>
    </div>
  </div>
</header>

<script>
// Toggle menu visibility
document.querySelector('.willow-page-header__content-open').addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelector('.willow-page-header').setAttribute('data-content-open', 'true');
});

document.querySelector('.willow-page-header__content-close').addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelector('.willow-page-header').setAttribute('data-content-open', 'false');
});
</script>
```

--------------------------------

### Implement Page Layout with Columns

Source: https://github.com/unumux/willow/blob/master/README.md

Use the willow-page-container class to wrap content and apply Bootstrap grid classes for responsive column layouts.

```html
<div class="willow-page-container">
  <main class="willow-page-content" id="" role="main">
    <div class="container-fluid">
      <h1 class="willow-page-content__heading">Heading for content</h1>
      <div class="row">
        <div class="col-lg-3">
          <!-- insert secondary nav -->
        </div>
        <div class="col-lg-9">
          <!-- insert willow-page-content component -->
        </div>
      </div>
    </div>
  </main>
</div>
```

--------------------------------

### Include Willow Minified CSS

Source: https://github.com/unumux/willow/blob/master/README.md

Reference the downloaded minified Willow CSS file in your index.html. Use this method if you are not compiling SCSS.

```html
<!-- If using Willow without a theme -->
<link rel="stylesheet" href="styles/willow.min.css">
```

--------------------------------

### Implement Page Container Component

Source: https://context7.com/unumux/willow/llms.txt

The root layout component that wraps all page content and supports flexbox utility classes.

```html
<div class="willow-page-container">
    <!-- Global alerts go here -->
    <!-- Skip navigation goes here -->
    <!-- Page header goes here -->
    <!-- Page content goes here -->
    <!-- Page footer goes here -->
</div>
```

--------------------------------

### Implement Willow Styling Context

Source: https://github.com/unumux/willow/blob/master/components/styling-context/readme.md

Wrap raw HTML or CMS placeholders within this div to apply Willow styling overrides.

```html
<div class="willow-styling-context">
    <!-- Insert raw HTML or Content Management System placeholders here -->
</div>
```

--------------------------------

### Include Theme Minified CSS

Source: https://github.com/unumux/willow/blob/master/README.md

Reference the downloaded minified theme CSS file in your index.html. This single file includes both the theme and Willow styles.

```html
<!-- If using a theme you only need to include the theme's min file -->
<link rel="stylesheet" href="styles/theme-name.min.css">
```

--------------------------------

### Import Willow with Theme SCSS

Source: https://github.com/unumux/willow/blob/master/README.md

Import a theme's stylesheet before importing the Willow library. This ensures components are styled with the theme's design.

```scss
@import "node_modules/@unumux/theme-name-here/styles";
@import "node_modules/@unumux/willow/styles";
```

--------------------------------

### Implement Page Footer Component

Source: https://context7.com/unumux/willow/llms.txt

Footer component for displaying site branding, navigation, and copyright information.

```html
<footer class="willow-page-footer" role="contentinfo">
  <div class="container-fluid">
    <div class="willow-page-footer__container">
      <div class="willow-page-footer__branding">
        <a class="willow-logo-link" href="/" aria-label="go to home page">
          <img class="willow-logo-link__image" src="/logo.png" alt="Company Logo">
        </a>
      </div>
      <div class="willow-page-footer__navigation">
        <!-- Footer navigation goes here -->
      </div>
      <small class="willow-page-footer__copyright">
        &copy; 2024 Company Name. All rights reserved.
      </small>
    </div>
  </div>
</footer>
```

--------------------------------

### Implement Global Alert HTML

Source: https://github.com/unumux/willow/blob/master/components/global-alert/readme.md

Standard structure for a global alert component, including variants for positive, warning, and negative feedback.

```html
<section class="willow-global-alert" role="alert">
    <div class="container">
        <button class="willow-global-alert__close">Button Text</button>
        <h1 class="willow-global-alert__heading">Heading Text</h1>
        <div class="willow-global-alert__content">
            <!-- insert components here -->
        </div>
    </div>
</section>

<!-- modified versions -->
<section class="willow-global-alert willow-global-alert--positive" role="alert">
    <div class="container">
        <button class="willow-global-alert__close">Button Text</button>
        <h1 class="willow-global-alert__heading">Heading Text</h1>
        <div class="willow-global-alert__content">
            <!-- insert components here -->
        </div>
    </div>
</section>

<section class="willow-global-alert willow-global-alert--warning" role="alert">
    <div class="container">
        <button class="willow-global-alert__close">Button Text</button>
        <h1 class="willow-global-alert__heading">Heading Text</h1>
        <h1 class="willow-global-alert__heading">Heading Text</h1>
        <div class="willow-global-alert__content">
            <!-- insert components here -->
        </div>
    </div>
</section>

<section class="willow-global-alert willow-global-alert--negative" role="alert">
    <div class="container">
        <button class="willow-global-alert__close">Button Text</button>
        <h1 class="willow-global-alert__heading">Heading Text</h1>
        <div class="willow-global-alert__content">
            <!-- insert components here -->
        </div>
    </div>
</section>
```

--------------------------------

### Implement Primary Navigation

Source: https://context7.com/unumux/willow/llms.txt

Place this component within the page header to provide access to main site sections.

```html
<nav class="willow-primary-nav" role="navigation" aria-label="primary">
  <h1 class="willow-primary-nav__heading sr-only">Site Primary Menu</h1>
  <ul class="willow-primary-nav__list">
    <li class="willow-primary-nav__item">
      <a class="willow-primary-nav__link willow-primary-nav__link--active" href="/" aria-label="Home page">
        Home
      </a>
    </li>
    <li class="willow-primary-nav__item">
      <a class="willow-primary-nav__link" href="/products" aria-label="View products">Products</a>
    </li>
    <li class="willow-primary-nav__item">
      <a class="willow-primary-nav__link" href="/services" aria-label="Our services">Services</a>
    </li>
    <li class="willow-primary-nav__item">
      <a class="willow-primary-nav__link" href="/contact" aria-label="Contact us">Contact</a>
    </li>
  </ul>
</nav>
```

--------------------------------

### Implement Secondary Navigation

Source: https://context7.com/unumux/willow/llms.txt

Use this component within the page content area to provide contextual links for the current section.

```html
<nav class="willow-secondary-nav" role="navigation" aria-label="secondary">
  <h1 class="willow-secondary-nav__heading sr-only">Product Page Menu</h1>
  <ul class="willow-secondary-nav__list">
    <li class="willow-secondary-nav__item">
      <a class="willow-secondary-nav__link" href="#overview" aria-label="Product overview">Overview</a>
    </li>
    <li class="willow-secondary-nav__item">
      <a class="willow-secondary-nav__link" href="#features" aria-label="Product features">Features</a>
    </li>
    <li class="willow-secondary-nav__item">
      <a class="willow-secondary-nav__link" href="#pricing" aria-label="Pricing information">Pricing</a>
    </li>
    <li class="willow-secondary-nav__item">
      <a class="willow-secondary-nav__link" href="#faq" aria-label="Frequently asked questions">FAQ</a>
    </li>
  </ul>
</nav>
```

--------------------------------

### Apply dynamic icon via style attribute

Source: https://github.com/unumux/willow/blob/master/components/banner/readme.md

Method for setting a unique icon background image dynamically using an inline style attribute.

```html
<div class="willow-banner__icon" style="background-image: url(...)"></div>
```

--------------------------------

### Willow SCSS Mixins

Source: https://github.com/unumux/willow/blob/master/utilities.md

Mixins for component styling.

```APIDOC
## SCSS Mixins

### icon($type)
Sets background-image, height, and width for icons based on the provided type.

### set-button-style($modifier, $state)
Sets button properties (background-color, border, color) based on modifier and state.
```

--------------------------------

### Breakpoint Function for Media Queries

Source: https://github.com/unumux/willow/blob/master/utilities.md

Use the `breakpoint` function within a `@media` query to dynamically set minimum widths based on a breakpoint map. The parent must be a flex parent.

```SCSS
@media screen and (min-width: breakpoint(sm, $grid-breakpoints)) {
        ...
    }

    // compiles to

    @media screen and (min-width: 576px) {
        ...
    }

    // map used
    $grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px
    )
```

--------------------------------

### Import Single Willow Component SCSS

Source: https://github.com/unumux/willow/blob/master/README.md

Import stylesheets for individual Willow components to include only specific components in your project.

```scss
@import "node_modules/@unumux/willow/components/banner/styles/banner";
@import "node_modules/@unumux/willow/components/breadcrumbs/styles/breadcrumbs";
```

--------------------------------

### Implement Page Content Component

Source: https://context7.com/unumux/willow/llms.txt

Main content area component designed to be placed between the header and footer, utilizing flex-grow for layout.

```html
<main class="willow-page-content flex-grow" id="main-content" role="main">
  <div class="container-fluid">
    <h1 class="willow-page-content__heading">Welcome to Our Site</h1>
    <div class="row">
      <div class="col-lg-3">
        <!-- Secondary navigation sidebar -->
      </div>
      <div class="col-lg-9">
        <!-- Main page content -->
        <p>Your content goes here.</p>
      </div>
    </div>
  </div>
</main>
```

--------------------------------

### Willow Utility Classes

Source: https://github.com/unumux/willow/blob/master/utilities.md

CSS utility classes for layout and accessibility.

```APIDOC
## CSS Utility Classes

### .butter
Removes margin between two adjacent .butter elements or components.

### .flex-grow
Applies flex-grow to a component or element to fill available space (requires flex parent).

### .sr-only
Visually hides information intended only for screen readers.
```

--------------------------------

### Icon Mixin

Source: https://github.com/unumux/willow/blob/master/utilities.md

Apply icon styles using the `icon` mixin. Pass one of the predefined `$type` variables to set background-image, height, and width properties.

```SCSS
.my-alert--positive {
        &:before {
            @include icon($icon-success);

        }
    }

    /*
        properties set:
        background-image: ...;
        height: ...;
        width: ...;
    */
```

--------------------------------

### Implement Willow-Footer-Nav HTML structure

Source: https://github.com/unumux/willow/blob/master/components/footer-nav/readme.md

Standard HTML markup for the footer navigation component. Includes accessibility roles and screen-reader-only headings.

```html
<nav class="willow-footer-nav" role="navigation" aria-label="footer">
  <h1 class="willow-footer-nav__heading sr-only">Site Footer Menu</h1>
  <ul class="willow-footer-nav__list">
      <li class="willow-footer-nav__item"><a class="willow-footer-nav__link" href="" aria-label="">Menu Item 1</a></li>
      <li class="willow-footer-nav__item"><a class="willow-footer-nav__link" href="" aria-label="">Menu Item 2</a></li>
  </ul>
</nav>
```

--------------------------------

### Implement Global Alert Component

Source: https://context7.com/unumux/willow/llms.txt

Global alerts support positive, warning, and negative variants. The close function includes local storage persistence to track dismissal.

```html
<!-- Standard global alert -->
<section class="willow-global-alert" role="alert">
  <div class="container">
    <button class="willow-global-alert__close" onclick="closeGlobalAlert()">Close</button>
    <h1 class="willow-global-alert__heading">Important Notice</h1>
    <div class="willow-global-alert__content">
      <p>Our website will undergo scheduled maintenance this Saturday at 6am EST.</p>
    </div>
  </div>
</section>

<!-- Positive alert (success) -->
<section class="willow-global-alert willow-global-alert--positive" role="alert">
  <div class="container">
    <button class="willow-global-alert__close">Close</button>
    <h1 class="willow-global-alert__heading">Success</h1>
    <div class="willow-global-alert__content">
      <p>Our new service is now available! Try it today.</p>
    </div>
  </div>
</section>

<!-- Warning alert -->
<section class="willow-global-alert willow-global-alert--warning" role="alert">
  <div class="container">
    <h1 class="willow-global-alert__heading">Weather Alert</h1>
    <div class="willow-global-alert__content">
      <p>Due to severe weather, some services may be delayed.</p>
    </div>
  </div>
</section>

<!-- Negative alert (error) -->
<section class="willow-global-alert willow-global-alert--negative" role="alert">
  <div class="container">
    <h1 class="willow-global-alert__heading">Service Outage</h1>
    <div class="willow-global-alert__content">
      <p>We are currently experiencing technical difficulties. Please try again later.</p>
    </div>
  </div>
</section>

<script>
function closeGlobalAlert() {
  document.querySelector('.willow-global-alert').setAttribute('data-global-alert-close', 'true');
  // Store dismissal to prevent showing on other pages
  localStorage.setItem('globalAlertDismissed', 'true');
}
</script>
```

--------------------------------

### Style Buttons with Set Button Style Mixin

Source: https://context7.com/unumux/willow/llms.txt

Style buttons for different states (default, hover, focus) using the set-button-style mixin with color and state parameters.

```scss
// Button style mixin
.my-button--primary {
  @include set-button-style($primary, "default");

  &:hover {
    @include set-button-style($primary, "hover");
  }

  &:focus {
    @include set-button-style($primary, "focus");
  }
}
```

--------------------------------

### Implement Dialog Component

Source: https://context7.com/unumux/willow/llms.txt

Dialogs support closing via escape key, outside clicks, or specific actions. Ensure the JavaScript event listeners are initialized to handle these interactions.

```html
<div class="willow-dialog">
  <section class="willow-dialog__container" role="dialog">
    <h1 class="willow-dialog__heading">Newsletter Signup</h1>
    <div class="willow-dialog__content">
      <p>Subscribe to our newsletter for the latest updates and news.</p>
      <input type="email" placeholder="Enter your email" class="form-control">
    </div>
    <ul class="willow-dialog__actions">
      <li class="willow-dialog__action">
        <button class="willow-button willow-button--positive">Subscribe</button>
      </li>
      <li class="willow-dialog__action">
        <button class="willow-button" onclick="closeDialog()">No Thanks</button>
      </li>
    </ul>
  </section>
</div>

<script>
function closeDialog() {
  document.querySelector('.willow-dialog').setAttribute('data-dialog-close', 'true');
}

// Close on escape key
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closeDialog();
});

// Close on outside click
document.querySelector('.willow-dialog').addEventListener('click', function(e) {
  if (e.target === this) closeDialog();
});
</script>
```

--------------------------------

### Implement Willow-Skip-Nav HTML

Source: https://github.com/unumux/willow/blob/master/components/skip-nav/readme.md

Basic HTML structure for the skip navigation component. Ensure the href attribute matches the ID of the main content container.

```html
<div class="willow-skip-nav">
    <a href="" class="willow-skip-nav__link" aria-label="skip to main content">Skip to Content</a>
</div>
```

--------------------------------

### Implement Willow-Dialog HTML Structure

Source: https://github.com/unumux/willow/blob/master/components/dialog/readme.md

Standard HTML structure for a dialog component, including the container, heading, content area, and action list.

```html
<div class="willow-dialog">
    <section class="willow-dialog__container" role="dialog">
        <h1 class="willow-dialog__heading">Heading Text</h1>
        <div class="willow-dialog__content">
            <!-- insert content components here-->
        </div>
        <ul class="willow-dialog__actions">
            <li class="willow-dialog__action"><!-- insert action component here --></li>
        </ul>
    </section>
</div>
```

--------------------------------

### Apply Flex Grow to Page Content

Source: https://github.com/unumux/willow/blob/master/components/page-container/readme.md

Use the flex-grow utility class on child elements to fill available vertical space.

```HTML
<main class="willow-page-content flex-grow">
```

--------------------------------

### Power Function for Ratios

Source: https://github.com/unumux/willow/blob/master/utilities.md

Calculate powers of a given ratio using the `pow` function. The `$ratio` should be a constant throughout your project, and `$exponent` must be a positive whole number.

```SCSS
$golden-ratio: 1.618;
    $golden-ratio-l: pow($golden-ratio, 2);
    $golden-ratio-xl: pow($golden-ratio, 3);
```

--------------------------------

### Willow-Grid Basic Structure

Source: https://github.com/unumux/willow/blob/master/components/grid/readme.md

This snippet shows the basic HTML structure for a Willow-Grid and its items.

```APIDOC
## HTML Snippet - Basic Structure

### Description
This is the fundamental HTML structure for implementing the Willow-Grid component. It consists of a parent `div` with the class `willow-grid` and child `div` elements with the class `willow-grid__item` where content is placed.

### Code
```html
<div class="willow-grid">
    <div class="willow-grid__item">
        <!-- insert components here -->
    </div>
</div>
```
```

--------------------------------

### Implement Willow Page Container

Source: https://github.com/unumux/willow/blob/master/components/page-container/readme.md

Basic HTML structure for the page container component.

```html
<div class="willow-page-container">
    <!-- insert components here -->
</div>
```

--------------------------------

### Implement Willow-Banner HTML structure

Source: https://github.com/unumux/willow/blob/master/components/banner/readme.md

Standard HTML markup for the banner component, including required container-fluid and accessibility roles.

```html
<section class="willow-banner" role="region">
  <div class="container-fluid">
    <div class="willow-banner__icon"></div>
    <h1 class="willow-banner__heading">Heading Text</h1>
    <div class="willow-banner__content">
        <!-- insert components here -->
    </div>
    <ul class="willow-banner__actions">
        <li class="willow-banner__action"><!-- insert action component here --></li>
    </ul>
  </div>
</section>
```

--------------------------------

### Willow SCSS Functions

Source: https://github.com/unumux/willow/blob/master/utilities.md

Mathematical and layout-related SCSS functions.

```APIDOC
## SCSS Functions

### breakpoint($breakpoint, $breakpoint-map)
Returns a pixel value from a breakpoint map for use in @media queries.

### line-height($font-size)
Returns a unitless line-height value based on theme settings.

### pow($ratio, $exponent)
Returns the value of $ratio multiplied by itself $exponent times.

### space($scale)
Calculates spacing based on the base variable and golden ratio.

### strip-unit($number)
Removes units from a number (e.g., 10px becomes 10).
```

--------------------------------

### Implement Breadcrumbs

Source: https://context7.com/unumux/willow/llms.txt

Display the user's current location within the site hierarchy using this navigation path.

```html
<nav class="willow-breadcrumbs" role="navigation" aria-label="breadcrumb">
  <div class="container-fluid">
    <h1 class="willow-breadcrumbs__heading sr-only">You are here:</h1>
    <ol class="willow-breadcrumbs__list">
      <li class="willow-breadcrumbs__item">
        <a class="willow-breadcrumbs__link" href="/" aria-label="Home page">Home</a>
      </li>
      <li class="willow-breadcrumbs__item">
        <a class="willow-breadcrumbs__link" href="/products" aria-label="Products page">Products</a>
      </li>
      <li class="willow-breadcrumbs__item">
        <a class="willow-breadcrumbs__link" href="/products/category" aria-label="Category page">Category</a>
      </li>
      <li class="willow-breadcrumbs__item willow-breadcrumbs__item--active">Current Product</li>
    </ol>
  </div>
</nav>
```

--------------------------------

### Customize Willow Theme with SCSS Variables

Source: https://context7.com/unumux/willow/llms.txt

Override default SCSS variables before importing the theme to globally customize component appearance. This includes colors, sizes, and grid configurations.

```scss
// Custom color variable
$my-brand-color: #37c0e3;

// Override component-specific variables
$component-button-positive-background-color: $my-brand-color;
$component-banner-background-color: #f5f5f5;
$component-page-container-max-width: 1400px;

// Customize Bootstrap grid
$grid-columns: 10;

// Import theme (must come after variable overrides)
@import "node_modules/@unumux/theme-unum-default/styles";

// Import Willow
@import "node_modules/@unumux/willow/styles";
```

--------------------------------

### Willow-Logo-Link Component

Source: https://github.com/unumux/willow/blob/master/components/logo-link/readme.md

Documentation for the willow-logo-link HTML structure and its required elements.

```APIDOC
## Willow-Logo-Link Component

### Description
The willow-logo-link component displays a logo and wraps it in an anchor tag pointing to the home page.

### Elements
#### willow-logo-link
- Required: Yes
- Notes: Must include an `aria-label` for accessibility.

#### willow-logo-link__image
- Required: Yes
- Notes: Requires a `src` attribute for the image path and an `alt` attribute for accessibility.

### HTML Example
```html
<a class="willow-logo-link" href="/" aria-label="go to home page">
  <img class="willow-logo-link__image" src="path/to/logo.png" alt="Company Logo">
</a>
```
```

--------------------------------

### Implement Modal Component

Source: https://context7.com/unumux/willow/llms.txt

Modals halt user interaction and require explicit action to close. Use the provided JavaScript functions to manage the modal state via data attributes.

```html
<div class="willow-modal">
  <section class="willow-modal__container" role="alertdialog">
    <h1 class="willow-modal__heading">Confirm Deletion</h1>
    <div class="willow-modal__content">
      <p>Are you sure you want to delete this item? This action cannot be undone.</p>
    </div>
    <ul class="willow-modal__actions">
      <li class="willow-modal__action">
        <button class="willow-button willow-button--negative" onclick="deleteItem()">
          Delete
        </button>
      </li>
      <li class="willow-modal__action">
        <button class="willow-button" onclick="closeModal()">Cancel</button>
      </li>
    </ul>
  </section>
</div>

<script>
function closeModal() {
  document.querySelector('.willow-modal').setAttribute('data-modal-close', 'true');
}

function deleteItem() {
  // Perform delete action
  closeModal();
}
</script>
```

--------------------------------

### set-text-style Mixin

Source: https://github.com/unumux/willow/blob/master/utilities.md

Applies predefined font styles and values to text elements. Accepts various text style variables.

```APIDOC
## `set-text-style($style)`

### Description
Sets font properties and values for the provided font/text `$style`.

### Method
SCSS Mixin

### Parameters
#### Arguments
- **$style** (variable) - Required - The text style variable to apply. Possible values include:
  - `$text-style-heading-1`
  - `$text-style-heading-2`
  - `$text-style-heading-3`
  - `$text-style-heading-4`
  - `$text-style-heading-5`
  - `$text-style-heading-6`
  - `$text-style-content-1`
  - `$text-style-content-2`
  - `$text-style-content-3`

### Request Example
```scss
body {
    @include set-text-style($text-style-content-1);
}

h1 {
    @include set-text-style($text-style-heading-1);
}

small {
    @include set-text-style($text-style-content-3);
}

.my-component__heading {
    @include set-text-style($text-style-heading-3);
}
```

### Response
#### Properties Set
- `font-family`
- `font-size`
- `font-weight`
- `line-height`
- Responsive adjustments for `font-size` and `line-height` at `breakpoint(medium)`.
```

--------------------------------

### Set Text Style with set-text-style Mixin

Source: https://github.com/unumux/willow/blob/master/utilities.md

Use this mixin to apply predefined font styles to elements. It accepts various text style variables like `$text-style-heading-1` or `$text-style-content-1`.

```SCSS
body {
    @include set-text-style($text-style-content-1);
}

h1 {
    @include set-text-style($text-style-heading-1);
}

small {
    @include set-text-style($text-style-content-3);
}

.my-component__heading {
    @include set-text-style($text-style-heading-3);
}

/*
    properties set:
    font-family: ...;
    font-size: ...;
    font-weight: ...;
    line-height: ...;

    @media screen and (min-width: breakpoint(medium)) {
        font-size: ...;
        line-height: ...;
    }
*/
```

--------------------------------

### Implement Willow Cards

Source: https://context7.com/unumux/willow/llms.txt

Cards group related information and can be implemented as article elements with actions or as clickable link cards.

```html
<!-- Article card with action buttons -->
<article class="willow-card">
  <div class="willow-card__image" style="background-image: url('/product.jpg')"></div>
  <div class="willow-card__content">
    <div class="willow-card__icon"></div>
    <h2 class="willow-card__heading">Product Name</h2>
    <div class="willow-card__description">
      <p>Brief product description that entices users to learn more about this item.</p>
    </div>
    <ul class="willow-card__actions">
      <li class="willow-card__action">
        <a href="/product/details" class="willow-button willow-button--primary">View Details</a>
      </li>
      <li class="willow-card__action">
        <button class="willow-button willow-button--positive">Add to Cart</button>
      </li>
    </ul>
  </div>
</article>

<!-- Clickable link card -->
<a class="willow-card willow-card--link" href="/article/123" aria-label="Read full article about topic">
  <div class="willow-card__content">
    <div class="willow-card__icon"></div>
    <h2 class="willow-card__heading">Article Title</h2>
    <div class="willow-card__description">
      <p>Brief summary of the article content...</p>
    </div>
  </div>
</a>
```

--------------------------------

### Make Element Fill Available Flex Space

Source: https://context7.com/unumux/willow/llms.txt

Use the flex-grow utility class to make an element expand and fill available space within a flex container.

```html
<!-- Make element fill available flex space -->
<main class="willow-page-content flex-grow">
  <!-- Content -->
</main>
```

--------------------------------

### Willow-Icon Component

Source: https://github.com/unumux/willow/blob/master/components/icons/readme.md

Documentation for the willow-icon element, including usage, modifiers, and accessibility requirements.

```APIDOC
## willow-icon

### Description
The willow-icon component provides a set of symbols for UI interfaces. It requires a modifier class to render a specific icon.

### Usage
- Must have a modifier added to the class name (e.g., `willow-icon--menu`).
- If used to convey meaning in an actionable component, add a `title` attribute for accessibility.

### Modifiers
- `--menu`: Hamburger menu icon.
- `--menu-inverse`: Inverse color menu icon.
- `--menu-close`: Close icon for menus.
- `--menu-close-inverse`: Inverse color menu close icon.
- `--close`: Close icon for alerts/dialogs.
- `--close-inverse`: Inverse color close icon.
- `--info`: Information symbol.
- `--info-inverse`: Inverse color info symbol.
- `--success`: Checkmark symbol.
- `--success-inverse`: Inverse color success symbol.
- `--warning`: Yield symbol.
- `--warning-inverse`: Inverse color warning symbol.
- `--error`: Exclamation point symbol.
- `--error-inverse`: Inverse color error symbol.

### Example
<span class="willow-icon willow-icon--menu"></span>
<button><span class="willow-icon--menu-close" title="Close Menu"></span></button>
```

--------------------------------

### Basic HTML Structure for Willow-Modal

Source: https://github.com/unumux/willow/blob/master/components/modal/readme.md

This snippet shows the fundamental HTML structure for the Willow-Modal component. It includes the main container, section, heading, content area, and actions list.

```html
<div class="willow-modal">
  <section class="willow-modal__container" role="alertdialog">
    <h1 class="willow-modal__heading">Modal</h1>
    <div class="willow-modal__content">
        <!-- insert content components here -->
    </div>
    <ul class="willow-modal__actions">
      <li class="willow-modal__action"><!-- insert action component here --></li>
    </ul>
  </section>
</div>
```

--------------------------------

### Apply Text Styles with Set Text Style Mixin

Source: https://context7.com/unumux/willow/llms.txt

Apply predefined text styles to elements using the set-text-style mixin, referencing defined text style variables.

```scss
// Text style mixin
body {
  @include set-text-style($text-style-content-1);
}

h1 {
  @include set-text-style($text-style-heading-1);
}
```

--------------------------------

### Use Breakpoint Function in Media Queries

Source: https://context7.com/unumux/willow/llms.txt

Utilize the breakpoint function to define responsive media queries based on predefined breakpoints.

```scss
// Breakpoint function for media queries
@media screen and (min-width: breakpoint(md, $grid-breakpoints)) {
  .my-component {
    display: flex;
  }
}
```

--------------------------------

### Basic HTML Structure for Willow-Page-Footer

Source: https://github.com/unumux/willow/blob/master/components/page-footer/readme.md

This HTML snippet shows the fundamental structure of the Willow-Page-Footer component. It includes placeholders for branding, navigation, and copyright information. Ensure this component is used only once per page and placed after the willow-page-content.

```html
<footer class="willow-page-footer" role="contentinfo">
  <div class="container-fluid">
    <div class="willow-page-footer__container">
      <div class="willow-page-footer__branding"><!-- insert Willow-Logo-Link Component --></div>
      <div class="willow-page-footer__navigation"><!-- insert Willow-Footer-Nav Component Here --></div>
      <small class="willow-page-footer__copyright"><!-- insert copyright text here --></small>
    </div>
  </div>
</footer>
```

--------------------------------

### Implement Willow Banners

Source: https://context7.com/unumux/willow/llms.txt

Banners provide full-width highlighted sections for important announcements or calls to action.

```html
<section class="willow-banner" role="region">
  <div class="container-fluid">
    <div class="willow-banner__icon" style="background-image: url('/icon.svg')"></div>
    <h1 class="willow-banner__heading">Special Announcement</h1>
    <div class="willow-banner__content">
      <p>Important message for all visitors about our new services and offerings.</p>
    </div>
    <ul class="willow-banner__actions">
      <li class="willow-banner__action">
        <a href="/learn-more" class="willow-button willow-button--cta">Learn More</a>
      </li>
      <li class="willow-banner__action">
        <a href="/contact" class="willow-button willow-button--ghost">Contact Us</a>
      </li>
    </ul>
  </div>
</section>
```

--------------------------------

### Apply Screen Reader Only Class

Source: https://context7.com/unumux/willow/llms.txt

Visually hide content but keep it accessible to screen readers using the sr-only utility class.

```html
<!-- Screen reader only mixin -->
.my-navigation__heading {
  @include sr-only;
}
```

--------------------------------

### Visually Hide Content for Screen Readers

Source: https://context7.com/unumux/willow/llms.txt

Use the sr-only utility class to visually hide content while ensuring it remains accessible to screen readers.

```html
<!-- Visually hide content but keep accessible to screen readers -->
<h1 class="willow-primary-nav__heading sr-only">Site Primary Menu</h1>
```

--------------------------------

### Primary Navigation HTML Structure

Source: https://github.com/unumux/willow/blob/master/components/primary-nav/readme.md

This snippet shows the basic HTML structure for the primary navigation. Ensure links have appropriate href and aria-label values for accessibility.

```html
<nav class="willow-primary-nav" role="navigation" aria-label="primary">
    <h1 class="willow-primary-nav__heading sr-only">Site Primary Menu</h1>
    <ul class="willow-primary-nav__list">
        <li class="willow-primary-nav__item">
          <a class="willow-primary-nav__link" href="" aria-label="">Menu Item 1</a>
        </li>
        <li class="willow-primary-nav__item">
          <a class="willow-primary-nav__link" href="" aria-label="">Menu Item 2</a>
        </li>
        <li class="willow-primary-nav__item">
          <a class="willow-primary-nav__link" href="" aria-label="">Menu Item 3</a>
        </li>
    </ul>
</nav>
```

--------------------------------

### Implement Inline Alert Components

Source: https://context7.com/unumux/willow/llms.txt

Use these contextual message blocks for forms or content areas. Apply specific modifier classes for positive, warning, or negative states.

```html
<!-- Standard inline alert -->
<section class="willow-alert" role="alert">
  <h1 class="willow-alert__heading">Information</h1>
  <div class="willow-alert__content">
    <p>Your session will expire in 5 minutes.</p>
  </div>
</section>

<!-- Positive alert -->
<section class="willow-alert willow-alert--positive" role="alert">
  <h1 class="willow-alert__heading">Success</h1>
  <div class="willow-alert__content">
    <p>Your information has been successfully submitted.</p>
  </div>
</section>

<!-- Warning alert -->
<section class="willow-alert willow-alert--warning" role="alert">
  <h1 class="willow-alert__heading">Warning</h1>
  <div class="willow-alert__content">
    <p>Your account is about to expire. Please renew online.</p>
  </div>
</section>

<!-- Negative alert -->
<section class="willow-alert willow-alert--negative" role="alert">
  <h1 class="willow-alert__heading">Error</h1>
  <div class="willow-alert__content">
    <p>The email address entered is already registered.</p>
  </div>
</section>
```

--------------------------------

### Willow-Summary HTML Structure

Source: https://github.com/unumux/willow/blob/master/components/summary/readme.md

This is the basic HTML structure for the Willow-Summary component. It includes a heading, a content area for the willow-grid, and an actions list.

```html
<section class="willow-summary" role="region">
    <h1 class="willow-summary__heading">Heading Text</h1>
    <div class="willow-summary__content">
        <!-- insert Willow-Grid -->
    </div>
    <ul class="willow-summary__actions">
        <li class="willow-summary__action"><!-- insert action component here --></li>
    </ul>
</section>
```

--------------------------------

### Apply Spacing with Space Function

Source: https://context7.com/unumux/willow/llms.txt

Use the space function to apply consistent spacing values, calculated using the golden ratio, to elements.

```scss
// Space function using golden ratio
.my-component {
  margin-top: space(2);    // Returns 4.1886rem
  padding: space(1);       // Returns 2.589rem
}
```

--------------------------------

### Implement Willow Buttons

Source: https://context7.com/unumux/willow/llms.txt

Use button elements for form actions and anchor tags for navigation. Apply specific class modifiers to achieve different visual variants.

```html
<!-- Standard button for form actions -->
<button class="willow-button">Default Button</button>
<button class="willow-button" disabled>Disabled Button</button>

<!-- Button variants -->
<button class="willow-button willow-button--primary">Learn More</button>
<button class="willow-button willow-button--positive">Submit Form</button>
<button class="willow-button willow-button--negative">Delete Account</button>
<button class="willow-button willow-button--cta">Get Started Now</button>
<button class="willow-button willow-button--inline">Compact Button</button>
<button class="willow-button willow-button--ghost">Ghost Button</button>
<button class="willow-button willow-button--ghost-inverse">Ghost Inverse</button>

<!-- Anchor button for navigation -->
<a href="/signup" class="willow-button willow-button--positive" aria-label="Sign up for account">
  Sign Up
</a>
<a href="/login" class="willow-button" data-disabled="true" aria-disabled="true" aria-label="Login disabled">
  Login Disabled
</a>
```