UMD Web Components Library
    Preparing search index...

    Variable BrandChevronPromoConst

    BrandChevronPromo: ComponentRegistration = ...

    Brand Chevron Promo

    A promotional call-to-action section on a black background with decorative brand chevron line work. Outlined brand chevrons slide in from the left and then drift continuously to the right at gently varying speeds (mirroring the forward.umd.edu campaign hero), then the centered content fades in and up. Content is centered horizontally and vertically, with dark gradients placed under the text to cover the arrows for better reading experience.

    The section has a minimum height of 500px on desktop and 355px on mobile. The headline uses the campaign typeface; supporting content follows the medium text lockup.

    <umd-element-brand-chevron-promo>

    • headline - Main heading (required)
    • eyebrow - Small ribbon text above the headline
    • text - Supporting text content
    • actions - Call-to-action buttons/links
    • data-animation - Animation trigger options:
      • false - Wait until the section scrolls into view to start the arrow animation (default: starts on component load)
    <!-- Basic promo (arrows animate on load) -->
    <umd-element-brand-chevron-promo>
      <h2 slot="headline">Donec et urna vel risus feugiat</h2>
      <div slot="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div slot="actions">
        <a href="/learn-more">Learn more</a>
      </div>
    </umd-element-brand-chevron-promo>

    <!-- Animate on scroll into view, with eyebrow -->
    <umd-element-brand-chevron-promo data-animation="false">
      <p slot="eyebrow">Fearlessly Forward</p>
      <h2 slot="headline">Do Good</h2>
      <div slot="actions">
        <a href="/apply">Apply Now</a>
      </div>
    </umd-element-brand-chevron-promo>

    1.17.0

    Settings

    Member Visibility

    On This Page

    Custom ElementSlotsAttributes