// Internal link (arrow icon)
coe_uw_link(array(
    'url'  => '/about',
    'text' => 'Internal Link',
));

// External link (external icon, target="_blank" auto-added)
coe_uw_link(array(
    'url'  => 'https://wisc.edu',
    'text' => 'External Link',
));

// Email link (email icon from mailto:)
coe_uw_link(array(
    'url'  => 'mailto:info@example.com',
    'text' => 'Email Us',
));

// Download (auto-detects from .pdf extension)
coe_uw_link(array(
    'url'  => '/wp-content/uploads/sample.pdf',
    'text' => 'Download PDF',
));

// Modal trigger (info icon from data-bs-toggle)
coe_uw_link(array(
    'url'  => '#modal-example',
    'text' => 'Open Modal',
    'data' => array('bs-toggle' => 'modal'),
));

<!-- Use these shortcodes in HTML blocks, shortcode blocks, or classic editor -->

<!-- Basic link -->
[uw_link url="/about" text="Learn More"]

<!-- Primary button (replaces Bootstrap btn btn-danger) -->
[uw_link url="/apply" text="Apply Now" variant="button-primary" size="lg"]

<!-- Secondary button (replaces Bootstrap btn btn-outline-danger) -->
[uw_link url="/events" text="View Events" variant="button-secondary"]

<!-- Email link (auto-detects mailto:) -->
[uw_link url="mailto:info@wisc.edu" text="Contact Us"]

<!-- External link (auto-detects different domain) -->
[uw_link url="https://wisc.edu" text="Visit UW"]

<!-- Plain icon variant (no circle background) -->
[uw_link url="/programs" text="Explore Programs" variant="plain-icon"]

<!-- All available attributes -->
[uw_link
  url="/required"
  text="Button Text"
  icon="auto"                    (auto|arrow|external|email|info|download)
  variant=""                     (button|button-primary|button-secondary|dark|light-icon|plain-icon)
  size=""                        (xs|sm|lg|xl|xxl)
  target="_self"                 (_self|_blank)
  aria_label=""                  (for icon-only buttons)
  class=""                       (additional CSS classes)
]

// Extra Small
coe_uw_link(array(
    'url'  => '/programs',
    'text' => 'Extra Small',
    'size' => 'xs',
));

// Small
coe_uw_link(array(
    'url'  => '/programs',
    'text' => 'Small',
    'size' => 'sm',
));

// Default (no size parameter)
coe_uw_link(array(
    'url'  => '/programs',
    'text' => 'Default',
));

// Large
coe_uw_link(array(
    'url'  => '/programs',
    'text' => 'Large',
    'size' => 'lg',
));

// Extra Large
coe_uw_link(array(
    'url'  => '/programs',
    'text' => 'Extra Large',
    'size' => 'xl',
));

// 2X Large
coe_uw_link(array(
    'url'  => '/programs',
    'text' => '2X Large',
    'size' => 'xxl',
));

// Default: circle background + icon shape
coe_uw_link(array(
    'url'  => '/next',
    'text' => 'Default Link',
));

// Plain icon: just icon shape, no circle
coe_uw_link(array(
    'url'  => '/next',
    'text' => 'Plain Icon Link',
    'variant' => 'plain-icon',
));

// External link with plain icon
coe_uw_link(array(
    'url'  => 'https://wisc.edu',
    'text' => 'External with Plain Icon',
    'variant' => 'plain-icon',
));

// Create array of links
$links = array(
    array('url' => '/programs', 'title' => 'Programs', 'target' => '_self'),
    array('url' => '/research', 'title' => 'Research', 'target' => '_self'),
    array('url' => 'https://wisc.edu', 'title' => 'UW-Madison', 'target' => '_blank'),
);

// Render as 3-column grid
coe_uw_group_of_links($links, 3);

// With ACF repeater field
$links = get_field('resource_links'); // Repeater
$link_data = array_column($links, 'link');
coe_uw_group_of_links($link_data, 2); // 2 columns

// White button with shadow
coe_uw_link(array(
    'url'     => '/apply',
    'text'    => 'White Button',
    'variant' => 'button',
));

// Primary (gray) button
coe_uw_link(array(
    'url'     => '/apply',
    'text'    => 'Primary Button',
    'variant' => 'button-primary',
));

// Secondary (red) button
coe_uw_link(array(
    'url'     => '/apply',
    'text'    => 'Secondary Button',
    'variant' => 'button-secondary',
));

// Extra small
coe_uw_link(array(
    'url'     => '/apply',
    'text'    => 'XS',
    'variant' => 'button-primary',
    'size'    => 'xs',
));

// Small
coe_uw_link(array(
    'url'     => '/apply',
    'text'    => 'Small',
    'variant' => 'button-primary',
    'size'    => 'sm',
));

// Default
coe_uw_link(array(
    'url'     => '/apply',
    'text'    => 'Default',
    'variant' => 'button-primary',
));

// Large
coe_uw_link(array(
    'url'     => '/apply',
    'text'    => 'Large',
    'variant' => 'button-primary',
    'size'    => 'lg',
));

// Extra large
coe_uw_link(array(
    'url'     => '/apply',
    'text'    => 'XL',
    'variant' => 'button-primary',
    'size'    => 'xl',
));

// 2X large
coe_uw_link(array(
    'url'     => '/apply',
    'text'    => 'XXL',
    'variant' => 'button-primary',
    'size'    => 'xxl',
));

<div class="hero-image" style="background-image: url('hero.jpg');">
    <div class="hero-content">
        <?php
        coe_uw_link(array(
            'url'     => '/explore',
            'text'    => 'Explore Programs',
            'variant' => 'button',
            'size'    => 'lg',
        ));
        ?>
    </div>
</div>

// Link with white text
coe_uw_link(array(
    'url'     => '/contact',
    'text'    => 'Contact Us',
    'variant' => 'dark',
));

// Button on dark background
coe_uw_link(array(
    'url'     => '/contact',
    'text'    => 'Button on Dark',
    'variant' => 'button',
));

coe_uw_link(array(
    'url'     => 'https://wisc.edu',
    'text'    => 'External + Button + Large',
    'icon'    => 'external',
    'variant' => array('button', 'light-icon'),
    'size'    => 'lg',
    'class'   => 'mb-2',
));

// Icon-only link (no button styling)
coe_uw_link(array(
    'url'        => '/search',
    'aria_label' => 'Search', // Required for accessibility
    'icon'       => 'arrow',
));

// Icon-only button
coe_uw_link(array(
    'url'        => '/close',
    'aria_label' => 'Close',
    'icon'       => 'arrow',
    'variant'    => 'button',
));

// Icon-only with size
coe_uw_link(array(
    'url'        => '/delete',
    'aria_label' => 'Delete',
    'icon'       => 'external',
    'variant'    => 'button-secondary',
    'size'       => 'lg',
));

// Basic usage
$link = get_field('cta_link');
if (!empty($link)) {
    coe_uw_link_from_acf($link);
}

// With variants
coe_uw_link_from_acf(get_field('hero_cta'), array(
    'variant' => 'button-primary',
    'size'    => 'lg',
));

// In ACF Repeater
if (have_rows('link_list')) {
    while (have_rows('link_list')) {
        the_row();
        coe_uw_link_from_acf(get_sub_field('link'), array(
            'class' => 'd-block mb-2',
        ));
    }
}

// Force specific icons
coe_uw_link(array(
    'url'  => '/resource',
    'text' => 'Force Arrow',
    'icon' => 'arrow',
));

coe_uw_link(array(
    'url'  => '/resource',
    'text' => 'Force External',
    'icon' => 'external',
));

coe_uw_link(array(
    'url'  => '/resource',
    'text' => 'Force Info',
    'icon' => 'info',
));

coe_uw_link(array(
    'url'  => '/resource',
    'text' => 'Force Download',
    'icon' => 'download',
));

coe_uw_link(array(
    'url'  => '/resource',
    'text' => 'Force Email',
    'icon' => 'email',
));

// No icon at all
coe_uw_link(array(
    'url'  => '/resource',
    'text' => 'No Icon',
    'icon' => 'none',
));

// Default modal close button
coe_close_button();

// White variant for dark backgrounds
coe_close_button(array('variant' => 'white'));

// For alerts
coe_close_button(array('dismiss' => 'alert'));

// For offcanvas
coe_close_button(array('dismiss' => 'offcanvas'));

// Custom aria-label
coe_close_button(array('aria_label' => 'Close course details'));

// In a modal header
<div class="modal-header">
    <h5 class="modal-title">Title</h5>
    <?php coe_close_button(); ?>
</div>

// All parameters
coe_close_button(array(
    'dismiss'    => 'modal',   // modal, alert, offcanvas, toast
    'variant'    => '',        // '', 'white'
    'aria_label' => 'Close',   // Accessibility label
    'class'      => '',        // Additional CSS classes
    'echo'       => true,      // Echo or return HTML
));

<h1>Heading 1 - Engineering Excellence</h1>
<h2>Heading 2 - Research & Innovation</h2>
<h3>Heading 3 - Academic Programs</h3>
<h4>Heading 4 - Student Success</h4>
<h5>Heading 5 - Campus Life</h5>
<h6>Heading 6 - Contact Information</h6>

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

<p class="lead">
    The College of Engineering at UW-Madison is a world-renowned...
</p>

<p>
    Our programs span a wide range of disciplines...
</p>
<p>
    Through cutting-edge research facilities...
</p>

<mark>highlight</mark>
<del>deleted text</del>
<s>no longer accurate</s>
<ins>addition to document</ins>
<u>underlined</u>
<small>fine print</small>
<strong>bold text</strong>
<em>italicized text</em>

<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text (UW Red)</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-muted">Muted text</p>
<p class="text-body-secondary">Body secondary text</p>

<p class="fw-light">Light weight text</p>
<p class="fw-normal">Normal weight text</p>
<p class="fw-semibold">Semibold weight text</p>
<p class="fw-bold">Bold weight text</p>

<p class="text-start">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned</p>
<p class="text-sm-start text-md-center text-lg-end">
    Responsive alignment
</p>

<!-- Unordered -->
<ul>
    <li>Mechanical Engineering</li>
    <li>Electrical Engineering</li>
</ul>

<!-- Ordered -->
<ol>
    <li>Research Excellence</li>
    <li>Academic Programs</li>
</ol>

<!-- Unstyled -->
<ul class="list-unstyled">
    <li>Innovation Hub</li>
    <li>Maker Space</li>
</ul>

<figure>
    <blockquote class="blockquote">
        <p>
            "The University of Wisconsin-Madison..."
        </p>
    </blockquote>
    <figcaption class="blockquote-footer mt-2">
        Dean of Engineering, <cite>Annual Report</cite>
    </figcaption>
</figure>

<!-- Clamp to 2 lines -->
<div class="max-lines-2">
    <p>Long text that will be truncated...</p>
</div>

<!-- Clamp to 3 lines -->
<div class="max-lines-3">
    <p>Long text that will be truncated...</p>
</div>

// In your SCSS file
.your-element {
    @include coe-decorative-line;
}

// Or inline HTML
<hr style="border: none; margin: 0 auto 1rem auto; padding: 0;
    height: 4px; width: 80px; background-color: var(--bs-secondary);
    border-radius: 2px; opacity: 1;">

<span class="sr-only">
    Screen reader only content
</span>

<!-- Common use case: form labels -->
<label for="search" class="sr-only">Search</label>
<input type="text" id="search" placeholder="Search...">

<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>

// Font families defined in _fonts.scss
// Applied via Bootstrap variables in _bootstrap_variables.scss

Red Hat Display: Headings (h1-h6)
Red Hat Text: Body copy (p, li, etc.)
Sofia Sans: Available for special use cases