Arizona Web Components

Arizona Web Components consist of web components aimed at helping developers incorporate UofArizona-themed UI elements into their web applications. These components are constructed using Lit, ensuring consistency and user-friendliness while following to Arizona's digital brand design principles and styles.

Setup

HTML

1. Install the package via npm:

npm i az-web-component

2. Include the following script tag in your HTML file:

<script type="module" src="node_modules/az-web-component/dist/index.js"></script>

Components

az-button

Customizable button component that allows for various sizes, themes, and functionalities.

Properties/Attributes

Flag Attributes

These attributes are used as flags. Simply including the attribute modifies the component's state or appearance.

• block: Makes the button display as a block-level element.
• arrow: Displays an arrow icon on the button.
• disabled: Makes the button appear inactive and prevents user interactions.
• active: Indicates that the button is in an active or "on" state.

Example usage:

<az-button block arrow disabled></az-button>

Valued Attributes

These attributes require a value to define or modify the component's behavior or appearance.

• link: Specifies the URL to navigate to when the button is clicked.
  • Example: <az-button link="https://www.arizona.edu"> AzButton </az-button>
• size: Accepts default | large | medium | small.
  • Example: <az-button size="large"> Large AzButton </az-button>
• btntype: Specifies the button theme. Accepts:
  • red
  • blue
  • success
  • danger
  • warning
  • info
  • light
  • dark
  • white
  • outline-red
  • outline-blue
  • outline-success
  • outline-danger
  • outline-warning
  • outline-info
  • outline-light
  • outline-dark
  • outline-white

Usage

In HTML:

<az-button size="large" btntype="red" link="https://example.com">Arizona Button!</az-button>

az-header

The az-header web component provides a customizable header/banner for web applications. It is designed to be flexible and easy to integrate into projects.

Properties/Attributes

• container: This attribute determines the layout of the header.
  • fixed: Sets the header to a fixed width.
  • fluid: Makes the header stretch the full width of the viewport, providing a more expansive look.
• branding:
  • none: No branding/logo will be displayed. This option is suitable for pages where minimalism or content-focused design is preferred.
  • bare-wordmark-white: Displays a simplified, white-colored wordmark or logo.

Usage

In HTML:

<az-header>Content</az-header>

Additional components will be listed here as they are added to the package.