ASCE Digital Style Guide
menu

Components

Links

Standard Links

Default state
Use the color #0273ba.
Altered states (:hover, :focus, or :active)
Use the color #059bd6.

Go to Confluence for details.

Examples

Default

This is a standard link inside of WYSIWYG text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.-arrow-link
This is an arrow link.
This is an arrow link w/ a span inside.
This is an external arrow link.
This is a gated arrow link.

:hover

Hover state

This is a standard link inside of WYSIWYG text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.-arrow-link
This is an arrow link.
This is an arrow link w/ a span inside.
This is an external arrow link.
This is a gated arrow link.

:focus

Focus state

This is a standard link inside of WYSIWYG text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.-arrow-link
This is an arrow link.
This is an arrow link w/ a span inside.
This is an external arrow link.
This is a gated arrow link.

:active

Active state

This is a standard link inside of WYSIWYG text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.-arrow-link
This is an arrow link.
This is an arrow link w/ a span inside.
This is an external arrow link.
This is a gated arrow link.

:disabled

Disabled state

This is a standard link inside of WYSIWYG text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.-arrow-link
This is an arrow link.
This is an arrow link w/ a span inside.
This is an external arrow link.
This is a gated arrow link.

View Markup
<div class="wysiwyg-content">
  <p>This is a <a class="{{modifier_class}}" href="#">standard link</a> inside of WYSIWYG text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div style="padding:.75em"></div>
<p>.-arrow-link<br>
<a href="#" class="-arrow-link {{modifier_class}}">This is an arrow link</a>.<br>
<a href="#" class="-arrow-link {{modifier_class}}">This is an arrow link w/ a <span>span</span> inside</a>.<br>
<a href="#" class="-arrow-link -external {{modifier_class}}">This is an external arrow link</a>.<br>
<a href="#" class="-arrow-link -lock {{modifier_class}}">This is a gated arrow link</a>.</p>
<div style="padding:.75em 0;background:linear-gradient(-45deg, #253a6e, #1d5389, #146ea6, #0c85be, #059bd6)">
<p>
<a href="#" class="-arrow-link -white {{modifier_class}}">This is a white arrow link</a>.<br>
<a href="#" class="-arrow-link -white {{modifier_class}}">This is a white arrow link w/ a <span>span</span> inside</a>.<br>
<a href="#" class="-arrow-link -white -external {{modifier_class}}">This is a white external arrow link</a>.<br>
<a href="#" class="-arrow-link -white -lock {{modifier_class}}">This is a white gated arrow link</a>.
</p>
</div>
Source:global-scss/_links.scss, line 1

Buttons

Class btn can be applied to <a> and <button> elements.

Use #0273ba for border-color, if a gradient is not possible.

Go to Confluence for details.

Examples

Default

a.btn

:disabled

Disabled state
a.btn

.-small

Small size
a.btn

.-white

Alternative style
a.btn

.-gray

Gray background
a.btn

.-external

External icon
a.btn

.-lock

Gated/Lock icon
a.btn
View Markup
  <a href="#" class="btn {{modifier_class}}">a.btn</a>
  <button type="button" class="btn {{modifier_class}}">button.btn</button>
Source:global-scss/_buttons.scss, line 1

Accordion

Go to Confluence for details.

Example
all courses

Accordion

Self-paced over 6 or 12 weeks, running several times a year, you will earn CEUs and PDHs upon completion.

View Markup
<!-- components/accordion/accordion.twig -->


<section class="accordion">

      <div class="eyebrow">all courses</div>
  
  <h2 class="accordion-title h3">Accordion</h2>

      <p class="accordion-description wysiwyg-content">Self-paced over 6 or 12 weeks, running several times a year, you will earn CEUs and PDHs upon completion.</p>
  
  <ul class="accordion-items">
          <li class="accordion-item" data-expanded="false">
        <h3 class="h5">
          <button
            id="accordion-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-1"
            class="accordion-trigger h5"
            aria-expanded="false"
            aria-controls="accordion-item-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-1"
          >Construction Engineering</button>
        </h3>
        <div
          id="accordion-item-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-1"
          class="accordion-content"
          role="region"
          aria-labelledby="accordion-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-1"
          aria-hidden="true"
        >

          <div class="wysiwyg-content">

                          <p class="accordion-item-subtitle">6 week course</p>
            
                          <div class="accordion-item-text"><img src='../images/fpo/shield.png'></img><p>Earn 10 personal development hours (PDH) or 1 continuing education unit (CEU).</p><p>Pricing $595 ASCE Members | $745 Non-Members</p></div>
            
                             <a href="#"
       class="btn accordion-item-button">
        <span>More about this program</span>
    </a>

            
                      <table class="accordion-item-table">
                            <tr>
                <td class="title"><a href="#">Developing Proposals</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                          </table>
                    </div>
        </div>
      </li>
          <li class="accordion-item" data-expanded="false">
        <h3 class="h5">
          <button
            id="accordion-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-2"
            class="accordion-trigger h5"
            aria-expanded="false"
            aria-controls="accordion-item-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-2"
          >Geographic Information Systems (GIS)</button>
        </h3>
        <div
          id="accordion-item-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-2"
          class="accordion-content"
          role="region"
          aria-labelledby="accordion-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-2"
          aria-hidden="true"
        >

          <div class="wysiwyg-content">

                          <p class="accordion-item-subtitle">6 week course</p>
            
                          <div class="accordion-item-text"><p>Earn 10 personal development hours (PDH) or 1 continuing education unit (CEU).</p><p>Pricing $595 ASCE Members | $745 Non-Members</p></div>
            
                             <a href="#"
       class="btn accordion-item-button">
        <span>More about this program</span>
    </a>

            
                      <table class="accordion-item-table">
                            <tr>
                <td class="title"><a href="#">Developing Proposals</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                          </table>
                    </div>
        </div>
      </li>
          <li class="accordion-item" data-expanded="false">
        <h3 class="h5">
          <button
            id="accordion-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-3"
            class="accordion-trigger h5"
            aria-expanded="false"
            aria-controls="accordion-item-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-3"
          >Low-Impact Development</button>
        </h3>
        <div
          id="accordion-item-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-3"
          class="accordion-content"
          role="region"
          aria-labelledby="accordion-7b2da548-0db9-4f5e-b3ee-bce324cc7f91-3"
          aria-hidden="true"
        >

          <div class="wysiwyg-content">

                          <p class="accordion-item-subtitle">6 week course</p>
            
                          <div class="accordion-item-text"><p>Earn 10 personal development hours (PDH) or 1 continuing education unit (CEU).</p><p>Pricing $595 ASCE Members | $745 Non-Members</p></div>
            
                             <a href="#"
       class="btn accordion-item-button">
        <span>More about this program</span>
    </a>

            
                      <table class="accordion-item-table">
                            <tr>
                <td class="title"><a href="#">Developing Proposals</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                            <tr>
                <td class="title"><a href="#">Principles of Construction Contracting</a></td>
                <td class="date">April 19 – May 28, 2021</td>
                <td class="link">
                      <a href="#"
       class="-arrow-link accordion-item-table-link">
        <span>Register</span>
    </a>

                </td>
              </tr>
                          </table>
                    </div>
        </div>
      </li>
      </ul>

</section>
Source:components/accordion/accordion.scss, line 1

Ad Space 300

Inline rectangle ad

Go to Confluence for details.

Example
View Markup
<!-- components/ad-space-300/ad-space-300.twig -->


<aside class="ad-space-300">
      <div class="ad-space-300-description">Advertising</div>
    <div class="ad-space-300-embed">
    <script type="text/javascript" language="JavaScript">
      aj_server = 'https://asce.nui.media/pipeline/'; aj_tagver = '1.0';
      aj_zone = 'asce'; aj_adspot = '649477'; aj_page = '0'; aj_dim = '48149'; aj_ch = ''; aj_ct = ''; aj_kw = '';
      aj_pv = true; aj_click = '';
    </script>
    <script type="text/javascript" language="JavaScript" src="https://img.nui.media/banners/ajtg.js"></script>
  </div>
</aside>
Source:components/ad-space-300/ad-space-300.scss, line 1

Ad Space-728

Leaderboard ad

Go to Confluence for details.

Example
View Markup
<!-- components/ad-space-728/ad-space-728.twig -->
<aside class="ad-space-728">
  <div class="ad-space-728-embed">
    <script type="text/javascript" language="JavaScript">
      aj_server = 'https://asce.nui.media/pipeline/'; aj_tagver = '1.0';
      aj_zone = 'asce'; aj_adspot = '649478'; aj_page = '0'; aj_dim = '48156'; aj_ch = ''; aj_ct = ''; aj_kw = '';
      aj_pv = true; aj_click = '';
    </script>
    <script type="text/javascript" language="JavaScript" src="https://img.nui.media/banners/ajtg.js"></script>
  </div>
</aside>
Source:components/ad-space-728/ad-space-728.scss, line 1

Ad Space-970

Billboard ad

Go to Confluence for details.

Example
View Markup
<!-- components/ad-space-970/ad-space-970.twig -->
<aside class="ad-space-970">
  <div class="ad-space-970-embed">
    <script type="text/javascript" language="JavaScript">
      aj_server = 'https://asce.nui.media/pipeline/'; aj_tagver = '1.0';
      aj_zone = 'asce'; aj_adspot = '655424'; aj_page = '0'; aj_dim ='641336'; aj_ch = ''; aj_ct = ''; aj_kw = '';
      aj_pv = true; aj_click = '';
    </script>
    <script type="text/javascript" language="JavaScript" src="https://img.nui.media/banners/ajtg.js"></script>
  </div>
</aside>
Source:components/ad-space-970/ad-space-970.scss, line 1

Alert Banner

Global alert styling.

Go to Confluence for details.

Example
View Markup
<!-- components/alert-banner/alert-banner.twig -->


<div class="alert-banner" role="banner" aria-hidden="false" data-cookie-expiration="72000">
  <div class="alert-banner-inner">

          <div class="alert-banner-alert">
        <div class="alert-banner-icon"></div>
        <div class="alert-banner-text wysiwyg-content">
          <div class="alert-banner-title">COVID-19 Outbreak: event cancellations and updates</div>
          <p></p>
        </div>
        <a href="#" class="btn">More Info</a>
      </div>

      <hr>
          <div class="alert-banner-alert">
        <div class="alert-banner-icon"></div>
        <div class="alert-banner-text wysiwyg-content">
          <div class="alert-banner-title">Shipping Delays: Book shipments are delayed up to 2 weeks due to a network outage at our fulfillment center.</div>
          <p>We take our commitment to members and customers very seriously and the fulfillment of ASCE Products and Services are among our top priorities. E-book purchases are available for immediate download. Questions? 1 800-548-2723</p>
        </div>
        <a href="#" class="btn">More Info</a>
      </div>

      
    
  </div>

  <button class="alert-banner-close js-alert-banner-close"><span class="sr-text">Close Alert Banner</span></button>

</div>
Source:components/alert-banner/alert-banner.scss, line 1

Article Header

AKA – Source Detail Hero

Go to Confluence for details.

Example

Title – Metus a nulla nunc nec rutrum rutrum arcu suspendisse

January 1, 2077
7
15 min read
sponsors
View Markup
<!-- components/article-header/article-header.twig -->

<div class="article-header">
  <div class="article-header-inner">

         <h2 class="h3 article-header-title">Title – Metus a nulla nunc nec rutrum rutrum arcu suspendisse</h2>
    
          <!-- components/hero-metadata/hero-metadata.twig -->
<section class="hero-metadata">
    <div class="hero-metadata-eyebrow eyebrow">January 1, 2077</div>
    
            <div class="hero-metadata-comment-count">
            <a href="#">7</a>
        </div>
                <div class="hero-metadata-duration">15 min read</div>
        
    <div class="hero-metadata-sponsors">
        <div class="hero-metadata-sponsors-text">sponsors</div>
        <a href="https://www.asce.org" class="hero-metadata-sponsors-logo">
            <img src="/images/fpo/sponsors-logo-1.svg"
                 alt="sponsor"
            />
        </a>
    </div>
</section>    
  </div>
</div>
Source:components/article-header/article-header.scss, line 1

Author Block

Go to Confluence for details.

Example
Title
Ben
Text

Credentials

Firstname Lastname

M.ASCE

Dr. Firstname Surname

M.ASCE

View Markup
<!-- components/author-block/author-block.twig -->
<section class="author-block">
  <div class="author-block-inner">
          <div class="author-block-title eyebrow">Title</div>
        <div class="author-block-items">
              <a
          class="author-block-item"
          href="#"
        >
          <div class="author-block-item-image">
            <img
              src="images/fpo/author-hero.png"
              alt="Ben"
            />
          </div>
          <div class="author-block-item-text h6">
            <div class="author-block-item-name">
              Text
            </div>
                        <p class="author-block-item-credentials">Credentials</p>
                      </div>
        </a>
              <a
          class="author-block-item -default"
          href="#"
        >
          <div class="author-block-item-image">
            <img
              src="/images/default-avatar.svg"
              alt=""
            />
          </div>
          <div class="author-block-item-text h6">
            <div class="author-block-item-name">
              Firstname Lastname
            </div>
                        <p class="author-block-item-credentials">M.ASCE</p>
                      </div>
        </a>
              <a
          class="author-block-item -default"
          href="#"
        >
          <div class="author-block-item-image">
            <img
              src="/images/default-avatar.svg"
              alt=""
            />
          </div>
          <div class="author-block-item-text h6">
            <div class="author-block-item-name">
              Dr. Firstname Surname
            </div>
                        <p class="author-block-item-credentials">M.ASCE</p>
                      </div>
        </a>
          </div>
  </div>
</section>
Source:components/author-block/author-block.scss, line 1

Author Hero

AKA – Source Contributor

Go to Confluence for details.

Example
Eyebrow

Name

Credentials

Ben
Bio – Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum aliquid autem voluptatem quae, sed, aliquam perferendis dolores explicabo provident voluptate saepe similique animi nobis tempore itaque tenetur, eos repellat voluptatum.
View Markup
<!-- components/author-hero/author-hero.twig -->

<div class="author-hero">
  <div class="author-hero-inner">

         <div class="h5 author-hero-eyebrow">Eyebrow</div>
    
    <h1 class="h1 author-hero-title">Name</h1>

          <p class="author-hero-credentials">Credentials</p>
    
    <div class="author-hero-content">
      <div class="author-hero-image">
        <img
          src="/images/fpo/author-hero.png"
          alt="Ben"
        />
      </div>
      <div class="author-hero-text">

        <div class="wysiwyg-content">
          <strong>Bio</strong> &ndash; Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum aliquid autem voluptatem quae, sed, aliquam perferendis dolores explicabo provident voluptate saepe similique animi nobis tempore itaque tenetur, eos repellat voluptatum.
        </div>

                  <nav class="author-hero-social-links" aria-label="Social Media Links">
            <span class="eyebrow author-hero-social-links-label">Connect:</span>
            <ul>
                              <li>
                  <a
                    class="icon-facebook"
                    href="https://facebook.com"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">facebook</span>
                  </a>
                </li>
                              <li>
                  <a
                    class="icon-linkedin"
                    href="https://linkedin.com"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">linkedin</span>
                  </a>
                </li>
                              <li>
                  <a
                    class="icon-twitter"
                    href="https://twitter.com"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">twitter</span>
                  </a>
                </li>
                              <li>
                  <a
                    class="icon-mail"
                    href="mailto:[email protected]"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">mail</span>
                  </a>
                </li>
                          </ul>
          </nav>
              </div>
    </div>
  </div>
</div>
Source:components/author-hero/author-hero.scss, line 1

Bio Social-Links

Go to Confluence for details.

Example
View Markup

<!-- components/bio-social-links/bio-social-links.twig -->
<nav class="bio-social-links" aria-label="Social Media Links">
  <span class="eyebrow author-hero-social-links-label">Connect with social label</span>
  <ul>
          <li>
        <a
          class="icon-instagram"
          href="https://www.instagram.com/asce_hq/?hl=en"
          target="_blank"
          rel="noopener"
        >
          <span class="sr-text">instagram</span>
        </a>
      </li>
          <li>
        <a
          class="icon-facebook"
          href="https://www.facebook.com/ASCE.org/"
          target="_blank"
          rel="noopener"
        >
          <span class="sr-text">facebook</span>
        </a>
      </li>
          <li>
        <a
          class="icon-linkedin"
          href="https://www.linkedin.com/company/americansocietyofcivilengineers"
          target="_blank"
          rel="noopener"
        >
          <span class="sr-text">linkedin</span>
        </a>
      </li>
          <li>
        <a
          class="icon-twitter"
          href="https://twitter.com/ASCETweets"
          target="_blank"
          rel="noopener"
        >
          <span class="sr-text">twitter</span>
        </a>
      </li>
          <li>
        <a
          class="icon-youtube"
          href="https://www.youtube.com/channel/UCriMdyJ4zLJflaNZSQKgABQ"
          target="_blank"
          rel="noopener"
        >
          <span class="sr-text">youtube</span>
        </a>
      </li>
          <li>
        <a
          class="icon-mail"
          href="mailto:[email protected]"
          target="_blank"
          rel="noopener"
        >
          <span class="sr-text">mail</span>
        </a>
      </li>
      </ul>
</nav>
Source:components/bio-social-links/bio-social-links.scss, line 1

Blubrry Embed

Go to Confluence for details.

Example
View Markup
<!-- components/blubrry-embed/blubrry-embed.twig -->
<section class="blubrry-embed">
  <iframe title="ASCE Plot Points Podcast" allowtransparency="true" height="315" width="100%" style="border: none; min-width: min(100%, 430px);height:315px;" scrolling="no" data-name="pb-iframe-player" src="https://www.podbean.com/player-v2/?i=z9ji7-d9ac4d-pbblog-playlist&share=0&download=1&fonts=Arial&skin=f6f6f6&font-color=auto&rtl=0&logo_link=episode_page&btn-skin=3267a3&size=315" loading="lazy" allowfullscreen=""></iframe>
</section>
Source:components/blubrry-embed/blubrry-embed.scss, line 1

Breadcrumbs

Go to Confluence for details.

Example
View Markup
<!-- components/breadcrumbs/breadcrumbs.twig -->
<nav class="breadcrumbs">
  <ul class="breadcrumbs-list">
    <li class="breadcrumbs-list-item"><a href="/" class="breadcrumbs-list-item-link icon-home"><span class="sr-text">Home</span></a></li>
          <li class="breadcrumbs-list-item">
        
        <a
          class="breadcrumbs-list-item-link -has-dropdown"
          href="#">
          Parent item
        </a>
                  <button class="breadcrumbs-list-item-arrow icon-chevron" tabindex="-1"><span class="sr-text">toggle dropdown</span></button>
          <ul class="breadcrumbs-list-item-dropdown">
                          <li>
                <a href="#">First child</a>
              </li>
                          <li>
                <a href="#">Second child</a>
              </li>
                      </ul>
              </li>
          <li class="breadcrumbs-list-item">
        
        <a
          class="breadcrumbs-list-item-link"
          href="#">
          Current item
        </a>
              </li>
      </ul>
</nav>
Source:components/breadcrumbs/breadcrumbs.scss, line 1

Brightcove Video-Playlist-Embed

Go to Confluence for details.

Example

Single video

Playlist player (Advanced)

Gallery experience player

View Markup
<!-- components/brightcove-video-playlist-embed/brightcove-video-playlist-embed.twig -->
<section class="brightcove-video-playlist-embed">

  <h1 class="h3">Single video</h1>
  <div style="position: relative; display: block; max-width: 960px;">
    <div style="padding-top: 56.25%;">
      <iframe src="https://players.brightcove.net/75114961001/default_default/index.html?videoId=6204737050001" allowfullscreen="" allow="encrypted-media" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
    </div>
  </div>

  

  <hr>
  <h1 class="h3">Playlist player (Advanced)</h1>
  <div class="vjs-playlist-player-container" style="max-width: 100%;">
    <video-js 
      data-account="75114961001" 
      data-player="rTJ40P9v6" 
      data-embed="default" 
      controls="" 
      data-video-id="" 
      data-playlist-id="1683543530138375701" 
      data-application-id="" 
      class="vjs-fluid"></video-js>
  </div>
  <script src="https://players.brightcove.net/75114961001/rTJ40P9v6_default/index.min.js"></script>
  <hr>
  
  <h1 class="h3">Gallery experience player</h1>
  <div data-experience="5faae13e66dc1c002247ef52"></div><script src="https://players.brightcove.net/75114961001/experience_5faae13e66dc1c002247ef52/live.js"></script>
</section>
Source:components/brightcove-video-playlist-embed/brightcove-video-playlist-embed.scss, line 1

Card Grid

Go to Confluence for details.

Example

Card Grid

find a local group
Project name

Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus. Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum.

find a local group
Project name

Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus

find a local group
Project name

Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus

find a local group
Project name

Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus

find a local group
Project name

Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus

View Markup
<!-- components/card-grid/card-grid.twig -->


<section class="card-grid">
  <div class="card-grid-inner">
    <h2 class="card-grid-title h4">Card Grid</h2>
    <div class="card-grid-items" data-items="5">

              <div class="card-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="eyebrow">find a local group</div>
          <a href="#" class="card-grid-item-title h5 js-link-event-link ">Project name</a>
          <p class="card-grid-item-text">Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus. Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum.</p>
        </div>
              <div class="card-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="eyebrow">find a local group</div>
          <a href="#" class="card-grid-item-title h5 js-link-event-link -external">Project name</a>
          <p class="card-grid-item-text">Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus</p>
        </div>
              <div class="card-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="eyebrow">find a local group</div>
          <a href="#" class="card-grid-item-title h5 js-link-event-link -gated">Project name</a>
          <p class="card-grid-item-text">Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus</p>
        </div>
              <div class="card-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="eyebrow">find a local group</div>
          <a href="#" class="card-grid-item-title h5 js-link-event-link ">Project name</a>
          <p class="card-grid-item-text">Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus</p>
        </div>
              <div class="card-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="eyebrow">find a local group</div>
          <a href="#" class="card-grid-item-title h5 js-link-event-link -external">Project name</a>
          <p class="card-grid-item-text">Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus</p>
        </div>
      
    </div>
  </div>
</section>
Source:components/card-grid/card-grid.scss, line 1

Card Grid Icons

Go to Confluence for details.

Example
Resources

Card Grid Icons

Prepare to earn the trust, respect and responsibility that comes with being a professionally licensed civil engineer. Explore additional certificate and accreditation programs ASCE offers to the industry-at-large.

CalendarPE Licensure

Conferences, online training, certifications and more for engineers at all levels in every role.

Read More
CalendarCertifications

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.

Read More
CalendarAccreditations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.

Read More
View Markup
<!-- components/card-grid-icons/card-grid-icons.twig -->


<section class="card-grid-icons -bg-right" >
  <div class="card-grid-icons-inner">

    <div class="card-grid-icons-intro">

      <div class="card-grid-icons-intro-text">

                  <div class="eyebrow">Resources</div>
        
        <h2 class="h4">Card Grid Icons</h2>

                  <p>Prepare to earn the trust, respect and responsibility that comes with being a professionally licensed civil engineer. Explore additional certificate and accreditation programs ASCE offers to the industry-at-large.</p>
        
        
      </div>

      
    </div>

    <div class="card-grid-icons-items">

      
        <div class="card-grid-icons-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500" >

          <div class="card-grid-icons-item-content">
            <div class="card-grid-icons-item-content-top">

                                                <img src="/images/icons/icon-virtual-speaker.svg" alt="Calendar" class="card-grid-icons-item-icon">
                              
              <a href="#" class="card-grid-icons-item-title h5 js-link-event-link">PE Licensure</a>
              <p class="card-grid-icons-item-text">Conferences, online training, certifications and more for engineers at all levels in every role.</p>

            </div>
            <div class="card-grid-icons-item-link">
                  <a href="#"
       class="-arrow-link ">
        <span>Read More</span>
    </a>

            </div>
          </div>

        </div>
      
        <div class="card-grid-icons-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500" >

          <div class="card-grid-icons-item-content">
            <div class="card-grid-icons-item-content-top">

                                                <img src="/images/icons/icon-asce-week.svg" alt="Calendar" class="card-grid-icons-item-icon">
                              
              <a href="#" class="card-grid-icons-item-title h5 js-link-event-link">Certifications</a>
              <p class="card-grid-icons-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>

            </div>
            <div class="card-grid-icons-item-link">
                  <a href="#"
       class="-arrow-link ">
        <span>Read More</span>
    </a>

            </div>
          </div>

        </div>
      
        <div class="card-grid-icons-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500" >

          <div class="card-grid-icons-item-content">
            <div class="card-grid-icons-item-content-top">

                                                <img src="/images/icons/icon-accreditation.svg" alt="Calendar" class="card-grid-icons-item-icon">
                              
              <a href="#" class="card-grid-icons-item-title h5 js-link-event-link">Accreditations</a>
              <p class="card-grid-icons-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>

            </div>
            <div class="card-grid-icons-item-link">
                  <a href="#"
       class="-arrow-link ">
        <span>Read More</span>
    </a>

            </div>
          </div>

        </div>
      
    </div>

  </div>
</section>
Source:components/card-grid-icons/card-grid-icons.scss, line 1

Careers Feed

Feed of featured jobs with an optional link to view all.

Go to Confluence for details.

Example

Featured jobs

View all active jobs
View Markup
<!-- components/careers-feed/careers-feed.twig -->


<section class="careers-feed -bg-left">
  <div class="careers-feed-inner">
    <div class="careers-feed-intro">
      <h2 class="h4">Featured jobs</h2>
      
            <a href="#"
       class="-arrow-link ">
        <span>View all active jobs</span>
    </a>


          </div>
    <div class="careers-feed-listings">
      <ul class="careers-feed-list">
                  <li class="careers-feed-listing">
            <a href="#" class="careers-feed-listing-name">Plant Engineer-Water Treatment Plant</a><br>
            Charleston Water System
             / Charleston, South Carolina
          </li>
                  <li class="careers-feed-listing">
            <a href="#" class="careers-feed-listing-name">Mid-Level Bridge Engineer</a><br>
            Wood
             / Topeka, Kansas
          </li>
                  <li class="careers-feed-listing">
            <a href="#" class="careers-feed-listing-name">Infrastructure Services Director</a><br>
            Town of Hilton Head Island
             / Hilton Head Island, South Carolina
          </li>
                  <li class="careers-feed-listing">
            <a href="#" class="careers-feed-listing-name">Professional Engineer</a><br>
            Des Moines Water Works
             / Des Moines, Iowa
          </li>
                  <li class="careers-feed-listing">
            <a href="#" class="careers-feed-listing-name">District Engineer</a><br>
            Marina Coast Water District
             / Marina, California
          </li>
                  <li class="careers-feed-listing">
            <a href="#" class="careers-feed-listing-name">Senior Geotechnical Engineer/ Engineering Geologist</a><br>
            Tectonic Engineering Consultants, Geologists & Land Surveyors D.P.C.
             / Forest Hills, New York
          </li>
              </ul>
    </div>
  </div>
</section>
Source:components/careers-feed/careers-feed.scss, line 1

Column Links

Go to Confluence for details.

Example

Asia

Australia/New Zealand

Europe

Middle East & Africa

Latin America

View Markup
<!-- components/column-links/column-links.twig -->


<section class="column-links" data-columns=4>
  <div class="column-links-inner">
          <div class="column-links-columns">
                  <div class="column-links-section">
            <h4 class="column-links-header h4">Asia</h4>
            <ul>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Mali</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Venezuela</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Senegal</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Turks and Caicos Islands</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Netherlands</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Swaziland</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Gabon</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Uganda</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Hong Kong</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Mayotte</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Argentina</span>
    </a>

                </li>
                          </ul>
          </div>
              </div>
          <div class="column-links-columns">
                  <div class="column-links-section">
            <h4 class="column-links-header h4">Australia/New Zealand</h4>
            <ul>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Kazakhstan</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>United Kingdom</span>
    </a>

                </li>
                          </ul>
          </div>
                  <div class="column-links-section">
            <h4 class="column-links-header h4">Europe</h4>
            <ul>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Israel</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Lithuania</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Jamaica</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Kenya</span>
    </a>

                </li>
                          </ul>
          </div>
              </div>
          <div class="column-links-columns">
                  <div class="column-links-section">
            <h4 class="column-links-header h4">Middle East & Africa</h4>
            <ul>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Brunei Darussalam</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Zimbabwe</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Ghana</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Belgium</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Russian Federation</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Namibia</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Fiji</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Moldova</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Comoros</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Saint Vincent and The Grenadines</span>
    </a>

                </li>
                          </ul>
          </div>
              </div>
          <div class="column-links-columns">
                  <div class="column-links-section">
            <h4 class="column-links-header h4">Latin America</h4>
            <ul>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Peru</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Nepal</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Austria</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Sao Tome and Principe</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Saint Lucia</span>
    </a>

                </li>
                              <li>
                      <a href="#"
       class="-arrow-link ">
        <span>Bangladesh</span>
    </a>

                </li>
                          </ul>
          </div>
              </div>
      </div>
</section>
Source:components/column-links/column-links.scss, line 1

Column List

Go to Confluence for details.

Example

Title example...Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo

Text example...Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.

  • Column 1 item 1 text

  • Column 1 item 2 text

  • Column 1 item 3 text

  • Column 1 item 4 text

  • Column 1 item 5 text

  • Column 2 item 1 text

  • Column 2 item 2 text

    with strong text

  • Column 2 item 3 text with anchor

  • Column 2 item 4 text with arrow link

  • Column 2 item 5 text with button

  • Column 3 item 1 text

  • Column 3 item 2 text

  • Column 3 item 3 text

  • Column 3 item 4 text

  • Column 3 item 5 text

View Markup
<!-- components/column-list/column-list.twig -->


<section class="column-list" data-columns=3>
  <div class="column-list-inner">

        <h2 class="column-list-header h4">Title example...Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo</h4>
   
        <p class="column-list-description">Text example...Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
   
   <div class="column-list-columns wysiwyg-content">
          <div class="column-list-column">
        <ul>
                      <li><p>Column 1 item 1 text</p></li>
                      <li><p>Column 1 item 2 text</p></li>
                      <li><p>Column 1 item 3 text</p></li>
                      <li><p>Column 1 item 4 text</p></li>
                      <li><p>Column 1 item 5 text</p></li>
                  </ul>
      </div>
          <div class="column-list-column">
        <ul>
                      <li><p>Column 2 item 1 text</p></li>
                      <li><p>Column 2 item 2 text</p><p>with <strong>strong text</strong></p></li>
                      <li><p>Column 2 item 3 text with <a href='#'>anchor</a></p></li>
                      <li><p>Column 2 item 4 text with <a href='#' class='-arrow-link'>arrow link</a></p></li>
                      <li><p>Column 2 item 5 text with <a href='#' class='btn'>button</a></p></li>
                  </ul>
      </div>
          <div class="column-list-column">
        <ul>
                      <li><p>Column 3 item 1 text</p></li>
                      <li><p>Column 3 item 2 text</p></li>
                      <li><p>Column 3 item 3 text</p></li>
                      <li><p>Column 3 item 4 text</p></li>
                      <li><p>Column 3 item 5 text</p></li>
                  </ul>
      </div>
        </div>

  </div>
</section>
Source:components/column-list/column-list.scss, line 1

Columns Slider

AKA – Column Rotator

Go to Confluence for details about the following:

Example

Columns Slider

image alt tag
Lorem

Placerat felis phasellus adipiscing sed pellentesque

Pellentesque maecenas elit interdum id proin sem pellentesque sit hendrerit

image alt tag
Ipsum

Placerat felis phasellus adipiscing sed pellentesque

Nisi cursus proin rutrum quam com modo tristique leo portaest

image alt tag
Dolor

Placerat felis phasellus adipiscing sed pellentesque

Tortor ut metus leo tristique aliquam cursus cursus

image alt tag
Sit Ahmet

Placerat felis phasellus adipiscing sed pellentesque

Nisi cursus proin rutrum quam commodo tristique leo portaest

image alt tag
Lorem

Placerat felis phasellus adipiscing sed pellentesque

Pellentesque maecenas elit interdum id proin sem pellentesque sit hendrerit

image alt tag
Lorem

Placerat felis phasellus adipiscing sed pellentesque

Pellentesque maecenas elit interdum id proin sem pellentesque sit hendrerit

See all events
View Markup



<section class="columns-slider -gray-bg">

  <div class="columns-slider-intro">

    
    <h2 class="h3">Columns Slider</h2>

    
  </div>

  <div
    class="columns-slider-slides"
    data-images="true"
  >

    
      <div class="columns-slider-slide js-link-event">

                  <div class="columns-slider-slide-img">
            <img src="/images/fpo/columns-slider.jpg" alt="image alt tag">
          </div>
        
                  <div class="eyebrow">Lorem</div>
        
        <h3 class="h5">
          <a
            href="http://www.google.com"
            class="columns-slider-slide-title js-link-event-link"
          >
            Placerat felis phasellus adipiscing sed pellentesque
          </a>
        </h3>

                  <p>Pellentesque maecenas elit interdum id proin sem pellentesque sit hendrerit</p>
        
        
      </div>

    
      <div class="columns-slider-slide js-link-event">

                  <div class="columns-slider-slide-img">
            <img src="/images/fpo/columns-slider.jpg" alt="image alt tag">
          </div>
        
                  <div class="eyebrow">Ipsum</div>
        
        <h3 class="h5">
          <a
            href="http://www.google.com"
            class="columns-slider-slide-title js-link-event-link"
          >
            Placerat felis phasellus adipiscing sed pellentesque
          </a>
        </h3>

                  <p>Nisi cursus proin rutrum quam com modo tristique leo portaest </p>
        
        
      </div>

    
      <div class="columns-slider-slide js-link-event">

                  <div class="columns-slider-slide-img">
            <img src="/images/fpo/columns-slider.jpg" alt="image alt tag">
          </div>
        
                  <div class="eyebrow">Dolor</div>
        
        <h3 class="h5">
          <a
            href="http://www.google.com"
            class="columns-slider-slide-title js-link-event-link"
          >
            Placerat felis phasellus adipiscing sed pellentesque
          </a>
        </h3>

                  <p>Tortor ut metus leo tristique aliquam cursus cursus </p>
        
        
      </div>

    
      <div class="columns-slider-slide js-link-event">

                  <div class="columns-slider-slide-img">
            <img src="/images/fpo/columns-slider.jpg" alt="image alt tag">
          </div>
        
                  <div class="eyebrow">Sit Ahmet</div>
        
        <h3 class="h5">
          <a
            href="http://www.google.com"
            class="columns-slider-slide-title js-link-event-link"
          >
            Placerat felis phasellus adipiscing sed pellentesque
          </a>
        </h3>

                  <p>Nisi cursus proin rutrum quam commodo tristique leo portaest </p>
        
        
      </div>

    
      <div class="columns-slider-slide js-link-event">

                  <div class="columns-slider-slide-img">
            <img src="/images/fpo/columns-slider.jpg" alt="image alt tag">
          </div>
        
                  <div class="eyebrow">Lorem</div>
        
        <h3 class="h5">
          <a
            href="http://www.google.com"
            class="columns-slider-slide-title js-link-event-link"
          >
            Placerat felis phasellus adipiscing sed pellentesque
          </a>
        </h3>

                  <p>Pellentesque maecenas elit interdum id proin sem pellentesque sit hendrerit</p>
        
        
      </div>

    
      <div class="columns-slider-slide js-link-event">

                  <div class="columns-slider-slide-img">
            <img src="/images/fpo/columns-slider.jpg" alt="image alt tag">
          </div>
        
                  <div class="eyebrow">Lorem</div>
        
        <h3 class="h5">
          <a
            href="http://www.google.com"
            class="columns-slider-slide-title js-link-event-link"
          >
            Placerat felis phasellus adipiscing sed pellentesque
          </a>
        </h3>

                  <p>Pellentesque maecenas elit interdum id proin sem pellentesque sit hendrerit</p>
        
        
      </div>

    
  </div>

      <div class="columns-slider-button">
          <a href="#"
       class="btn  -external">
        <span>See all events</span>
    </a>

    </div>
  
</section>
Source:components/columns-slider/columns-slider.scss, line 1

Committee Membership-Panel

Go to Confluence for details.

Example

Part of SEI Institute

Committee Members

  • Eric Joseph Aubry, P.E., M.ASCE
    President of Younger Member Forum
  • Dolores Salgado, P.E., M.ASCE
    Chair of Water Policy
A
  • Eric Joseph Aubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Ahah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Aronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Araun, P.E., M.ASCE
    President-elect
B
  • Eric Joseph Bubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Bhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Bronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Braun, P.E., M.ASCE
    President-elect
C
  • Eric Joseph Cubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Chah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Cronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Craun, P.E., M.ASCE
    President-elect
D
  • Eric Joseph Dubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Dhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Dronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Draun, P.E., M.ASCE
    President-elect
  • Eric Joseph Dubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Dhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Dronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Draun, P.E., M.ASCE
    President-elect
E
  • Eric Joseph Eubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Ehah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Eronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Eraun, P.E., M.ASCE
    President-elect
  • Eric Joseph Eubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Ehah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Eronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Eraun, P.E., M.ASCE
    President-elect
F
  • Eric Joseph Fubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Fhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Fronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Fraun, P.E., M.ASCE
    President-elect
  • Eric Joseph Fubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Fhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Fronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Fraun, P.E., M.ASCE
    President-elect
G
  • Eric Joseph Gubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Ghah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Gronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Graun, P.E., M.ASCE
    President-elect
  • Eric Joseph Gubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Ghah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Gronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Graun, P.E., M.ASCE
    President-elect
H
  • Eric Joseph Hubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Hhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Hronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Hraun, P.E., M.ASCE
    President-elect
I
  • Eric Joseph Iubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Ihah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Ironquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Iraun, P.E., M.ASCE
    President-elect
J
  • Eric Joseph Jubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Jhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Jronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Jraun, P.E., M.ASCE
    President-elect
K
  • Eric Joseph Kubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Khah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Kronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Kraun, P.E., M.ASCE
    President-elect
L
  • Eric Joseph Lubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Lhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Lronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Lraun, P.E., M.ASCE
    President-elect
M
  • Eric Joseph Mubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Mhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Mronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Mraun, P.E., M.ASCE
    President-elect
N
  • Eric Joseph Nubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Nhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Nronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Nraun, P.E., M.ASCE
    President-elect
O
  • Eric Joseph Oubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Ohah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Oronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Oraun, P.E., M.ASCE
    President-elect
P
  • Eric Joseph Pubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Phah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Pronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Praun, P.E., M.ASCE
    President-elect
Q
  • Eric Joseph Qubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Qhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Qronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Qraun, P.E., M.ASCE
    President-elect
R
  • Eric Joseph Rubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Rhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Rronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Rraun, P.E., M.ASCE
    President-elect
S
  • Eric Joseph Subry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Shah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Sronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Sraun, P.E., M.ASCE
    President-elect
T
  • Eric Joseph Tubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Thah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Tronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Traun, P.E., M.ASCE
    President-elect
U
  • Eric Joseph Uubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Uhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Uronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Uraun, P.E., M.ASCE
    President-elect
V
  • Eric Joseph Vubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Vhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Vronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Vraun, P.E., M.ASCE
    President-elect
W
  • Eric Joseph Wubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Whah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Wronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Wraun, P.E., M.ASCE
    President-elect
X
  • Eric Joseph Xubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Xhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Xronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Xraun, P.E., M.ASCE
    President-elect
Y
  • Eric Joseph Yubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Yhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Yronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Yraun, P.E., M.ASCE
    President-elect
Z
  • Eric Joseph Zubry, P.E., M.ASCE
    President of Younger Member Forum
  • Seema Chandrakant Zhah-Fairbank, Ph.D., P.E., M.ASCE
    President
  • Daniel Steven Zronquist, P.E., P.L.S, M.ASCE
    Past President
  • Jeffrey Zraun, P.E., M.ASCE
    President-elect
View Markup
<!-- components/committee-membership-panel/committee-membership-panel.twig -->


<section class="committee-membership-panel">

      <p class="committee-membership-panel-eyebrow">
      Part of
       <a href="#">SEI Institute</a>    </p>
  
  <h2 class="h4">Committee Members</h2>

      <ul class="committee-membership-panel-items -priority-members">
              <li class="committee-membership-panel-item">
          <span class="committee-membership-panel-name">Eric Joseph Aubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>          <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>        </li>
              <li class="committee-membership-panel-item">
          <span class="committee-membership-panel-name">Dolores Salgado</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>          <br><span class="committee-membership-panel-position">Chair of Water Policy</span>        </li>
          </ul>
  
  <div class="alpha-scroll">

    <nav class="alpha-scroll-nav" aria-label="Committee Membership Panel Navigation">
      <ul class="alpha-scroll-nav-letters">
                  <li>
            
            <button type="button" data-letter="A" class="alpha-scroll-nav-letter">A</button>
          </li>
                  <li>
            
            <button type="button" data-letter="B" class="alpha-scroll-nav-letter">B</button>
          </li>
                  <li>
            
            <button type="button" data-letter="C" class="alpha-scroll-nav-letter">C</button>
          </li>
                  <li>
            
            <button type="button" data-letter="D" class="alpha-scroll-nav-letter">D</button>
          </li>
                  <li>
            
            <button type="button" data-letter="E" class="alpha-scroll-nav-letter">E</button>
          </li>
                  <li>
            
            <button type="button" data-letter="F" class="alpha-scroll-nav-letter">F</button>
          </li>
                  <li>
            
            <button type="button" data-letter="G" class="alpha-scroll-nav-letter">G</button>
          </li>
                  <li>
            
            <button type="button" data-letter="H" class="alpha-scroll-nav-letter">H</button>
          </li>
                  <li>
            
            <button type="button" data-letter="I" class="alpha-scroll-nav-letter">I</button>
          </li>
                  <li>
            
            <button type="button" data-letter="J" class="alpha-scroll-nav-letter">J</button>
          </li>
                  <li>
            
            <button type="button" data-letter="K" class="alpha-scroll-nav-letter">K</button>
          </li>
                  <li>
            
            <button type="button" data-letter="L" class="alpha-scroll-nav-letter">L</button>
          </li>
                  <li>
            
            <button type="button" data-letter="M" class="alpha-scroll-nav-letter">M</button>
          </li>
                  <li>
            
            <button type="button" data-letter="N" class="alpha-scroll-nav-letter">N</button>
          </li>
                  <li>
            
            <button type="button" data-letter="O" class="alpha-scroll-nav-letter">O</button>
          </li>
                  <li>
            
            <button type="button" data-letter="P" class="alpha-scroll-nav-letter">P</button>
          </li>
                  <li>
            
            <button type="button" data-letter="Q" class="alpha-scroll-nav-letter">Q</button>
          </li>
                  <li>
            
            <button type="button" data-letter="R" class="alpha-scroll-nav-letter">R</button>
          </li>
                  <li>
            
            <button type="button" data-letter="S" class="alpha-scroll-nav-letter">S</button>
          </li>
                  <li>
            
            <button type="button" data-letter="T" class="alpha-scroll-nav-letter">T</button>
          </li>
                  <li>
            
            <button type="button" data-letter="U" class="alpha-scroll-nav-letter">U</button>
          </li>
                  <li>
            
            <button type="button" data-letter="V" class="alpha-scroll-nav-letter">V</button>
          </li>
                  <li>
            
            <button type="button" data-letter="W" class="alpha-scroll-nav-letter">W</button>
          </li>
                  <li>
            
            <button type="button" data-letter="X" class="alpha-scroll-nav-letter">X</button>
          </li>
                  <li>
            
            <button type="button" data-letter="Y" class="alpha-scroll-nav-letter">Y</button>
          </li>
                  <li>
            
            <button type="button" data-letter="Z" class="alpha-scroll-nav-letter">Z</button>
          </li>
              </ul>
    </nav>

    <div class="alpha-scroll-content">

      
        <section class="alpha-scroll-section" data-section="a">
          <div class="alpha-scroll-section-header-letter">A</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Aubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Ahah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Aronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Araun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="b">
          <div class="alpha-scroll-section-header-letter">B</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Bubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Bhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Bronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Braun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="c">
          <div class="alpha-scroll-section-header-letter">C</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Cubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Chah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Cronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Craun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="d">
          <div class="alpha-scroll-section-header-letter">D</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Dubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Dhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Dronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Draun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Dubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Dhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Dronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Draun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="e">
          <div class="alpha-scroll-section-header-letter">E</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Eubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Ehah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Eronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Eraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Eubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Ehah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Eronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Eraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="f">
          <div class="alpha-scroll-section-header-letter">F</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Fubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Fhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Fronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Fraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Fubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Fhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Fronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Fraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="g">
          <div class="alpha-scroll-section-header-letter">G</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Gubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Ghah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Gronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Graun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Gubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Ghah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Gronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Graun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="h">
          <div class="alpha-scroll-section-header-letter">H</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Hubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Hhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Hronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Hraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="i">
          <div class="alpha-scroll-section-header-letter">I</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Iubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Ihah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Ironquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Iraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="j">
          <div class="alpha-scroll-section-header-letter">J</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Jubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Jhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Jronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Jraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="k">
          <div class="alpha-scroll-section-header-letter">K</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Kubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Khah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Kronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Kraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="l">
          <div class="alpha-scroll-section-header-letter">L</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Lubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Lhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Lronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Lraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="m">
          <div class="alpha-scroll-section-header-letter">M</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Mubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Mhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Mronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Mraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="n">
          <div class="alpha-scroll-section-header-letter">N</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Nubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Nhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Nronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Nraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="o">
          <div class="alpha-scroll-section-header-letter">O</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Oubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Ohah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Oronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Oraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="p">
          <div class="alpha-scroll-section-header-letter">P</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Pubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Phah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Pronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Praun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="q">
          <div class="alpha-scroll-section-header-letter">Q</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Qubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Qhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Qronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Qraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="r">
          <div class="alpha-scroll-section-header-letter">R</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Rubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Rhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Rronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Rraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="s">
          <div class="alpha-scroll-section-header-letter">S</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Subry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Shah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Sronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Sraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="t">
          <div class="alpha-scroll-section-header-letter">T</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Tubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Thah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Tronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Traun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="u">
          <div class="alpha-scroll-section-header-letter">U</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Uubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Uhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Uronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Uraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="v">
          <div class="alpha-scroll-section-header-letter">V</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Vubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Vhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Vronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Vraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="w">
          <div class="alpha-scroll-section-header-letter">W</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Wubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Whah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Wronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Wraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="x">
          <div class="alpha-scroll-section-header-letter">X</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Xubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Xhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Xronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Xraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="y">
          <div class="alpha-scroll-section-header-letter">Y</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Yubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Yhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Yronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Yraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
        <section class="alpha-scroll-section" data-section="z">
          <div class="alpha-scroll-section-header-letter">Z</div>

                      <ul class="committee-membership-panel-items">
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Eric Joseph Zubry</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President of Younger Member Forum</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Seema Chandrakant Zhah-Fairbank</span>, <span class="committee-membership-panel-credentials">Ph.D., P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Daniel Steven Zronquist</span>, <span class="committee-membership-panel-credentials">P.E., P.L.S, M.ASCE</span>                  <br><span class="committee-membership-panel-position">Past President</span>                </li>
                              <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">Jeffrey Zraun</span>, <span class="committee-membership-panel-credentials">P.E., M.ASCE</span>                  <br><span class="committee-membership-panel-position">President-elect</span>                </li>
                          </ul>
          
        </section>

      
    </div>
  </div>
</section>
Source:components/committee-membership-panel/committee-membership-panel.scss, line 1

Comparison

Go to Confluence for details.

Example

Lorem ipsum dolor sit amet consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.

Optional button
Optional secondary link
Title goes here

$XXX

Lorem ipsum dolor sit amet consectetur adipiscing aute.

Button
  • Exercitation
  • Proident non laborum
  • Occaecat nostrud aliquip ex sed eiusmod veniam culpa officia
  • Incididunt fugiat qui minim sed tempor
Title goes here

$XXX

Lorem ipsum dolor sit amet consectetur dolor sit amet consectetur.

Button
  • Proident culpa qui officia deserunt occaecat
  • Consequat lorem ipsum
  • Laboris ullamco exercitation voluptate
View Markup

<!-- components/comparison/comparison.twig -->
<article class="comparison">

  <div class="comparison-inner">

    <div class="comparison-intro">

              <h2 class="h3">Lorem ipsum dolor sit amet consectetur</h2>
      
              <div class="comparison-intro-text wysiwyg-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
      
              <div class="comparison-intro-button">
              <a href=""
       class="btn -small">
        <span>Optional button</span>
    </a>

        </div>
      
              <div class="comparison-intro-secondary-link">
              <a href=""
       class="-arrow-link ">
        <span>Optional secondary link</span>
    </a>

        </div>
      
    </div>

    <div
      class="comparison-items"
      data-count="2"
    >

              <div class="comparison-item">
          <div class="comparison-item-main">

                          <div class="comparison-eyebrow">Title goes here</div>
            
                          <h3 class="h3">$XXX</h3>
            
                          <div class="comparison-item-text wysiwyg-content"><p>Lorem ipsum dolor sit amet consectetur adipiscing aute.</p></div>
            
                          <div class="comparison-item-button">
                    <a href="#"
       class="btn -gray -small">
        <span>Button</span>
    </a>

              </div>
            
          </div>

                      <div class="comparison-item-secondary wysiwyg-content">
              <ul><li>Exercitation</li><li>Proident non laborum</li><li>Occaecat nostrud aliquip ex sed eiusmod veniam culpa officia</li><li>Incididunt fugiat qui minim sed tempor</li></ul>
            </div>
          
        </div>
              <div class="comparison-item">
          <div class="comparison-item-main">

                          <div class="comparison-eyebrow">Title goes here</div>
            
                          <h3 class="h3">$XXX</h3>
            
                          <div class="comparison-item-text wysiwyg-content"><p>Lorem ipsum dolor sit amet consectetur dolor sit amet consectetur.</p></div>
            
                          <div class="comparison-item-button">
                    <a href="#"
       class="btn -gray -small">
        <span>Button</span>
    </a>

              </div>
            
          </div>

                      <div class="comparison-item-secondary wysiwyg-content">
              <ul><li>Proident culpa qui officia deserunt occaecat</li><li>Consequat lorem ipsum</li><li>Laboris ullamco exercitation voluptate</li></ul>
            </div>
          
        </div>
      
    </div>

  </div>

</article>
Source:components/comparison/comparison.scss, line 1

Contact Panel

Go to Confluence for details.

Example

Title – Contact panel

Heading – Column 1
Position – Column 1
  • Phone number - Column 1
  • Email – Column 1
  • Text Field 1 – Column 1
  • Text Field 2 – Column 1
Heading – Column 2
Position – Column 2
  • Phone number - Column 2
  • Email – Column 1
  • Text Field 1 – Column 2
  • Text Field 2 – Column 2
Heading – Column 3
Position – Column 3
  • Phone number - Column 3
  • Email – Column 3
  • Text Field 1 – Column 3
  • Text Field 2 – Column 3
View Markup
<!-- components/contact-panel/contact-panel.twig -->


<section class="contact-panel -bg-left">
  <div class="contact-panel-inner">
    <h4 class="contact-panel-title h4">Title – Contact panel</h4>
    <div class="contact-panel-wrapper">
              <div class="contact-panel-column">
          <h5 class="contact-panel-header h6">Heading – Column 1</h5>
                      <h6 class="contact-panel-position h5">Position – Column 1</h6>
                    <ul>
                        <li>Phone number - Column 1</li>
                                      <li><a href="mailto:Email – Column 1">Email – Column 1</a></li>
                                      <li>Text Field 1 – Column 1</li>
                          <li>Text Field 2 – Column 1</li>
                      </ul>
                    <ul class="social-share-services">
            <li><a data-service="linkedin" href="#"><span class="sr-text">Share on LinkedIn</span></a></li>
            <li><a data-service="facebook" href="#"><span class="sr-text">Share on Facebook</span></a></li>
            <li><a data-service="twitter" href="#"><span class="sr-text">Share on Twitter</span></a></li>
            <li><a data-service="youtube" href="#"><span class="sr-text">Share on Youtube</span></a></li>
            <li><a data-service="instagram" href="#"><span class="sr-text">Share on Instgram</span></a></li>
          </ul>
                  </div>
              <div class="contact-panel-column">
          <h5 class="contact-panel-header h6">Heading – Column 2</h5>
                      <h6 class="contact-panel-position h5">Position – Column 2</h6>
                    <ul>
                        <li>Phone number - Column 2</li>
                                      <li><a href="mailto:Email – Column 1">Email – Column 1</a></li>
                                      <li>Text Field 1 – Column 2</li>
                          <li>Text Field 2 – Column 2</li>
                      </ul>
                    <ul class="social-share-services">
            <li><a data-service="linkedin" href="#"><span class="sr-text">Share on LinkedIn</span></a></li>
            <li><a data-service="facebook" href="#"><span class="sr-text">Share on Facebook</span></a></li>
            <li><a data-service="twitter" href="#"><span class="sr-text">Share on Twitter</span></a></li>
            <li><a data-service="youtube" href="#"><span class="sr-text">Share on Youtube</span></a></li>
            <li><a data-service="instagram" href="#"><span class="sr-text">Share on Instgram</span></a></li>
          </ul>
                  </div>
              <div class="contact-panel-column">
          <h5 class="contact-panel-header h6">Heading – Column 3</h5>
                      <h6 class="contact-panel-position h5">Position – Column 3</h6>
                    <ul>
                        <li>Phone number - Column 3</li>
                                      <li><a href="mailto:Email – Column 3">Email – Column 3</a></li>
                                      <li>Text Field 1 – Column 3</li>
                          <li>Text Field 2 – Column 3</li>
                      </ul>
                    <ul class="social-share-services">
            <li><a data-service="linkedin" href="#"><span class="sr-text">Share on LinkedIn</span></a></li>
            <li><a data-service="facebook" href="#"><span class="sr-text">Share on Facebook</span></a></li>
            <li><a data-service="twitter" href="#"><span class="sr-text">Share on Twitter</span></a></li>
            <li><a data-service="youtube" href="#"><span class="sr-text">Share on Youtube</span></a></li>
            <li><a data-service="instagram" href="#"><span class="sr-text">Share on Instgram</span></a></li>
          </ul>
                  </div>
          </div>
  </div>
</section>
Source:components/contact-panel/contact-panel.scss, line 1

Coveo Filter Controller

Go to Confluence for details.

Examples

Default

Filters

.-closed

Closed state
Filters

.-opened

Opened state
Filters
View Markup
<!-- components/coveo-filter-controller/coveo-filter-controller.twig -->

<a href="#" class="coveo-filter-controller {{modifier_class}}">Filters</a>
Source:components/coveo-filter-controller/coveo-filter-controller.scss, line 1

Coveo Wrapper

Go to Confluence for details.

Example
View Markup
<!-- components/coveo-wrapper/coveo-wrapper.twig -->
<section class="coveo-wrapper">

</section>
Source:components/coveo-wrapper/coveo-wrapper.scss, line 1

CTA Panel

Go to Confluence for details.

Example
COVID-19 Alert

Rich text content. ASCE is continuing to monitor the COVID-19 situation both internationally and domestically with guidance from federal, state and local governments and health officials, including the CDC and WHO, in determining whether to cancel or postpone scheduled events.

Please visit the ASCE COVID-19 resource page for more specific information.

Optional Link
View Markup
<!-- components/cta-panel/cta-panel.twig -->


<section class="cta-panel">
  <div class="cta-panel-label">COVID-19 Alert</div>
  <div class="cta-panel-content">
    <div class="cta-panel-content-inner">
      <div class="wysiwyg-content">
        <p><strong>Rich text content.</strong> ASCE is continuing to monitor the COVID-19 situation both internationally and domestically with guidance from federal, state and local governments and health officials, including the CDC and WHO, in determining whether to cancel or postpone scheduled events.</p><p>Please visit the <a href="#">ASCE COVID-19 resource page</a> for more specific information.</p>
      </div>

              <div class="cta-panel-secondary-link">
              <a href="#"
       class="-arrow-link ">
        <span>Optional Link</span>
    </a>

        </div>
          </div>
  </div>
</section>
Source:components/cta-panel/cta-panel.scss, line 1

Disqus Chat

Just a demo.

Go to Confluence for details.

Example
View Markup
<!-- components/contact-panel/disqus.twig -->
<section id="disqus_thread" class="disqus_chat"></section>
<script>
    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://asce-1.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
Source:components/disqus/disqus.scss, line 1

Double Promo

AKA – Promo Grid

Go to Confluence for details.

Example
ASCE dots

Double Promo

ASCE double promo featured image
Optional Eyebrow
Attend career & growth events

Optional text Interactive, online training with access to recorded sessions to help you prepare for the following

See Events
ASCE double promo featured image
Optional Eyebrow
Explore career & growth opportunities

Optional text Interactive, online training with access to recorded sessions to help you prepare for the following

Explore Opportunities
ASCE double promo featured image
Optional Eyebrow
Explore career & growth opportunities

Optional text Interactive, online training with access to recorded sessions to help you prepare for the following

Explore Opportunities
ASCE double promo featured image
Optional Eyebrow
Explore career & growth opportunities

Optional text Interactive, online training with access to recorded sessions to help you prepare for the following

Explore Opportunities
View Markup
<!-- components/double-promo/double-promo.twig -->


<section class="double-promo -bg-left ">

  <div class="double-promo-inner">

    <img class="dots" src="../images/white-dots-2.svg" alt="ASCE dots">

    <h2 class="double-promo-title h3">Double Promo</h2>

    <div class="double-promo-items">

              <div class="double-promo-item js-link-event">

                      <div class="double-promo-item-image">
              <img src="../images/fpo/double-promo-1.jpg" alt="ASCE double promo featured image">
            </div>
          
          <div class="double-promo-item-content">

                          <div class="eyebrow">Optional Eyebrow</div>
            
            
              <a href="https://google.com" class="h4 double-promo-item-heading js-link-event-link">Attend career & growth events</a>

              
                          <p class="double-promo-item-description">Optional text Interactive, online training with access to recorded sessions to help you prepare for the following</p>
            
                              <a href="https://google.com"
       class="btn double-promo-item-button">
        <span>See Events</span>
    </a>

            
          </div>

        </div>
              <div class="double-promo-item js-link-event">

                      <div class="double-promo-item-image">
              <img src="../images/fpo/double-promo-2.jpg" alt="ASCE double promo featured image">
            </div>
          
          <div class="double-promo-item-content">

                          <div class="eyebrow">Optional Eyebrow</div>
            
            
              <a href="https://google.com" class="h4 double-promo-item-heading js-link-event-link">Explore career & growth opportunities</a>

              
                          <p class="double-promo-item-description">Optional text Interactive, online training with access to recorded sessions to help you prepare for the following</p>
            
                              <a href="https://google.com"
       class="btn double-promo-item-button -external">
        <span>Explore Opportunities</span>
    </a>

            
          </div>

        </div>
              <div class="double-promo-item js-link-event">

                      <div class="double-promo-item-image">
              <img src="../images/fpo/double-promo-2.jpg" alt="ASCE double promo featured image">
            </div>
          
          <div class="double-promo-item-content">

                          <div class="eyebrow">Optional Eyebrow</div>
            
            
              <a href="#" class="h4 double-promo-item-heading js-link-event-link">Explore career & growth opportunities</a>

              
                          <p class="double-promo-item-description">Optional text Interactive, online training with access to recorded sessions to help you prepare for the following</p>
            
                              <a href="#"
       class="btn double-promo-item-button -external">
        <span>Explore Opportunities</span>
    </a>

            
          </div>

        </div>
              <div class="double-promo-item js-link-event">

                      <div class="double-promo-item-image">
              <img src="../images/fpo/double-promo-2.jpg" alt="ASCE double promo featured image">
            </div>
          
          <div class="double-promo-item-content">

                          <div class="eyebrow">Optional Eyebrow</div>
            
            
              <a href="#" class="h4 double-promo-item-heading js-link-event-link">Explore career & growth opportunities</a>

              
                          <p class="double-promo-item-description">Optional text Interactive, online training with access to recorded sessions to help you prepare for the following</p>
            
                              <a href="#"
       class="btn double-promo-item-button -external">
        <span>Explore Opportunities</span>
    </a>

            
          </div>

        </div>
      
    </div>

  </div>
</section>
Source:components/double-promo/double-promo.scss, line 1

Enroll Form

Go to Confluence for details.

Example
Enroll Form eyebrow
Button text
Add to calendar
View Markup

<!-- components/enroll-form/enroll-form.twig -->
<section class="enroll-form">

  <div class="eyebrow enroll-form-eyebrow">Enroll Form eyebrow</div>

  <form action="">
    <div class="enroll-form-select">
      <label for="event-enroll" class="h5">Select a date:</label>
      <div class="enroll-form-wrapper">
        <select name="event-enroll" id="event-enroll">
                      <option value="Nov-14">November 14, 2021</option>
                      <option value="Nov-20">November 20, 2021</option>
                      <option value="Nov-28">November 28, 2021</option>
                  </select>
        <div class="enroll-form-button">
          <a href="#" class="btn">Button text</a>
        </div>
      </div>
    </div>
  </form>

      <div class="add-to-calendar">
      <a href="#" class="btn">Add to calendar</a>
    </div>
  </section>
Source:components/enroll-form/enroll-form.scss, line 1

Error Hero

Example 404 Error page

Go to Confluence for details.

Example
error page image alternative text

ERROR 404

Page could not be found. Please use the navigation to find what you’re looking for.

Home PageSite Search
View Markup
<!-- components/error-hero/error-hero.twig -->



<section class="error-hero">
  <img
    src="/images/fpo/error-page-image.jpeg"
    alt="error page image alternative text"
  >
  <div class="inner">

    <h1 class="h1">ERROR 404</h1>
    <p>Page could not be found. Please use the navigation to find what you’re looking for.</p>
    <div class="buttons">
              <a class="error-hero-btn" href="#">Home Page</a>
              <a class="error-hero-btn" href="#">Site Search</a>
          </div>

  </div>
</section>
Source:components/error-hero/error-hero.scss, line 1

Events Slider

AKA – Column Rotator – Events

Go to Confluence for details.

Example
Committee Calendar

Events Slider: No Images

January 2-10, 2021

Example committee meeting or SEI event

Seattle, WA

January 4-8, 2021

Example committee meeting or SEI event

Virtual

February 2-5, 2021

Example committee meeting or SEI event

Minneapolis, MN

March 11-15, 2021

Lorem ipsum dolor sit amet, consectetur

San Franciso, CA

Sponsored by Sketchup
January 20-23, 2021

Placerat felis phasellus adipiscing sed pellentesque

Minneapolis, MN

January 20-23, 2021

Placerat felis phasellus adipiscing sed pellentesque

Minneapolis, MN

See all
View Markup
<!-- components/events-slider/events-slider.twig -->


<section class="events-slider">

  <div class="events-slider-intro">

          <div class="eyebrow -centered">Committee Calendar</div>
    
    <h2 class="h3">Events Slider: No Images</h2>

    
  </div>

  <div class="events-slider-slides" data-images="false">

    
      <div class="events-slider-slide js-link-event">

        
                  <div class="events-slider-slide-date">January 2-10, 2021</div>
        
        <h3 class="h5"><a href="http://www.google.com" class="events-slider-slide-title js-link-event-link">Example committee meeting or SEI event</a></h3>

                  <p class="events-slider-slide-location">Seattle, WA</p>
        
        
      </div>

    
      <div class="events-slider-slide js-link-event">

        
                  <div class="events-slider-slide-date">January 4-8, 2021</div>
        
        <h3 class="h5"><a href="http://www.google.com" class="events-slider-slide-title js-link-event-link">Example committee meeting or SEI event</a></h3>

                  <p class="events-slider-slide-location">Virtual</p>
        
        
      </div>

    
      <div class="events-slider-slide js-link-event">

        
                  <div class="events-slider-slide-date">February 2-5, 2021</div>
        
        <h3 class="h5"><a href="http://www.google.com" class="events-slider-slide-title js-link-event-link">Example committee meeting or SEI event</a></h3>

                  <p class="events-slider-slide-location">Minneapolis, MN</p>
        
        
      </div>

    
      <div class="events-slider-slide js-link-event">

        
                  <div class="events-slider-slide-date">March 11-15, 2021</div>
        
        <h3 class="h5"><a href="http://www.google.com" class="events-slider-slide-title js-link-event-link">Lorem ipsum dolor sit amet, consectetur</a></h3>

                  <p class="events-slider-slide-location">San Franciso, CA</p>
        
                  <div class="events-slider-slide-sponsor">
            Sponsored by Sketchup
          </div>
        
      </div>

    
      <div class="events-slider-slide js-link-event">

        
                  <div class="events-slider-slide-date">January 20-23, 2021</div>
        
        <h3 class="h5"><a href="http://www.google.com" class="events-slider-slide-title js-link-event-link">Placerat felis phasellus adipiscing sed pellentesque</a></h3>

                  <p class="events-slider-slide-location">Minneapolis, MN</p>
        
        
      </div>

    
      <div class="events-slider-slide js-link-event">

        
                  <div class="events-slider-slide-date">January 20-23, 2021</div>
        
        <h3 class="h5"><a href="http://www.google.com" class="events-slider-slide-title js-link-event-link">Placerat felis phasellus adipiscing sed pellentesque</a></h3>

                  <p class="events-slider-slide-location">Minneapolis, MN</p>
        
        
      </div>

    
  </div>

  
    <div class="events-slider-button">

          <a href="#"
       class="btn ">
        <span>See all</span>
    </a>


    </div>

  
</section>
Source:components/events-slider/events-slider.scss, line 1

Events Sponsor

Go to Confluence for details.

Example
sponsored by
View Markup
<!-- components/events-sponsor/events-sponsor.twig -->

<section class="events-sponsor">
    <div class="events-sponsor-text">sponsored by</div>
    <a href="#" class="events-sponsor-logo">
        <img src="/images/fpo/sponsors-logo-1.svg" alt="ASCE sponsor logo">
    </a>
</section>
Source:components/events-sponsor/events-sponsor.scss, line 1

Events Sub-Nav

AKA – Education & Event Sub Nav

Links that do not fit into the allotted space are added to the "More Info" dropdown.

Go to Confluence for details.

Example
View Markup
<!-- components/events-sub-nav/events-sub-nav.twig -->

<div class="events-sub-nav">
  <div class="events-sub-nav-inner">
    <nav class="events-sub-nav-links">
      <ul>
                  <li><a href="#" class="events-sub-nav-link -active">Active Link</a></li>
                  <li><a href="#" class="events-sub-nav-link ">Second Link</a></li>
                  <li><a href="#" class="events-sub-nav-link ">Third Link</a></li>
                  <li><a href="#" class="events-sub-nav-link ">Fourth Link</a></li>
                  <li><a href="#" class="events-sub-nav-link ">Fifth Link</a></li>
                  <li><a href="#" class="events-sub-nav-link ">Sixth Link</a></li>
                  <li><a href="#" class="events-sub-nav-link ">Seventh Link</a></li>
                  <li><a href="#" class="events-sub-nav-link ">Eighth Link</a></li>
              </ul>
    </nav>
  </div>
</div>
Source:components/events-sub-nav/events-sub-nav.scss, line 1

Find a-Group-Search

Go to Confluence for details.

Example
Enter Your U.S. Zip Code
Outside the U.S.
View Markup

<!-- components/find-a-group-search/find-a-group-search.twig -->
<section class="find-a-group-search">
    <div class="find-a-group-search-inner">
        <form class="find-a-group-search-form">
            <div class="find-a-group-search-form-left">
                <div class="find-a-group-search-text h5 -white">Enter Your U.S. Zip Code</div>
            </div>
            <div class="find-a-group-search-form-right">
                <label for="find-a-group-search-form-input" class="sr-text">Zip Code Search</label>
                <input id="find-a-group-search-form-input" type="text" name="" value="" placeholder="zip code"
                       class="find-a-group-search-form-input">
                <button type="submit" class="find-a-group-search-form-submit">
                    <span class="sr-text">Search</span>
                </button>
            </div>
            <div class="find-a-group-search-form-link">
                <a href="#"><span>Outside the U.S.</span></a>
            </div>
        </form>
    </div>

    <div class="find-a-group-search-results-loader loader"></div>

    <div class="find-a-group-search-results"></div>
</section>
Source:components/find-a-group-search/find-a-group-search.scss, line 1

Full Width-Slider

Go to Confluence for details.

Example
image credit
slide eyebrow text
Slide Title

slide description

slide eyebrow text
Unlinked Slide Title

slide description

slide eyebrow text
Descriptionless Slide Title
Eybrowless Slide Title

slide description

View Markup


  
<section class="full-width-slider">

  <div class="full-width-slider-inner">
    <div class="full-width-slider-slick" data-slider="true">

              <div class="full-width-slide js-link-event">
          <div class="full-width-slide-inner">
            <div class="full-width-slide-image" style="background-image: url('/images/fpo/full-width-image.jpeg') ;"></div>

                          <div class="photo-credit full-width-slide-credit">image credit</div>
            
            <div class="full-width-slide-content">

                              <div class="eyebrow full-width-slide-eyebrow">slide eyebrow text</div>
              
                              <a href="#" class="h4 full-width-slide-title js-link-event-link">Slide Title</a>
              
                              <p class="full-width-slide-description">slide description</p>
              
            </div>
          </div>
        </div>
              <div class="full-width-slide ">
          <div class="full-width-slide-inner">
            <div class="full-width-slide-image" style="background-image: url('/images/fpo/image-slider-1.jpeg') ;"></div>

            
            <div class="full-width-slide-content">

                              <div class="eyebrow full-width-slide-eyebrow">slide eyebrow text</div>
              
                              <div class="full-width-slide-title h4">Unlinked Slide Title</div>
              
                              <p class="full-width-slide-description">slide description</p>
              
            </div>
          </div>
        </div>
              <div class="full-width-slide js-link-event">
          <div class="full-width-slide-inner">
            <div class="full-width-slide-image" style="background-image: url('/images/fpo/image-slider-2.jpeg') ;"></div>

            
            <div class="full-width-slide-content">

                              <div class="eyebrow full-width-slide-eyebrow">slide eyebrow text</div>
              
                              <a href="#" class="h4 full-width-slide-title js-link-event-link">Descriptionless Slide Title</a>
              
              
            </div>
          </div>
        </div>
              <div class="full-width-slide js-link-event">
          <div class="full-width-slide-inner">
            <div class="full-width-slide-image" style="background-image: url('/images/fpo/image-slider-3.jpeg') ;"></div>

            
            <div class="full-width-slide-content">

              
                              <a href="#" class="h4 full-width-slide-title js-link-event-link">Eybrowless Slide Title</a>
              
                              <p class="full-width-slide-description">slide description</p>
              
            </div>
          </div>
        </div>
          </div>
  </div>
  </section>
Source:components/full-width-slider/full-width-slider.scss, line 1

Gated Content-Modal

Go to Confluence for details.

Example
Gated Content Title
Join ASCELogin
Join the premier association for civil engineers in the world.
membership link
View Markup
<!-- components/gated-content-modal/gated-content-modal.twig -->


<div class="gated-content-modal">
  <div class="gated-content-modal-inner">

    <div class="gated-content-modal-content">
      <div class="gated-content-modal-title"><h6 class="h6">Gated Content Title</h6></div>
      <div class="gated-content-modal-button">
                    <a href="#"
       class="btn ">
        <span>Join ASCE</span>
    </a>

                 <a href="#"
       class="btn ">
        <span>Login</span>
    </a>

           </div>
       <h6 class="gated-content-modal-description h6">Join the premier association for civil engineers in the world.</h6>
             <a href="#"
       class="-arrow-link ">
        <span>membership link</span>
    </a>

       </div>
  </div>
</div>
Source:components/gated-content-modal/gated-content-modal.scss, line 1

Hero Meta-Data

Go to Confluence for details.

Example
eyebrow text
1
12 min read
sponsors
View Markup
<!-- components/hero-metadata/hero-metadata.twig -->
<section class="hero-metadata">
    <div class="hero-metadata-eyebrow eyebrow">eyebrow text</div>
    
            <div class="hero-metadata-comment-count">
            <a href="#">1</a>
        </div>
                <div class="hero-metadata-duration">12 min read</div>
        
    <div class="hero-metadata-sponsors">
        <div class="hero-metadata-sponsors-text">sponsors</div>
        <a href="#" class="hero-metadata-sponsors-logo">
            <img src="/images/logo-mobile.svg"
                 alt="Description of image"
            />
        </a>
    </div>
</section>
Source:components/hero-metadata/hero-metadata.scss, line 1

Home Hero

Go to Confluence for details.

Example

The Younger Members Leadership Symposia

Tempus magna urna nisi leo vel nisi ex condimentum diam maximus scelerisque fusce ac sem fusce sollicitudin facilisis interdum tortor nisl nisl consectetur commodo purus.

Join now
View Markup
<!-- components/hero-home/hero-home.twig -->
<section class="home-hero">

  <div class="home-hero-inner">

    <div class="home-hero-grid-container">
      <div class="home-hero-feature">
        

          <video autoplay="true" muted=true poster="">
            <source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" media="screen and (min-width:767px)">
          </video>
      </div>

      <div class="home-hero-content">
        <h1 class="home-hero-content-title h1">The Younger Members Leadership Symposia</h1>
        <p class="home-hero-content-intro">Tempus magna urna nisi leo vel nisi ex condimentum diam maximus scelerisque fusce ac sem fusce sollicitudin facilisis interdum tortor nisl nisl consectetur commodo purus.</p>
        <a href="#" class="btn">Join now</a>
      </div>

      <div class="home-hero-search">
        <div class="home-hero-search-inner">
          <input type="text" name="" value="" placeholder="Search ASCE.org" class="home-hero-search-input">
          <button class="home-hero-search-submit">
            <span class="sr-text">Search</span></button>
        </div>
      </div>
    </div>

  </div>

</section>
Source:components/home-hero/home-hero.scss, line 1

Horizontal Rules

Example
View Markup
<hr>
Source:global-scss/_global.scss, line 84

Image Grid

Go to Confluence for details.

Example

Image Grid

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8
Image 9
A very long long title
View Markup
<!-- components/image-grid/image_grid.twig -->
<section class="topics-grid">
  <div class="topics-grid-inner">
          <h2 class="topics-grid-title h4 -center">Image Grid</h2>
        <div class="topics-grid-items">
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-1.jpeg')"></div>
          </div>
          <a class="topics-grid-item-title h5 js-link-event-link -external" href="#" target="_blank">
            Image 1
          </a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-2.jpeg')"></div>
          </div>
          <a class="topics-grid-item-title h5 js-link-event-link -external" href="#" target="_blank">
            Image 2
          </a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-3.jpeg')"></div>
          </div>
          <a class="topics-grid-item-title h5 js-link-event-link -external" href="#" target="_blank">
            Image 3
          </a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-1.jpeg')"></div>
          </div>
          <a class="topics-grid-item-title h5 js-link-event-link -external" href="#" target="_blank">
            Image 4
          </a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-2.jpeg')"></div>
          </div>
          <a class="topics-grid-item-title h5 js-link-event-link" href="#">
            Image 5
          </a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-3.jpeg')"></div>
          </div>
          <a class="topics-grid-item-title h5 js-link-event-link" href="#">
            Image 6
          </a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-1.jpeg')"></div>
          </div>
          <a class="topics-grid-item-title h5 js-link-event-link" href="#">
            Image 7
          </a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-2.jpeg')"></div>
          </div>
          <a class="topics-grid-item-title h5 js-link-event-link" href="#">
            Image 8
          </a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-3.jpeg')"></div>
          </div>
          <a class="topics-grid-item-title h5 js-link-event-link" href="#">
            Image 9
          </a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-1.jpeg')"></div>
          </div>
          <a class="topics-grid-item-title h5 js-link-event-link" href="#">
            A very long long title
          </a>
        </div>
          </div>
  </div>
</section>
Source:components/image-grid/image-grid.scss, line 1

Image Slider

Go to Confluence for details.

Example
Explore

Image Slider

Almost always performed challenging conditions, each of these civil engineering feats represents the achievement of what

See more
Image Alt
Photo: John Smith
Niagara Falls
Bibendum maximus placerat sit pellentesque mi. Bibendum maximus placerat sit pellentesque mi.
Image Alt
Photo: John Smith
Niagara Falls 2
Bibendum maximus placerat sit pellentesque mi.
Image Alt
Photo: John Smith
Niagara Falls 3
Bibendum maximus placerat sit pellentesque mi.
View Markup
<!-- components/image-slider/image-slider.twig -->


<section data-slider-position="left" class="image-slider -blue -bg-left">
  <div class="image-slider-inner">

    <div class="image-slider-text">

      <div class="image-slider-text-inner">

                  <div class="eyebrow">Explore</div>
        
        <h2 class="h4">Image Slider</h2>

                  <p>Almost always performed challenging conditions, each of these civil engineering feats represents the achievement of what</p>
        
        
          
                <a href="#"
       class="-arrow-link -white">
        <span>See more</span>
    </a>


          
        
      </div>

    </div>

    <div class="image-slider-container">

      <div class="image-slider-slides">

        
          <div class="image-slider-slide">

            <figure class="image-slider-slide-photo">
              <div class="image-slider-slide-photo-inner">
                <img src="/images/fpo/image-slider-1.jpg" alt="Image Alt" class="image-slider-slide-photo-img">
                <div class="image-slider-slide-photo-credit">Photo: John Smith</div>
              </div>
              <figcaption class="image-slider-caption">

                                  <a href="#" class="image-slider-caption-title -underline">Niagara Falls</a>
                
                <div class="image-slider-caption-text">Bibendum maximus placerat sit pellentesque mi. Bibendum maximus placerat sit pellentesque mi.</div>

              </figcaption>

            </figure>

          </div>

        
          <div class="image-slider-slide">

            <figure class="image-slider-slide-photo">
              <div class="image-slider-slide-photo-inner">
                <img src="/images/fpo/image-slider-2.jpg" alt="Image Alt" class="image-slider-slide-photo-img">
                <div class="image-slider-slide-photo-credit">Photo: John Smith</div>
              </div>
              <figcaption class="image-slider-caption">

                                  <a href="#" class="image-slider-caption-title -underline">Niagara Falls 2</a>
                
                <div class="image-slider-caption-text">Bibendum maximus placerat sit pellentesque mi.</div>

              </figcaption>

            </figure>

          </div>

        
          <div class="image-slider-slide">

            <figure class="image-slider-slide-photo">
              <div class="image-slider-slide-photo-inner">
                <img src="/images/fpo/image-slider-3.jpg" alt="Image Alt" class="image-slider-slide-photo-img">
                <div class="image-slider-slide-photo-credit">Photo: John Smith</div>
              </div>
              <figcaption class="image-slider-caption">

                                  <a href="#" class="image-slider-caption-title -underline">Niagara Falls 3</a>
                
                <div class="image-slider-caption-text">Bibendum maximus placerat sit pellentesque mi.</div>

              </figcaption>

            </figure>

          </div>

        
      </div>

    </div>

  </div>
</section>
Source:components/image-slider/image-slider.scss, line 1

Institute Link List

Go to Confluence for details.

Example

Institute Link List Title

Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus.

Button Text
View Markup
<!-- components/institute-link-list/institute-link-list.twig -->


<section class="institute-link-list" data-columns="2">
  <h2 class="institute-link-list-title h4">Institute Link List Title</h2>
  <div class="institute-link-list-inner">

    <div class="institute-link-list-text">

      

              <p>Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus.</p>
      
      <div class="institute-link-list-text-bottom">
                  <a href="#" class="btn">Button Text</a>
        
                  <nav class="institute-link-list-social-links" aria-label="Social Media Links">
            <span class="eyebrow institute-link-list-social-links-label">social label</span>
            <ul>
                              <li>
                  <a
                    class="icon-facebook"
                    href="#"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">facebook</span>
                  </a>
                </li>
                              <li>
                  <a
                    class="icon-instagram"
                    href="#"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">instagram</span>
                  </a>
                </li>
                              <li>
                  <a
                    class="icon-linkedin"
                    href="#"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">linkedin</span>
                  </a>
                </li>
                              <li>
                  <a
                    class="icon-twitter"
                    href="#"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">twitter</span>
                  </a>
                </li>
                              <li>
                  <a
                    class="icon-youtube"
                    href="#"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">youtube</span>
                  </a>
                </li>
                          </ul>
          </nav>
              </div>

    </div>

    <div class="institute-link-list-links">

              <ul>
                      <li>
                  <a href="#"
       class="-arrow-link ">
        <span>link text</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link ">
        <span>link text</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link  -external">
        <span>external link text</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link  -lock">
        <span>gated link text</span>
    </a>

            </li>
                  </ul>
      
    </div>

  </div>
</section>
Source:components/institute-link-list/institute-link-list.scss, line 1

Institute News List

AKA – Institute News Landing

Go to Confluence for details.

Example
Description of image
eyebrow text
Item 1 Title

January 1, 2077

Description of image
eyebrow text
Item 2 Title

January 1, 2077

eyebrow text
Item 3 Title (No Optional Image)

January 1, 2077

ASCE dots
Description of promo full width image

Promotion Title

Promotion text goes here...

link text
Description of image
eyebrow text
Item 4 Title

January 1, 2077

Description of image
eyebrow text
Item 5 Title

January 1, 2077

Link text
View Markup
<!-- components/institute-news-list/institute-news-list.twig -->


<div class="institute-news-list">
  <div class="institute-news-list-inner">
    <div class="institute-news-list-items">
              <div class="institute-news-list-item js-link-event">
                    <div class="institute-news-list-item-image">
            <div class="institute-news-list-item-image-wrapper">
              <img src="/images/fpo/news-topics-1.jpeg" alt="Description of image">
            </div>
          </div>
                    <div class="institute-news-list-item-content">
            <div class="eyebrow institute-news-list-item-eyebrow">eyebrow text</div>
            <a href="#" class="h5 institute-news-list-item-title js-link-event-link">Item 1 Title</a>
            <p class="institute-news-list-item-text"></p>
            <p class="institute-news-list-item-date">January 1, 2077</p>
          </div>
        </div>
              <div class="institute-news-list-item js-link-event">
                    <div class="institute-news-list-item-image">
            <div class="institute-news-list-item-image-wrapper">
              <img src="/images/fpo/news-topics-2.jpeg" alt="Description of image">
            </div>
          </div>
                    <div class="institute-news-list-item-content">
            <div class="eyebrow institute-news-list-item-eyebrow">eyebrow text</div>
            <a href="#" class="h5 institute-news-list-item-title js-link-event-link">Item 2 Title</a>
            <p class="institute-news-list-item-text"></p>
            <p class="institute-news-list-item-date">January 1, 2077</p>
          </div>
        </div>
              <div class="institute-news-list-item js-link-event">
                    <div class="institute-news-list-item-content">
            <div class="eyebrow institute-news-list-item-eyebrow">eyebrow text</div>
            <a href="#" class="h5 institute-news-list-item-title js-link-event-link">Item 3 Title (No Optional Image)</a>
            <p class="institute-news-list-item-text"></p>
            <p class="institute-news-list-item-date">January 1, 2077</p>
          </div>
        </div>
          </div>
  </div>

      <!-- components/promo-full-width/promo-full-width.twig -->


<section class="promo-full-width">

  <img class="dots" src="../images/white-dots.svg" alt="ASCE dots">

    <div class="promo-full-width-images">
          <img src="/images/fpo/promo-full-width-img1.jpeg" alt="Description of promo full width image">
      </div>
  
  <div class="promo-full-width-inner">
    <h2 class="h4 -line-above -white">Promotion Title</h2>

          <p class="-white">Promotion text goes here...</p>
    
        <a href="#"
       class="btn -white">
        <span>link text</span>
    </a>

  </div>
</section>
  
      <div class="institute-news-list-inner">
      <div class="institute-news-list-items">
                  <div class="institute-news-list-item js-link-event">
                        <div class="institute-news-list-item-image">
              <div class="institute-news-list-item-image-wrapper">
                <img src="/images/fpo/news-topics-4.jpeg" alt="Description of image">
              </div>
            </div>
                        <div class="institute-news-list-item-content">
              <div class="eyebrow institute-news-list-item-eyebrow">eyebrow text</div>
              <a href="#" class="h5 institute-news-list-item-title js-link-event-link">Item 4 Title</a>
              <p class="institute-news-list-item-text"></p>
              <p class="institute-news-list-item-date">January 1, 2077</p>
            </div>
          </div>
                  <div class="institute-news-list-item js-link-event">
                        <div class="institute-news-list-item-image">
              <div class="institute-news-list-item-image-wrapper">
                <img src="/images/fpo/news-topics-5.jpeg" alt="Description of image">
              </div>
            </div>
                        <div class="institute-news-list-item-content">
              <div class="eyebrow institute-news-list-item-eyebrow">eyebrow text</div>
              <a href="#" class="h5 institute-news-list-item-title js-link-event-link">Item 5 Title</a>
              <p class="institute-news-list-item-text"></p>
              <p class="institute-news-list-item-date">January 1, 2077</p>
            </div>
          </div>
              </div>
    </div>
  
    <div class="institute-news-list-button">
    <div class="institute-news-list-button-inner">
          <a href="#"
       class="btn ">
        <span>Link text</span>
    </a>

    </div>
  </div>
  </div>
Source:components/institute-news-list/institute-news-list.scss, line 1

Institutes Hero

Go to Confluence for details.

Example
image alt text

Institutes Hero Title

View Markup
<!-- components/institutes-hero/institutes-hero.twig -->


<section class="institutes-hero">
  <div class="institutes-hero-inner">
    <div class="institutes-hero-shield">
      <img src="/images/fpo/shield-sei.png" alt="image alt text">
    </div>
    <div class="institutes-hero-content">
      <h1 class="h1">Institutes Hero Title</h1>
      <!-- components/breadcrumbs/breadcrumbs.twig -->
<nav class="breadcrumbs">
  <ul class="breadcrumbs-list">
    <li class="breadcrumbs-list-item"><a href="/" class="breadcrumbs-list-item-link icon-home"><span class="sr-text">Home</span></a></li>
          <li class="breadcrumbs-list-item">
        
        <a
          class="breadcrumbs-list-item-link -has-dropdown"
          href="#">
          Careers & Growth
        </a>
                  <button class="breadcrumbs-list-item-arrow icon-chevron" tabindex="-1"><span class="sr-text">toggle dropdown</span></button>
          <ul class="breadcrumbs-list-item-dropdown">
                          <li>
                <a href="#">first child</a>
              </li>
                          <li>
                <a href="#">second child</a>
              </li>
                      </ul>
              </li>
          <li class="breadcrumbs-list-item">
        
        <a
          class="breadcrumbs-list-item-link"
          href="#">
          Structural Engineering In...
        </a>
              </li>
      </ul>
</nav>
    </div>
  </div>
</section>
Source:components/institutes-hero/institutes-hero.scss, line 1

Intro Panel

Go to Confluence for details.

Example

The ASCE membership experience happens at the national and local level around the globe – help shape the future of our organization and industry with other passionate engineers by engaging with your local group today

View Markup
<!-- components/intro-panel/intro-panel.twig -->



<section class="intro-panel" >

  <h2 class="h5">The ASCE membership experience happens at the national and local level around the globe – help shape the future of our organization and industry with other passionate engineers by engaging with your local group today</h2>

  
  
  
</section>
Source:components/intro-panel/intro-panel.scss, line 1

Juicer Embed

AKA – Social Media Feed

Go to Confluence for details.

Example
    View Markup
    <!-- components/juicer-embed/juicer-embed.twig -->
<section class="juicer-embed">

  <div class="juicer-embed-inner">
    <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
    <link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
    <ul
      class="juicer-feed"
      data-feed-id="https-app2-cision-com-rss-feed_id-eac45995-da53-4eee-86af-3134f5070ddb"
      data-gutter="28"
      data-per="12"
    ></ul>
  </div>

</section>
    Source:components/juicer-embed/juicer-embed.scss, line 1

    Leadership List

    Go to Confluence for details.

    Example

    Leadership List Title

    • Listing Name, Credentials (optional)
      Position (optional)
    • Eric Joseph Aubry, P.E., M.ASCE
      President of Younger Member Forum
    • Seema Chandrakant Shah-Fairbank, Ph.D., P.E., M.ASCE
      President
    • Daniel Steven Cronquist, P.E., P.L.S, M.ASCE
      Past President
    • Jeffrey Braun, P.E., M.ASCE
      President-elect
    • Ayinde Clarke
      Technical Lead
    View Markup
    <!-- components/leadership-list/leadership-list.twig -->


<section class="leadership-list">
  <h2 class="h4">Leadership List Title</h2>
  <ul class="leadership-list-items">
          <li class="leadership-list-item">
        <span class="leadership-list-name">Listing Name</span>, <span class="leadership-list-credentials">Credentials (optional)</span>        <br><span class="leadership-list-position">Position (optional)</span>      </li>
          <li class="leadership-list-item">
        <span class="leadership-list-name">Eric Joseph Aubry</span>, <span class="leadership-list-credentials">P.E., M.ASCE</span>        <br><span class="leadership-list-position">President of Younger Member Forum</span>      </li>
          <li class="leadership-list-item">
        <span class="leadership-list-name">Seema Chandrakant Shah-Fairbank</span>, <span class="leadership-list-credentials">Ph.D., P.E., M.ASCE</span>        <br><span class="leadership-list-position">President</span>      </li>
          <li class="leadership-list-item">
        <span class="leadership-list-name">Daniel Steven Cronquist</span>, <span class="leadership-list-credentials">P.E., P.L.S, M.ASCE</span>        <br><span class="leadership-list-position">Past President</span>      </li>
          <li class="leadership-list-item">
        <span class="leadership-list-name">Jeffrey Braun</span>, <span class="leadership-list-credentials">P.E., M.ASCE</span>        <br><span class="leadership-list-position">President-elect</span>      </li>
          <li class="leadership-list-item">
        <span class="leadership-list-name">Ayinde Clarke</span>        <br><span class="leadership-list-position">Technical Lead</span>      </li>
      </ul>
</section>
    Source:components/leadership-list/leadership-list.scss, line 1

    Link List

    Go to Confluence for details.

    Example

    More for...

    View Markup
    <!-- components/link-list/link-list.twig -->


<section class="link-list " data-text="false" data-columns="2">
  <div class="link-list-inner">

    <div class="link-list-text">

      
      <h2 class="h4">More for...</h2>

      
      
    </div>

    <div class="link-list-links">

              <ul>
                      <li>
                  <a href="#"
       class="-arrow-link ">
        <span>Student chapters</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link ">
        <span>Younger members</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link ">
        <span>International members</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link  -lock">
        <span>Committees</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link ">
        <span>Leaders & volunteers</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link ">
        <span>Partner firms</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link  -external">
        <span>External page</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link ">
        <span>Key contact advocates</span>
    </a>

            </li>
                  </ul>
      
    </div>

  </div>
</section>
    Source:components/link-list/link-list.scss, line 1

    Logo Grid

    Logo images scale to target a 16 x 9 ratio for fluid logo box size.

    Go to Confluence for details.

    Example

    Title - Logo Grid

    View Markup
    <!-- components/logo-grid/logo-grid.twig -->

<article class="logo-grid ">
  <div class="inner">
          <header>
        <h2 class="h3">
          Title - Logo Grid
        </h2>
      </header>
    
    <ul class="logos">
          <li class="logo -has-link">
        
                          
        <a href="https://aecom.com/"><img src="/images/fpo/logos/aecom_logo.jpg" alt="aecom logo"></a>
      </li>
          <li class="logo ">
        
                          
        <img src="/images/fpo/logos/cobb_fendley_logo.png" alt="cobb fendley logo">
      </li>
          <li class="logo -has-link">
        
                          
        <a href="https://itpipes.com/"><img src="/images/fpo/logos/it_pipes_logo.png" alt="it pipes logo"></a>
      </li>
          <li class="logo ">
        
                          
        <img src="/images/fpo/logos/lucity_logo.png" alt="lucity logo">
      </li>
          <li class="logo ">
        
                          
        <img src="/images/fpo/logos/xylem_logo_with_tagline.png" alt="xylem logo">
      </li>
          <li class="logo ">
        
                          
        <img src="/images/logo.svg" alt="asce logo">
      </li>
          <li class="logo ">
        
                          
        <img src="/images/logo-mobile.svg" alt="asce mobile logo">
      </li>
          <li class="logo ">
        
                          
        <img src="/images/fpo/sponsors-logo-1.svg" alt="sponsor 1 logo">
      </li>
          <li class="logo ">
        
                          
        <img src="/images/fpo/sponsors-logo-2.png" alt="sponsor 2 logo">
      </li>
          <li class="logo ">
        
                          
        <img src="/images/fpo/sponsors-logo-3.svg" alt="sponsor 3 logo">
      </li>
          <li class="logo ">
        
                          
        <img src="/images/fpo/shield.png" alt="uesi logo">
      </li>
          <li class="logo ">
        
                          
        <img src="/images/fpo/shield-sei.png" alt="sei logo">
      </li>
        </ul>

  </div>
</article>
    Source:components/logo-grid/logo-grid.scss, line 1

    Magazine Issues

    Go to Confluence for details.

    Example
    View Markup
    
<!-- components/magazine-issues/magazine-issues.twig -->

<section class="magazine-issues">
  <div class="magazine-issues-inner">
    <article class="magazine-issues-content" id="magazineissues" data-item-id="x">
      
      <div class="magazine-issues-no-results h2">Your category did not return any results. Please try another category.</div>
      
      <div class="magazine-issues-results-text h2"></div>
      
      <div class="magazine-issues-loading loader"> <span class="sr-text">Loading...</span></div>
      
      <div class="magazine-issues-results">
                  <article class="magazine-issues-item js-link-event">
            <div class="magazine-issues-item-image">
              <img src="../images/fpo/publication_promo_img.jpg" alt="Issue Name">
            </div>
            <a class="magazine-issues-item-text js-link-event-link">
              <p class="magazine-issues-item-date">June/July 2020</p>
              <p class="magazine-issues-item-name">Issue Name</p>
            </a>
          </article>
                  <article class="magazine-issues-item js-link-event">
            <div class="magazine-issues-item-image">
              <img src="../images/fpo/publication_promo_img.jpg" alt="Issue Name">
            </div>
            <a class="magazine-issues-item-text js-link-event-link">
              <p class="magazine-issues-item-date">June/July 2020</p>
              <p class="magazine-issues-item-name">Issue Name</p>
            </a>
          </article>
                  <article class="magazine-issues-item js-link-event">
            <div class="magazine-issues-item-image">
              <img src="../images/fpo/publication_promo_img.jpg" alt="Issue Name">
            </div>
            <a class="magazine-issues-item-text js-link-event-link">
              <p class="magazine-issues-item-date">June/July 2020</p>
              <p class="magazine-issues-item-name">Issue Name</p>
            </a>
          </article>
                  <article class="magazine-issues-item js-link-event">
            <div class="magazine-issues-item-image">
              <img src="../images/fpo/publication_promo_img.jpg" alt="Issue Name">
            </div>
            <a class="magazine-issues-item-text js-link-event-link">
              <p class="magazine-issues-item-date">June/July 2020</p>
              <p class="magazine-issues-item-name">Issue Name</p>
            </a>
          </article>
                  <article class="magazine-issues-item js-link-event">
            <div class="magazine-issues-item-image">
              <img src="../images/fpo/publication_promo_img.jpg" alt="Issue Name">
            </div>
            <a class="magazine-issues-item-text js-link-event-link">
              <p class="magazine-issues-item-date">June/July 2020</p>
              <p class="magazine-issues-item-name">Issue Name</p>
            </a>
          </article>
                  <article class="magazine-issues-item js-link-event">
            <div class="magazine-issues-item-image">
              <img src="../images/fpo/publication_promo_img.jpg" alt="Issue Name">
            </div>
            <a class="magazine-issues-item-text js-link-event-link">
              <p class="magazine-issues-item-date">June/July 2020</p>
              <p class="magazine-issues-item-name">Issue Name</p>
            </a>
          </article>
                  <article class="magazine-issues-item js-link-event">
            <div class="magazine-issues-item-image">
              <img src="../images/fpo/publication_promo_img.jpg" alt="Issue Name">
            </div>
            <a class="magazine-issues-item-text js-link-event-link">
              <p class="magazine-issues-item-date">June/July 2020</p>
              <p class="magazine-issues-item-name">Issue Name</p>
            </a>
          </article>
                  <article class="magazine-issues-item js-link-event">
            <div class="magazine-issues-item-image">
              <img src="../images/fpo/publication_promo_img.jpg" alt="Issue Name">
            </div>
            <a class="magazine-issues-item-text js-link-event-link">
              <p class="magazine-issues-item-date">June/July 2020</p>
              <p class="magazine-issues-item-name">Issue Name</p>
            </a>
          </article>
                  <article class="magazine-issues-item js-link-event">
            <div class="magazine-issues-item-image">
              <img src="../images/fpo/publication_promo_img.jpg" alt="Issue Name">
            </div>
            <a class="magazine-issues-item-text js-link-event-link">
              <p class="magazine-issues-item-date">June/July 2020</p>
              <p class="magazine-issues-item-name">Issue Name</p>
            </a>
          </article>
                  <article class="magazine-issues-item js-link-event">
            <div class="magazine-issues-item-image">
              <img src="../images/fpo/publication_promo_img.jpg" alt="Issue Name">
            </div>
            <a class="magazine-issues-item-text js-link-event-link">
              <p class="magazine-issues-item-date">June/July 2020</p>
              <p class="magazine-issues-item-name">Issue Name</p>
            </a>
          </article>
              </div>

      <!-- components/pagination/pagination.twig -->
<div class="pagination">
  <div class="pagination-inner">
    <span class="pagination-nav">
      <a class="pagination-prev" href="#" data-disabled="true"><span class="sr-text">Previous Page</span><span
          class="icon-arrow -left"></span></a>
    </span>
    <span class="pagination-mobile">Page <span class="pagination-mobile-current"></span> of <span
        class="pagination-mobile-total"></span></span>
    <span class="pagination-pages"></span>
    <span class="pagination-nav">
      <a class="pagination-next" href="#"><span class="sr-text">Next Page</span><span class="icon-arrow"></span></a>
    </span>
  </div>
</div>
    </article>
  </div>
</section>
    Source:components/magazine-issues/magazine-issues.scss, line 1

    Masonry Grid

    Go to Confluence for details.

    Example

    Masonry Grid

    Photo: istock 918035570
    Project name

    Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus.

    Project name

    Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus

    Project name

    Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus

    Photo: istock 918035570
    Project name

    Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus.

    View Markup
    <!-- components/masonry-grid/masonry-grid.twig -->


<section class="masonry-grid">
  <div class="masonry-grid-inner">
    <h2 class="masonry-grid-title h4">Masonry Grid</h2>

    
    <div class="masonry-grid-items">

      
                          
        
        <div class="masonry-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500" data-featured="true">

                      <div class="masonry-grid-item-img" >
              <div class="masonry-grid-item-img-inner" style="background-image: url('/images/fpo/card-img.jpg')"></div>
                              <div class="photo-credit">Photo: istock 918035570</div>
                          </div>
          
          <div class="masonry-grid-item-content">

                        <a href="#" class="masonry-grid-item-title h5 js-link-event-link ">Project name</a>
            <p class="masonry-grid-item-text">Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus.</p>
          </div>

        </div>
      
        
        
        <div class="masonry-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500" >

          
          <div class="masonry-grid-item-content">

                        <a href="#" class="masonry-grid-item-title h5 js-link-event-link -external">Project name</a>
            <p class="masonry-grid-item-text">Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus</p>
          </div>

        </div>
      
        
        
        <div class="masonry-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500" >

          
          <div class="masonry-grid-item-content">

                        <a href="#" class="masonry-grid-item-title h5 js-link-event-link -gated">Project name</a>
            <p class="masonry-grid-item-text">Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus</p>
          </div>

        </div>
      
                          
        
        <div class="masonry-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500" data-featured="true">

                      <div class="masonry-grid-item-img" >
              <div class="masonry-grid-item-img-inner" style="background-image: url('/images/fpo/card-img-2.jpg')"></div>
                              <div class="photo-credit">Photo: istock 918035570</div>
                          </div>
          
          <div class="masonry-grid-item-content">

                        <a href="#" class="masonry-grid-item-title h5 js-link-event-link ">Project name</a>
            <p class="masonry-grid-item-text">Ut scelerisque ipsum quisque et et hendrerit ex arcu condimentum nulla pellentesque euismod ut rutrum tempus.</p>
          </div>

        </div>
      
    </div>
  </div>
</section>
    Source:components/masonry-grid/masonry-grid.scss, line 1

    Media CTA

    Go to Confluence for details.

    Example
    View Markup
    
<!-- components/media-cta/media-cta.twig -->
<article class="media-cta">
    <div class="media-cta-inner">
        <div class="media-cta-track">

        
            
            <div class="media-cta-content">

            
                            <h2 class="h4 media-cta-title">This is an optional content panel</h2>
            
            
                            <div class="media-cta-text wysiwyg-content"><p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
            
            
                            <div class="media-cta-button">
                    <a href="#"
       class="btn -small">
        <span>Optional button</span>
    </a>

                </div>
            
            
                            <div class="media-cta-secondary-link">
                    <a href="#"
       class="-arrow-link ">
        <span>Optional secondary link</span>
    </a>

                </div>
            
            </div>

        
        <div class="media-cta-media">

            
                        <img src="/images/fpo/media-cta-3.jpg" class="media-cta-image" alt="Alt Text">
            
        </div>
        </div>
    </div>
</article>
    Source:components/media-cta/media-cta.scss, line 1

    Modal

    Go to Confluence for details.

    Source:components/modal/modal.scss, line 1

    News List

    Go to Confluence for details.

    Example

    More From Ben Walpole

    View Markup
    

<section class="news-list">
  <div class="news-list-inner">

          <h2 class="h3 news-list-title -center">
        More From Ben Walpole
      </h2>
    
    <article
      class="news-list-content"
          >

      
      
      
      <div class="news-list-no-results h2" aria-live="polite">
        Your category did not return any results. Please try another category.
      </div>

      
      <div class="news-list-results">

        
                              <div class="news-list-item">

                              <div class="news-list-item-image">
                  <div class="news-list-item-image-wrapper">
                    <img
                      src="../images/fpo/news-list-img.jpg"
                      alt="Smart city infrastructure illustration"
                    >
                  </div>
                </div>
              
              <div class="news-list-item-content">
                                  <div class="eyebrow news-list-item-eyebrow">
                    Civil Engineering Source
                  </div>
                
                                  <a
                    href="#"
                    class="h5 news-list-item-title"
                  >
                    4 Smart City Trends Shaping the Future
                  </a>
                
                                  <p class="news-list-item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor.</p>
                
                                  <p class="news-list-item-date">January 20, 2021</p>
                              </div>
            </div>
                      <div class="news-list-item">

                              <div class="news-list-item-image">
                  <div class="news-list-item-image-wrapper">
                    <img
                      src="../images/fpo/news-list-img.jpg"
                      alt="Urban development planning graphic"
                    >
                  </div>
                </div>
              
              <div class="news-list-item-content">
                                  <div class="eyebrow news-list-item-eyebrow">
                    Civil Engineering Source
                  </div>
                
                                  <a
                    href="#"
                    class="h5 news-list-item-title"
                  >
                    How Data Is Changing Infrastructure Planning
                  </a>
                
                                  <p class="news-list-item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam explicabo quas.</p>
                
                                  <p class="news-list-item-date">February 8, 2021</p>
                              </div>
            </div>
                        </div>

      
      
    </article>
  </div>
</section>
    Source:components/news-list/news-list.scss, line 1

    Pagination

    Go to Confluence for details.

    Example
    View Markup
    <!-- components/pagination/pagination.twig -->
<div class="pagination">
  <div class="pagination-inner">
    <span class="pagination-nav">
      <a class="pagination-prev" href="#" data-disabled="true"><span class="sr-text">Previous Page</span><span
          class="icon-arrow -left"></span></a>
    </span>
    <span class="pagination-mobile">Page <span class="pagination-mobile-current"></span> of <span
        class="pagination-mobile-total"></span></span>
    <span class="pagination-pages"></span>
    <span class="pagination-nav">
      <a class="pagination-next" href="#"><span class="sr-text">Next Page</span><span class="icon-arrow"></span></a>
    </span>
  </div>
</div>
    Source:components/pagination/pagination.scss, line 1

    Personalized Link-List

    Go to Confluence for details.

    Example
    View Markup
    
<!-- components/personalized-link-list/personalized-link-list.twig -->
<article class="personalized-link-list">
    <div class="personalized-link-list-inner">

        <div class="personalized-link-list-title">
            <h2 class="h4">
                Now at ASCE2027
            </h2>
        </div>

        <div class="personalized-link-list-content">

                    <div class="personalized-link-list-links">

            
            
            <ul>
                                <li>

                    
                    <a href="#" class="-arrow-link" target="_self" rel="">

                    
                    
                    
                    <div>

                        
                        <span>Sponsor</span>

                        
                        
                        
                        
                    </div>
                    </a>

                </li>
                                <li>

                    
                    <a href="#" class="-arrow-link" target="_self" rel="">

                    
                    
                    
                    <div>

                        
                        <span>Book exhibit booth</span>

                        
                        
                        
                        
                    </div>
                    </a>

                </li>
                                <li>

                    
                    <a href="#" class="-arrow-link" target="_self" rel="">

                    
                    
                    
                    <div>

                        
                        <span>International travel info</span>

                        
                        
                        
                        
                    </div>
                    </a>

                </li>
                                <li>

                    
                    <a href="#" class="-arrow-link" target="_self" rel="">

                    
                    
                    
                    <div>

                        
                        <span>Explore networking opportunities</span>

                        
                        
                        
                        
                    </div>
                    </a>

                </li>
                
            </ul>
            </div>
        
        </div>
    </div>
</article>
    Source:components/personalized-link-list/personalized-link-list.scss, line 1

    Photo Grid

    Go to Confluence for details.

    Example

    Photo Grid Lorem Ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Optional Button
    alt text 1
    alt text 1
    alt text 1
    alt text 1
    alt text 1
    alt text 1
    alt text 1
    alt text 1
    alt text 1
    alt text 1
    View Markup
    


<!-- components/photo-grid/photo-grid.twig -->



<div class="photo-grid">

    
        <div class="photo-grid-intro">
        <div class="photo-grid-intro-text">
            <h2 class="h4">Photo Grid Lorem Ipsum</h2>
                        <div class="photo-grid-intro-description">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
                    </div>
                <div class="photo-grid-intro-button">
            <a href="#" class="btn -small">Optional Button</a>
        </div>
            </div>
    
    <div class="photo-grid-scroller">
        <div class="photo-grid-track js-scroller js-hidden-until-load">
                    <div class="photo-grid-item">
                <img src="/images/fpo/photo-grid-1.jpg" alt="alt text 1" />
            </div>
                    <div class="photo-grid-item">
                <img src="/images/fpo/photo-grid-2.jpg" alt="alt text 1" />
            </div>
                    <div class="photo-grid-item">
                <img src="/images/fpo/photo-grid-3.jpg" alt="alt text 1" />
            </div>
                    <div class="photo-grid-item">
                <img src="/images/fpo/photo-grid-4.jpg" alt="alt text 1" />
            </div>
                    <div class="photo-grid-item">
                <img src="/images/fpo/photo-grid-5.jpg" alt="alt text 1" />
            </div>
                </div>

        <div class="photo-grid-track js-scroller js-hidden-until-load">
                    <div class="photo-grid-item">
                <img src="/images/fpo/photo-grid-6.jpg" alt="alt text 1" />
            </div>
                    <div class="photo-grid-item">
                <img src="/images/fpo/photo-grid-7.jpg" alt="alt text 1" />
            </div>
                    <div class="photo-grid-item">
                <img src="/images/fpo/photo-grid-8.jpg" alt="alt text 1" />
            </div>
                    <div class="photo-grid-item">
                <img src="/images/fpo/photo-grid-9.jpg" alt="alt text 1" />
            </div>
                    <div class="photo-grid-item">
                <img src="/images/fpo/photo-grid-10.jpg" alt="alt text 1" />
            </div>
                </div>

    </div>

    <div class="photo-grid-scroller-controls">
        <button type="button" class="video-toggle-btn js-scroller-control"><span class="sr-text">Pause</span></button>
    </div>

</div>
    Source:components/photo-grid/photo-grid.scss, line 1

    Presenters Grid

    Go to Confluence for details.

    Example

    Presenters Grid

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    View all speakers
    image alt tag

    John Sterling

    Chief Engineer

    Company

    image alt tag

    Devon Jackson

    Job title here

    Company

    image alt tag

    Daniel Westover

    Chief Engineer

    Company

    image alt tag

    Sarah Sager

    Job Title

    Company

    image alt tag

    Olivia Matthews

    Job title

    Minneapolis, MN

    image alt tag

    James Bradley

    Job title

    Minneapolis, MN

    View all speakers
    ASCE dots
    View Markup
    <!-- components/presenters-grid/presenters-grid.twig -->


<section
  class="presenters-grid"
  data-layout="detail"
  data-columns="3"
>

  <div class="presenters-grid-inner">

    <div class="presenters-grid-intro">

      <div class="presenters-grid-intro-text">

        <h2 class="h3">Presenters Grid</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

      </div>

      
        <div class="presenters-grid-intro-button">

              <a href="#"
       class="btn ">
        <span>View all speakers</span>
    </a>


        </div>

      
    </div>

    <div class="presenters-grid-slides" data-images="false">

      
        <div class="presenters-grid-slide">

                      <div class="presenters-grid-slide-img">
              <img src="/images/fpo/speaker-slider.jpg" alt="image alt tag">
            </div>
          
          <div class="presenters-grid-slide-content">

            <h3 class="h5">
                              John Sterling
                          </h3>

            <div class="presenters-grid-slide-title">Chief Engineer</div>

                          <p class="presenters-grid-slide-company">Company</p>
            
          </div>

        </div>

      
        <div class="presenters-grid-slide js-link-event">

                      <div class="presenters-grid-slide-img">
              <img src="/images/fpo/speaker-slider-1.jpg" alt="image alt tag">
            </div>
          
          <div class="presenters-grid-slide-content">

            <h3 class="h5">
                              <a href="http://www.google.com" class="presenters-grid-slide-name -external js-link-event-link" target="_blank"><span class="text">Devon Jackson</span><span class="text--bl"></span></a>
                          </h3>

            <div class="presenters-grid-slide-title">Job title here </div>

                          <p class="presenters-grid-slide-company">Company</p>
            
          </div>

        </div>

      
        <div class="presenters-grid-slide js-link-event">

                      <div class="presenters-grid-slide-img">
              <img src="/images/fpo/speaker-slider-2.jpg" alt="image alt tag">
            </div>
          
          <div class="presenters-grid-slide-content">

            <h3 class="h5">
                              <a href="http://www.google.com" class="presenters-grid-slide-name js-link-event-link" ><span class="text">Daniel Westover</span><span class="text--bl"></span></a>
                          </h3>

            <div class="presenters-grid-slide-title">Chief Engineer</div>

                          <p class="presenters-grid-slide-company">Company</p>
            
          </div>

        </div>

      
        <div class="presenters-grid-slide js-link-event">

                      <div class="presenters-grid-slide-img">
              <img src="/images/fpo/speaker-slider-3.jpg" alt="image alt tag">
            </div>
          
          <div class="presenters-grid-slide-content">

            <h3 class="h5">
                              <a href="http://www.google.com" class="presenters-grid-slide-name -external js-link-event-link" target="_blank"><span class="text">Sarah Sager</span><span class="text--bl"></span></a>
                          </h3>

            <div class="presenters-grid-slide-title">Job Title</div>

                          <p class="presenters-grid-slide-company">Company</p>
            
          </div>

        </div>

      
        <div class="presenters-grid-slide js-link-event">

                      <div class="presenters-grid-slide-img">
              <img src="/images/fpo/speaker-slider-4.jpg" alt="image alt tag">
            </div>
          
          <div class="presenters-grid-slide-content">

            <h3 class="h5">
                              <a href="http://www.google.com" class="presenters-grid-slide-name js-link-event-link" ><span class="text">Olivia Matthews</span><span class="text--bl"></span></a>
                          </h3>

            <div class="presenters-grid-slide-title">Job title</div>

                          <p class="presenters-grid-slide-company">Minneapolis, MN</p>
            
          </div>

        </div>

      
        <div class="presenters-grid-slide">

                      <div class="presenters-grid-slide-img">
              <img src="/images/fpo/speaker-slider.jpg" alt="image alt tag">
            </div>
          
          <div class="presenters-grid-slide-content">

            <h3 class="h5">
                              James Bradley
                          </h3>

            <div class="presenters-grid-slide-title">Job title</div>

                          <p class="presenters-grid-slide-company">Minneapolis, MN</p>
            
          </div>

        </div>

      
    </div>

    
      <div class="presenters-grid-button">

            <a href="#"
       class="btn ">
        <span>View all speakers</span>
    </a>


      </div>

    
    <div class="presenters-grid-accent">
      <img class="dots" src="../images/white-dots-2.svg" alt="ASCE dots">
    </div>

  </div>

</section>
    Source:components/presenters-grid/presenters-grid.scss, line 1

    Promo Full-Width

    Go to Confluence for details.

    Example
    ASCE dots

    Join ASCE for the professional support and growth that you won’t find anywhere else

    ASCE strives to give you the best professional and technical resources.

    Join Now
    View Markup
    <!-- components/promo-full-width/promo-full-width.twig -->


<section class="promo-full-width">

  <img class="dots" src="../images/white-dots.svg" alt="ASCE dots">

  
  <div class="promo-full-width-inner">
    <h2 class="h4 -line-above -white">Join ASCE for the professional support and growth that you won’t find anywhere else</h2>

          <p class="-white">ASCE strives to give you the best professional and technical resources.</p>
    
        <a href="#"
       class="btn -white -lock">
        <span>Join Now</span>
    </a>

  </div>
</section>
    Source:components/promo-full-width/promo-full-width.scss, line 1

    Promo Membership

    AKA – Membership Promo Blocks

    Go to Confluence for details.

    Example

    Title – member benefits

    Description of image

    Flex field 1

    Flex field 2
    Link text
    Description of image

    Flex field 1

    • Text item 1
    • Text item 2
    • Text item 3
    Take action
    Description of image

    Flex field 1

    Flex field 2
    • Text item 1
    • Text item 2
    • Text item 3
    • Text item 4
    • Text item 5
    Learn more
    Description of image

    Flex field 1

    • Text item 1
    • Text item 2
    • Text item 3
    • Text item 4
    • Text item 5
    See more info
    View Markup
    <!-- components/promo-membership/promo-membership.twig -->
<section class="promo-membership" data-columns=4>
  <div class="promo-membership-inner">
          <h2 class="promo-membership-title h4 -center">Title – member benefits</h2>
        <div class="promo-membership-items">
              <div class="promo-membership-item">
          <div class="promo-membership-item-top">
                          <div
                class="promo-membership-item-image"
                style="background-image: url('/images/fpo/image-slider-1.jpg');"
                data-animation="fadeInUp"
                data-animation-duration="1500"
                data-animation-delay="0"
              >
                <span class="sr-text">Description of image</span>
              </div>
                        <h3 class="promo-membership-item-title h5">Flex field 1</h3>
                          <div class="promo-membership-item-subtitle">Flex field 2</div>
                      </div>
                      <ul class="promo-membership-item-list -standard wysiwyg-content">
                              <li class="promo-membership-item-list-bullet">Text item 1</li>
                              <li class="promo-membership-item-list-bullet"><a href='/'>Text item 2</a></li>
                              <li class="promo-membership-item-list-bullet">Text <a href='/'>item 3</a></li>
                              <li class="promo-membership-item-list-bullet"><a href='/'>Text</a> item 4</li>
                              <li class="promo-membership-item-list-bullet">Text item 5</li>
                          </ul>
                                <a href="#" class="promo-membership-item-link btn -small">Link text</a>
                  </div>
              <div class="promo-membership-item">
          <div class="promo-membership-item-top">
                          <div
                class="promo-membership-item-image"
                style="background-image: url('/images/fpo/image-slider-2.jpg');"
                data-animation="fadeInUp"
                data-animation-duration="1500"
                data-animation-delay="100"
              >
                <span class="sr-text">Description of image</span>
              </div>
                        <h3 class="promo-membership-item-title h5">Flex field 1</h3>
                      </div>
                      <ul class="promo-membership-item-list -standard wysiwyg-content">
                              <li class="promo-membership-item-list-bullet">Text item 1</li>
                              <li class="promo-membership-item-list-bullet">Text item 2</li>
                              <li class="promo-membership-item-list-bullet">Text item 3</li>
                          </ul>
                                <a href="#" class="promo-membership-item-link btn -small">Take action</a>
                  </div>
              <div class="promo-membership-item">
          <div class="promo-membership-item-top">
                          <div
                class="promo-membership-item-image"
                style="background-image: url('/images/fpo/image-slider-3.jpg');"
                data-animation="fadeInUp"
                data-animation-duration="1500"
                data-animation-delay="200"
              >
                <span class="sr-text">Description of image</span>
              </div>
                        <h3 class="promo-membership-item-title h5">Flex field 1</h3>
                          <div class="promo-membership-item-subtitle">Flex field 2</div>
                      </div>
                      <ul class="promo-membership-item-list -standard wysiwyg-content">
                              <li class="promo-membership-item-list-bullet">Text item 1</li>
                              <li class="promo-membership-item-list-bullet">Text item 2</li>
                              <li class="promo-membership-item-list-bullet">Text item 3</li>
                              <li class="promo-membership-item-list-bullet">Text item 4</li>
                              <li class="promo-membership-item-list-bullet">Text item 5</li>
                          </ul>
                                <a href="#" class="promo-membership-item-link btn -small">Learn more</a>
                  </div>
              <div class="promo-membership-item">
          <div class="promo-membership-item-top">
                          <div
                class="promo-membership-item-image"
                style="background-image: url('/images/fpo/image-slider-1.jpg');"
                data-animation="fadeInUp"
                data-animation-duration="1500"
                data-animation-delay="300"
              >
                <span class="sr-text">Description of image</span>
              </div>
                        <h3 class="promo-membership-item-title h5">Flex field 1</h3>
                      </div>
                      <ul class="promo-membership-item-list -standard wysiwyg-content">
                              <li class="promo-membership-item-list-bullet">Text item 1</li>
                              <li class="promo-membership-item-list-bullet">Text item 2</li>
                              <li class="promo-membership-item-list-bullet">Text item 3</li>
                              <li class="promo-membership-item-list-bullet">Text item 4</li>
                              <li class="promo-membership-item-list-bullet">Text item 5</li>
                          </ul>
                                <a href="#" class="promo-membership-item-link btn -small">See more info</a>
                  </div>
          </div>
  </div>
</section>
    Source:components/promo-membership/promo-membership.scss, line 1

    Promo Splitter

    Go to Confluence for details.

    Example
    Description of promo splitter image
    Optional Image Credit
    Eyebrow

    Title – multi-line text – required

    Description – Vestibulum et turpis ullamcorper tellus dapibus tempor. strong, emphasis, anchor, deleted, inserted, underline, small, subscript, superscript

    • a list item
    • another list item
    1. list item
    2. list item
    Optional Button
    View Markup
    <!-- components/promo-splitter/promo-splitter.twig -->



  
        

<section class="promo-splitter -blue -bg-left" data-image-position="left" data-gradient="false">
  <div class="promo-splitter-inner">
    <div class="promo-splitter-image">
      <img src="/images/fpo/promo-splitter-1.jpeg" alt="Description of promo splitter image">
              <div class="promo-splitter-photo-credit">Optional Image Credit</div>
          </div>
    <div class="promo-splitter-content">
              <div class="eyebrow">Eyebrow</div>
            <h2 class="h4">Title – multi-line text – required</h2>
              <div class="wysiwyg-content">
          <p>Description – Vestibulum et turpis ullamcorper tellus dapibus tempor. <strong>strong</strong>, <em>emphasis</em>, <a href='#'>anchor</a>, <del>deleted</del>, <ins>inserted</ins>, <span style='text-decoration: underline;'>underline</span>, <small>small</small>, <sub>subscript</sub>, <sup>superscript</sup></p><ul><li>a list item</li><li>another list item</li></ul><ol><li>list item</li><li>list item</li></ol>
        </div>
                    <a href="#" class="btn -white">Optional Button</a>
                    <ul class="promo-splitter-link-list">
                      <li>
                  <a href="#"
       class="-arrow-link ">
        <span>Jan 2021 Edition</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link  -lock">
        <span>Jan 2020 Edition</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link  -external">
        <span>Jan 2019 Edition</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link  -external">
        <span>Jan 2018 Edition</span>
    </a>

            </li>
                      <li>
                  <a href="#"
       class="-arrow-link  -external">
        <span>Jan 2017 Edition</span>
    </a>

            </li>
                  </ul>
          </div>
  </div>

  </section>
    Source:components/promo-splitter/promo-splitter.scss, line 1

    Publications Promo

    Go to Confluence for details.

    Example
    ASCE publication promo image
    Optional Eyebrow

    Civil Engineering Magazine

    Vestibulum ut dui a diam lobortis mollis vitae ut ex. Aliquam erat volutpat. Curabitur mauris mauris, porttitor quis mi eget, lobortis facilisis mi. Fusce non sapien dapibus, sodales orci nec, posuere felis. Duis vestibulum varius suscipit. Suspendisse vulputate in dui nec egestas. Sed a justo euismod, facilisis nisl vel, pharetra nunc.

    See current issue
    View Markup
    <!-- components/publications-promo/publications-promo.twig -->


<section class="publications-promo ">

  <div class="publications-promo-inner">
    <div class="publications-promo-left">
      <div class="publications-promo-image">
        <img src="../images/fpo/publication_promo_img.jpg" alt="ASCE publication promo image">
      </div>
    </div>
    <div class="publications-promo-right">
      <div class="publications-promo-content">
                  <div class="eyebrow">Optional Eyebrow</div>
        
        <h2 class="h4 publications-promo-heading">Civil Engineering Magazine</h2>

        <p class="publications-promo-description">Vestibulum ut dui a diam lobortis mollis vitae ut ex. Aliquam erat volutpat. Curabitur mauris mauris, porttitor quis mi eget, lobortis facilisis mi. Fusce non sapien dapibus, sodales orci nec, posuere felis. Duis vestibulum varius suscipit. Suspendisse vulputate in dui nec egestas. Sed a justo euismod, facilisis nisl vel, pharetra nunc.</p>

                      <a href="#"
       class="btn publications-promo-button">
        <span>See current issue</span>
    </a>

        
      </div>
    </div>
  </div>
</section>
    Source:components/publications-promo/publications-promo.scss, line 1

    Related Items

    Go to Confluence for details.

    Example
    View Markup
    <!-- components/related-items/related-items.twig -->


  <aside class="related-items">
    <div class="eyebrow -large -lowercase">Title read this next</div>
    <ul class="related-items-list">
              <li class="related-items-item" role="article">
          <a href="#" class="related-items-link">
            <div class="related-items-link-text">Civil Engineering Magazine 2070</div>
                          <div class="related-items-link-img">
                <img src="/images/fpo/related-items-img.jpeg" alt="related article">
              </div>
                      </a>
        </li>
              <li class="related-items-item" role="article">
          <a href="#" class="related-items-link">
            <div class="related-items-link-text">Civil Engineering Magazine 2080</div>
                      </a>
        </li>
              <li class="related-items-item" role="article">
          <a href="#" class="related-items-link">
            <div class="related-items-link-text">Civil Engineering Magazine 2090</div>
                          <div class="related-items-link-img">
                <img src="/images/fpo/related-items-img.jpeg" alt="related article">
              </div>
                      </a>
        </li>
          </ul>
  </aside>
    Source:components/related-items/related-items.scss, line 1

    Rich Text

    AKA – Text Panel (rich-text in FE)

    Go to Confluence for details.

    Example
    IMAGE CENTER ALTIan Hollands
    Optional caption

    This course will provide a general background in port engineering. Various types of terminals will be presented, including: container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals. The course will give the specific requirements of each of these various types of facilities and prepare the student for the engineering tasks required for port facilities. Reference materials will be the most current and provide a knowledge base and toolbox for the students.

    IMAGE LEFT ALTIan Hollands

    I have led two national professional organizations (USUCGER and Geo-Institute) and two international professional organizations (ISSMGE and FedIGS) and my style has been consistent. It follows these simple steps:

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo soluta corrupti consequatur nostrum sed modi numquam, ipsam, voluptas tenetur alias quod debitis vitae provident repellat placeat libero ipsa. Eos nobis voluptatum similique nesciunt praesentium quis et ea cumque! Reprehenderit, corporis veniam. Necessitatibus neque harum, ab debitis deserunt quod nisi ratione!

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores cum beatae neque accusantium, libero vel nam eaque asperiores officia sapiente quae consequatur rem magni corrupti quam voluptate blanditiis exercitationem? Omnis!

    • Develop a general background in port engineering.
    • Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.
    • Understand the specific requirements of each of these types of facilities
      • Develop a general background in port engineering.
      • Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla velit iusto, temporibus sapiente impedit dolore, consequatur sint a maxime nihil aut eaque repellat totam magnam accusantium qui tempora quam incidunt vero. Eveniet perferendis tempore laboriosam nam suscipit animi aperiam dicta, esse vero illo, totam nihil eos molestiae rem porro reprehenderit dolorem assumenda eum minus, commodi magnam amet? Necessitatibus deleniti accusantium facilis? Repellendus quae delectus nesciunt inventore impedit quo at facere magni suscipit provident, aspernatur sapiente.

    1. Develop a general background in port engineering.
    2. Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.
    3. Understand the specific requirements of each of these types of facilities
      1. Develop a general background in port engineering.
      2. Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.
        1. Develop a general background in port engineering.
        2. Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.

    Header 1

    Start agile world performance the ball dive devops podcasting from your generation ball the.

    Header 2

    Start agile world performance the ball dive devops podcasting from your generation ball the.

    Header 3

    Start agile world performance the ball dive devops podcasting from your generation ball the.

    Header 4

    Start agile world performance the ball dive devops podcasting from your generation ball the.

    Header 5

    Start agile world performance the ball dive devops podcasting from your generation ball the.

    Header 5

    Start agile world performance the ball dive devops podcasting from your generation ball the.

    Proin dolor pellentesque portaest ipsum leo cursus vivamus vivamus varius maximus ex ut tristique quam adipiscing diam consectetur nec leo sem purus sollicitudin morbi id.

    Molestie scelerisque congue nunc ac vivamus molestie felis sollicitudin ipsum enim magna massa magna et scelerisque ac nulla orci quisque eros ac eget molestie enim.

    IMAGE LEFT ALTIan Hollands
    Heading overall loop capitalize leverage change eye test disruptive start ballpark.

    Ac massa ex vivamus nec placerat aliquam eu tempus mi adipiscing nisl erat amet quis ex elementum ac maecenas sollicitudin a nisl fusce accumsan sollicitudin. Tincidunt molestie quisque felis arcu nec nunc condimentum congue sed quam vel nisi lacus ac consectetur nisi nisi consectetur tempus enim urna interdum sem congue.

    Proin dolor pellentesque portaest ipsum leo cursus vivamus vivamus varius maximus ex ut tristique quam adipiscing diam consectetur nec leo sem purus sollicitudin morbi id.

    IMAGE RIGHT ALTIan Hollands
    Will real has domination override content organically approaches end capitalize grow approaches convergence from. Collaborative ensure derive empowerment multiple eye line strategies digital disruptive added.

    Molestie scelerisque congue nunc ac vivamus molestie felis sollicitudin ipsum enim magna massa magna et scelerisque ac nulla orci quisque eros ac eget molestie enim.

    Morbi facilisis erat dolor bibendum elementum purus lorem eget placerat facilisis sit erat et urna adipiscing quam elit diam enim hendrerit ut vivamus molestie orci.

    Proin dolor pellentesque portaest ipsum leo cursus vivamus vivamus varius maximus ex ut tristique quam adipiscing diam consectetur nec leo sem purus sollicitudin morbi id.

    Molestie scelerisque congue nunc ac vivamus molestie felis sollicitudin ipsum enim magna massa magna et scelerisque ac nulla orci quisque eros ac eget molestie enim.

    ASCE is continuing to monitor the COVID-19 situation both internationally and domestically with guidance from federal, state and local governments and health officials.

    Ian Hollands
    Optional caption
    View Markup
    <!-- components/rich-text/rich-text.twig -->

<section class="rich-text wysiwyg-content">
  <div class="rich-text-inner">
    

        
    <figure class="wysiwyg-image -center">
      <img src="/images/fpo/wysiwyg-image-center.jpg" alt="IMAGE CENTER ALT">
      <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
      <figcaption>Optional caption</figcaption>
    </figure>

    <p>This course will provide a general background in port engineering. Various types of terminals will be presented, including: container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals. The course will give the <a href="#">specific requirements</a> of each of these various types of facilities and prepare the student for the engineering tasks required for port facilities. <a href="#">Reference materials</a> will be the most current and provide a knowledge base and toolbox for the students.</p>

    
    <figure class="wysiwyg-image -left -small">
      <img src="/images/fpo/rich-text-portrait.jpg" alt="IMAGE LEFT ALT">
      <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
    </figure>

    <p>I have led two national professional organizations (USUCGER and Geo-Institute) and two international professional organizations (ISSMGE and FedIGS) and my style has been consistent. It follows these simple steps:</p>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo soluta corrupti consequatur nostrum sed modi numquam, ipsam, voluptas tenetur alias quod debitis vitae provident repellat placeat libero ipsa. Eos nobis voluptatum similique nesciunt praesentium quis et ea cumque! Reprehenderit, corporis veniam. Necessitatibus neque harum, ab debitis deserunt quod nisi ratione!</p>

    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores cum beatae neque accusantium, libero vel nam eaque asperiores officia sapiente quae consequatur rem magni corrupti quam voluptate blanditiis exercitationem? Omnis!</p>

    <ul>
      <li>Develop a general background in port engineering.</li>
      <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.</li>
      <li>
        Understand the specific requirements of each of these types of facilities
        <ul>
          <li>Develop a general background in port engineering.</li>
          <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.</li>
        </ul>
      </li>
    </ul>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla velit iusto, temporibus sapiente impedit dolore, consequatur sint a maxime nihil aut eaque repellat totam magnam accusantium qui tempora quam incidunt vero. Eveniet perferendis tempore laboriosam nam suscipit animi aperiam dicta, esse vero illo, totam nihil eos molestiae rem porro reprehenderit dolorem assumenda eum minus, commodi magnam amet? Necessitatibus deleniti accusantium facilis? Repellendus quae delectus nesciunt inventore impedit quo at facere magni suscipit provident, aspernatur sapiente.</p>

    <ol>
      <li>Develop a general background in port engineering.</li>
      <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.</li>
      <li>
        Understand the specific requirements of each of these types of facilities
        <ol>
          <li>Develop a general background in port engineering.</li>
          <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.
            <ol>
              <li>Develop a general background in port engineering.</li>
              <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
    <h1>Header 1</h1>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>
    <h2>Header 2</h2>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>
    <h3>Header 3</h3>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>
    <h4>Header 4</h4>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>
    <h5>Header 5</h5>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>
    <h6>Header 5</h6>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>

    <p>Proin dolor pellentesque portaest ipsum leo cursus vivamus vivamus varius maximus ex ut tristique quam adipiscing diam consectetur nec leo sem purus sollicitudin morbi id.</p>
    <p>Molestie scelerisque congue nunc ac vivamus molestie felis sollicitudin ipsum enim magna massa magna et scelerisque ac nulla orci quisque eros ac eget molestie enim.</p>

    
    <figure class="wysiwyg-image -left">
      <img src="/images/fpo/wysiwyg-image-left.jpg" alt="IMAGE LEFT ALT">
      <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
      <figcaption>Heading overall loop capitalize leverage change eye test disruptive start ballpark.</figcaption>
    </figure>

    <p>Ac massa ex vivamus nec placerat aliquam eu tempus mi adipiscing nisl erat amet quis ex elementum ac maecenas sollicitudin a nisl fusce accumsan sollicitudin. Tincidunt molestie quisque felis arcu nec nunc condimentum congue sed quam vel nisi lacus ac consectetur nisi nisi consectetur tempus enim urna interdum sem congue.</p>
    <p>Proin dolor pellentesque portaest ipsum leo cursus vivamus vivamus varius maximus ex ut tristique quam adipiscing diam consectetur nec leo sem purus sollicitudin morbi id.</p>

    
    <figure class="wysiwyg-image -right">
      <img src="/images/fpo/wysiwyg-image-right.jpg" alt="IMAGE RIGHT ALT">
      <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
      <figcaption>Will real has domination override content organically approaches end capitalize grow approaches convergence from. Collaborative ensure derive empowerment multiple eye line strategies digital disruptive added.</figcaption>
    </figure>

    <p>Molestie scelerisque congue nunc ac vivamus molestie felis sollicitudin ipsum enim magna massa magna et scelerisque ac nulla orci quisque eros ac eget molestie enim.</p>
    <blockquote>Morbi facilisis erat dolor bibendum elementum purus lorem eget placerat facilisis sit erat et urna adipiscing quam elit diam enim hendrerit ut vivamus molestie orci.</blockquote>
    <p>Proin dolor pellentesque portaest ipsum leo cursus vivamus vivamus varius maximus ex ut tristique quam adipiscing diam consectetur nec leo sem purus sollicitudin morbi id.</p>
    <p>Molestie scelerisque congue nunc ac vivamus molestie felis sollicitudin ipsum enim magna massa magna et scelerisque ac nulla orci quisque eros ac eget molestie enim.</p>

    
    <div class="callout">
      <p>ASCE is continuing to monitor the COVID-19 situation both internationally and domestically with guidance from federal, state and local governments and health officials.</p>
    </div>

    
    <figure class="wysiwyg-image -center -video">
      <div class="video-container">
        <iframe src="https://players.brightcove.net/1752604059001/VJCJXL3Ye_default/index.html?videoId=4093643993001" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" allow="encrypted-media"></iframe>
      </div>
      <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
      <figcaption>Optional caption</figcaption>
    </figure>
      </div>
</section>
    Source:components/rich-text/rich-text.scss, line 1

    RSS Link-List

    AKA – iMechanica RSS | Rasa.io RSS

    Go to Confluence for details.

    Example

    Title Component – RSS Link List

    View Markup
    <!-- components/rss-link-list/rss-link-list.twig -->


<section class="rss-link-list">
  <div class="rss-link-list-inner">
    <h2 class="h4">Title Component – RSS Link List</h2>
    <ul class="rss-link-list-listings">
              <li class="rss-link-list-item js-link-event" role="article">
          <a href="#" class="js-link-event-link">Case study: Engineer optimizes 25-foot gravity wall with Redi-Rock PMBs</a>
                      <p>When a hangar excavation at John C. Tune Airport in Nashville, Tennessee, opened up a geotechnical can of worms, Clint Hines, P.E., designed a 25-foot gravity wall using Redi-Rock PMBs as a solution.</p>
                  </li>
              <li class="rss-link-list-item js-link-event" role="article">
          <a href="#" class="js-link-event-link">NASA beach project requires the right stuff — even for Florida sand</a>
                      <p>A recent dune restoration demonstrated that NASA's exacting standards don't apply exclusively to the people, equipment, and facilities that constitute America’s space program.</p>
                  </li>
              <li class="rss-link-list-item js-link-event" role="article">
          <a href="#" class="js-link-event-link">How to achieve net-zero emissions by 2050 — but there is a cost</a>
                      <p>To expand the global use of clean energy technology, the International Energy Agency road map lays out milestones that would cost an estimated $5 trillion and create tens of millions of jobs.</p>
                  </li>
              <li class="rss-link-list-item js-link-event" role="article">
          <a href="#" class="js-link-event-link">Got used face masks? Pave a road with them</a>
                      <p>Australian university researchers have been experimenting with how to recycle single-use, disposable face masks into road pavement. The resulting blend is even stronger than traditional pavement.</p>
                  </li>
              <li class="rss-link-list-item js-link-event" role="article">
          <a href="#" class="js-link-event-link">Conveying message critical in land development engineering</a>
                      <p>When trying to convince the public of a project's importance, “it’s really the soft skills that matter”, says David Johnson, a land development industry veteran and author of a book on the topic.</p>
                  </li>
              <li class="rss-link-list-item js-link-event" role="article">
          <a href="#" class="js-link-event-link">5 things you didn’t know about the St. Francis Dam failure</a>
                      <p>The 1928 St. Francis Dam failure ranks as the worst U.S. human-made disaster of the 20th century. So, with the idea that we learn from failures, here are some facts you didn’t know about the failure.</p>
                  </li>
              <li class="rss-link-list-item js-link-event" role="article">
          <a href="#" class="js-link-event-link">So you’re returning to the civil engineering office, but what should you wear?</a>
                      <p>Civil engineers are returning to in-person work this year, which means renewed questions about appropriate dress codeThe post So you’re returning to the civil engineering office, but what should you wear? appeared first on Civil Engineering Source.</p>
                  </li>
              <li class="rss-link-list-item js-link-event" role="article">
          <a href="#" class="js-link-event-link">Denver rebuilds historical downtown pedestrian hub</a>
                      <p>Pedestrian malls took off across the U.S. in the 1960s and ’70s, perhaps none more so than the 13-block 16th Street Mall in downtown Denver. Now it’s about to be entirely rebuilt from the ground up.</p>
                  </li>
              <li class="rss-link-list-item js-link-event" role="article">
          <a href="#" class="js-link-event-link">Senate's bipartisan passage of water and wastewater bill bodes well</a>
                      <p>The focus now shifts to the House, where members have been slower to develop bipartisan bills to reauthorize the critical state revolving fund programs and address community needs regarding water.</p>
                  </li>
              <li class="rss-link-list-item js-link-event" role="article">
          <a href="#" class="js-link-event-link">Surviving high winds: Enhancing the durability of residential construction</a>
                      <p>Review recommendations for improving structural strength and resiliency in a new ASCE paper, “Structural Observations and Tornado Damage Mitigation Concepts: March 2020 Tennessee Tornadoes.”</p>
                  </li>
          </ul>
  </div>
</section>
    Source:components/rss-link-list/rss-link-list.scss, line 1

    Schedule

    Go to Confluence for details.

    Example

    Featured sessions

    View full schedule
    8:00am - 12:00pm

    Event name lorem ipsum dolor sit amet consectetur

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.

    Menzer Pehlivan
    Menzer Pehlivan
    Aarti Tandon
    Aarti Tandon
    Ismaeel Babur
    Ismaeel Babur

    Event name quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.

    James Lee
    James Lee
    12:00pm - 4:00pm

    Event name lorem ipsum dolor sit amet consectetur

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.

    Stephen Phillips
    Stephen Phillips
    Mark Pestrella
    Mark Pestrella

    Event name lorem ipsum dolor sit amet consectetur

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.

    Jason E. Kelly
    Jason E. Kelly
    Alison Smart
    Alison Smart
    Brian Raff
    Brian Raff
    Jennifer Grubbs-Donovan
    Jennifer Grubbs-Donovan
    Olivia W. Renn
    Olivia W. Renn
    View Markup
    
<!-- components/schedule/schedule.twig -->
<article class="schedule tab-panels js-tab-panels">

    <div class="schedule-inner">

        <div class="schedule-intro">

        <div class="schedule-intro-title">
            <h2 class="h3">Featured sessions</h2>
            <div class="schedule-intro-link">
                <a href="/"
       class="-arrow-link  -external">
        <span>View full schedule</span>
    </a>

            </div>
        </div>

        <nav class="tab-panel-nav" aria-label="Tabbed Navigation">
            <div class="tab-panel-nav-inner">
            <ul class="tab-panel-nav-links">
                                <li class="tab-panel-nav-link">
                    <button
                    type="button"
                    id="tab-item-0c76d01a-10ea-4429-bdb9-0c6174d2add3-1"
                    class="tab-panel-nav-btn js-tab-panel-btn -active"
                    aria-expanded="true"
                    aria-controls="section-0c76d01a-10ea-4429-bdb9-0c6174d2add3-1"
                    >Monday</button>
                </li>
                                <li class="tab-panel-nav-link">
                    <button
                    type="button"
                    id="tab-item-0c76d01a-10ea-4429-bdb9-0c6174d2add3-2"
                    class="tab-panel-nav-btn js-tab-panel-btn "
                    aria-expanded="false"
                    aria-controls="section-0c76d01a-10ea-4429-bdb9-0c6174d2add3-2"
                    >Tuesday</button>
                </li>
                                <li class="tab-panel-nav-link">
                    <button
                    type="button"
                    id="tab-item-0c76d01a-10ea-4429-bdb9-0c6174d2add3-3"
                    class="tab-panel-nav-btn js-tab-panel-btn "
                    aria-expanded="false"
                    aria-controls="section-0c76d01a-10ea-4429-bdb9-0c6174d2add3-3"
                    >Wednesday</button>
                </li>
                                <li class="tab-panel-nav-link">
                    <button
                    type="button"
                    id="tab-item-0c76d01a-10ea-4429-bdb9-0c6174d2add3-4"
                    class="tab-panel-nav-btn js-tab-panel-btn "
                    aria-expanded="false"
                    aria-controls="section-0c76d01a-10ea-4429-bdb9-0c6174d2add3-4"
                    >Thursday</button>
                </li>
                                <li class="tab-panel-nav-link">
                    <button
                    type="button"
                    id="tab-item-0c76d01a-10ea-4429-bdb9-0c6174d2add3-5"
                    class="tab-panel-nav-btn js-tab-panel-btn "
                    aria-expanded="false"
                    aria-controls="section-0c76d01a-10ea-4429-bdb9-0c6174d2add3-5"
                    >Friday</button>
                </li>
                            </ul>
            </div>
        </nav>

        </div>

        <div class="tab-panels-container">

        
            <section
            id="section-0c76d01a-10ea-4429-bdb9-0c6174d2add3-1"
            class="tab-panel js-tab-panel -active"
            role="region"
            aria-labelledby="tab-item-0c76d01a-10ea-4429-bdb9-0c6174d2add3-1"
            aria-hidden="false"
            >

            <div class="tab-panel-outer">
                <div class="tab-panel-inner">
                <div class="tab-panel-content">

                    
                    <div class="schedule-session-time-block">

                        <div class="schedule-session-time">8:00am - 12:00pm</div>

                        <div class="schedule-session-list">

                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                    <a href="/"
       class="-arrow-link  -external">
        <span>Event name lorem ipsum dolor sit amet consectetur</span>
    </a>

                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                    <a href="/"
       class="-arrow-link  -external">
        <span>Event name quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis</span>
    </a>

                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="James Lee">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>James Lee</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                        
                        </div>
                    </div>

                    
                    <div class="schedule-session-time-block">

                        <div class="schedule-session-time">12:00pm - 4:00pm</div>

                        <div class="schedule-session-list">

                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                    <a href="/"
       class="-arrow-link  -external">
        <span>Event name lorem ipsum dolor sit amet consectetur</span>
    </a>

                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Stephen Phillips">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Stephen Phillips</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Mark Pestrella">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Mark Pestrella</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                    <a href="/"
       class="-arrow-link  -external">
        <span>Event name lorem ipsum dolor sit amet consectetur</span>
    </a>

                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Jason E. Kelly">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Jason E. Kelly</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Alison Smart">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Alison Smart</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Brian Raff">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Brian Raff</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Jennifer Grubbs-Donovan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Jennifer Grubbs-Donovan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Olivia W. Renn">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Olivia W. Renn</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                        
                        </div>
                    </div>

                    
                </div>
                </div>
            </div>
            </section>

        
            <section
            id="section-0c76d01a-10ea-4429-bdb9-0c6174d2add3-2"
            class="tab-panel js-tab-panel "
            role="region"
            aria-labelledby="tab-item-0c76d01a-10ea-4429-bdb9-0c6174d2add3-2"
            aria-hidden="true"
            >

            <div class="tab-panel-outer">
                <div class="tab-panel-inner">
                <div class="tab-panel-content">

                    
                    <div class="schedule-session-time-block">

                        <div class="schedule-session-time">9:00am - 11:00pm</div>

                        <div class="schedule-session-list">

                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                TUESDAY Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                        
                        </div>
                    </div>

                    
                    <div class="schedule-session-time-block">

                        <div class="schedule-session-time">11:00am - 5:00pm</div>

                        <div class="schedule-session-list">

                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                        
                        </div>
                    </div>

                    
                </div>
                </div>
            </div>
            </section>

        
            <section
            id="section-0c76d01a-10ea-4429-bdb9-0c6174d2add3-3"
            class="tab-panel js-tab-panel "
            role="region"
            aria-labelledby="tab-item-0c76d01a-10ea-4429-bdb9-0c6174d2add3-3"
            aria-hidden="true"
            >

            <div class="tab-panel-outer">
                <div class="tab-panel-inner">
                <div class="tab-panel-content">

                    
                    <div class="schedule-session-time-block">

                        <div class="schedule-session-time">8:30am - 1:00pm</div>

                        <div class="schedule-session-list">

                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                WEDNESDAY Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                        
                        </div>
                    </div>

                    
                    <div class="schedule-session-time-block">

                        <div class="schedule-session-time">2:00pm - 6:00pm</div>

                        <div class="schedule-session-list">

                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                        
                        </div>
                    </div>

                    
                </div>
                </div>
            </div>
            </section>

        
            <section
            id="section-0c76d01a-10ea-4429-bdb9-0c6174d2add3-4"
            class="tab-panel js-tab-panel "
            role="region"
            aria-labelledby="tab-item-0c76d01a-10ea-4429-bdb9-0c6174d2add3-4"
            aria-hidden="true"
            >

            <div class="tab-panel-outer">
                <div class="tab-panel-inner">
                <div class="tab-panel-content">

                    
                    <div class="schedule-session-time-block">

                        <div class="schedule-session-time">8:30am - 12:30pm</div>

                        <div class="schedule-session-list">

                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                THURSDAY Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                        
                        </div>
                    </div>

                    
                    <div class="schedule-session-time-block">

                        <div class="schedule-session-time">1:00pm - 4:30pm</div>

                        <div class="schedule-session-list">

                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                        
                        </div>
                    </div>

                    
                </div>
                </div>
            </div>
            </section>

        
            <section
            id="section-0c76d01a-10ea-4429-bdb9-0c6174d2add3-5"
            class="tab-panel js-tab-panel "
            role="region"
            aria-labelledby="tab-item-0c76d01a-10ea-4429-bdb9-0c6174d2add3-5"
            aria-hidden="true"
            >

            <div class="tab-panel-outer">
                <div class="tab-panel-inner">
                <div class="tab-panel-content">

                    
                    <div class="schedule-session-time-block">

                        <div class="schedule-session-time">9:00am - 12:00pm</div>

                        <div class="schedule-session-list">

                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                    <a href="/"
       class="-arrow-link ">
        <span>FRIDAY Event name lorem ipsum dolor sit amet consectetur</span>
    </a>

                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                        
                        </div>
                    </div>

                    
                    <div class="schedule-session-time-block">

                        <div class="schedule-session-time">1:00pm - 4:00pm</div>

                        <div class="schedule-session-list">

                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                                                    <div class="schedule-session">
                            <h3 class="h5">
                                                                Event name lorem ipsum dolor sit amet consectetur
                                                            </h3>
                            <div class="schedule-session-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
                            <div class="schedule-session-speakers">
                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Menzer Pehlivan">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Menzer Pehlivan</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Aarti Tandon">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Aarti Tandon</span>
    </a>

                                                                        </div>
                                </div>

                                                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="/images/fpo/speaker-1.jpg" alt="Ismaeel Babur">
                                    </div>
                                    <div class="schedule-speaker-name">
                                                                                <a href="/"
       class="-arrow-link  -external">
        <span>Ismaeel Babur</span>
    </a>

                                                                        </div>
                                </div>

                                                            </div>
                            </div>
                        
                        </div>
                    </div>

                    
                </div>
                </div>
            </div>
            </section>

        
        </div>

    </div>

</article>
    Source:components/schedule/schedule.scss, line 1

    Section Search

    Go to Confluence for details.

    Example
    Text goes here
    View Markup
    
<!-- components/section-search/section-search.twig -->
<section class="section-search">
  <div class="section-search-inner">
    <form class="section-search-form">
      <div class="section-search-form-left">
        <div class="section-search-text h5 -white">Text goes here</div>
      </div>
      <div class="section-search-form-right">
        <label for="section-search-form-input" class="sr-text">Section Search</label>
        <input id="section-search-form-input" type="text" name="" value="" placeholder="SEARCH ASCE.ORG" class="section-search-form-input">
        <button type="submit" class="section-search-form-submit">
          <span class="sr-text">Search</span>
        </button>
      </div>
      <div class="section-search-checkbox-wrapper">
        <input id="section-search-checkbox" type="checkbox">
        <label for="section-search-checkbox">Label goes here</label>
        <button class="tooltip" [data-animation='scale' ]="]" data-tippy-content="Tooltip goes here...">?<span class="sr-text">More Information</span></button>
      </div>
    </form>
  </div>
</section>
    Source:components/section-search/section-search.scss, line 1

    Social Share

    Go to Confluence for details.

    Example
    View Markup
    <aside class="social-share">
  
  <div class="social-share-title">Share</div>
  <ul class="social-share-services">
    <li><a data-service="facebook" href="#"><span class="sr-text">Share on Facebook</span></a></li>
    <li><a data-service="twitter" href="#"><span class="sr-text">Share on Twitter</span></a></li>
    <li><a data-service="linkedin" href="#"><span class="sr-text">Share on LinkedIn</span></a></li>
  </ul>
  
</aside>
    Source:components/social-share/social-share.scss, line 1

    Source Detail-Hero

    Go to Confluence for details.

    Example
    Department

    Title – A year later – considering the effects of COVID-19 on civil engineering

    eyebrow text
    7
    12 min read
    sponsors
    View Markup
    <!-- components/source-detail-hero/source-detail-hero.twig -->


<section class="source-detail-hero">
  <div class="source-detail-hero-inner">
    <div class="h5 source-detail-hero-eyebrow">Department</div>
    <h1 class="h1 source-detail-hero-title">Title – A year later – considering the effects of COVID-19 on civil engineering</h1>

          <!-- components/hero-metadata/hero-metadata.twig -->
<section class="hero-metadata">
    <div class="hero-metadata-eyebrow eyebrow">eyebrow text</div>
    
            <div class="hero-metadata-comment-count">
            <a href="#">7</a>
        </div>
                <div class="hero-metadata-duration">12 min read</div>
        
    <div class="hero-metadata-sponsors">
        <div class="hero-metadata-sponsors-text">sponsors</div>
        <a href="#" class="hero-metadata-sponsors-logo">
            <img src="/images/fpo/sponsors-logo-1.svg"
                 alt="image alt text"
            />
        </a>
    </div>
</section>    
  </div>
</section>
    Source:components/source-detail-hero/source-detail-hero.scss, line 1

    Source Hero

    AKA – Hero Source-Landing

    Go to Confluence for details.

    Example
    Eyebrow – Innovation

    Title – Would you believe what wood can achieve?

    Photo by Nareeta Martin on Unsplash
    View Markup
    <!-- components/source-hero/source-hero.twig -->

<section class="source-hero" style="background-image: url('/images/fpo/source-hero.jpeg');">
  <div class="source-hero-inner">
    <div class="source-hero-content">

              <div class="eyebrow">Eyebrow – Innovation</div>
      
              <h2 class="h3 source-hero-title">Title – Would you believe what wood can achieve?</h2>
      
    </div>

          <div class="photo-credit source-hero-credit">Photo by Nareeta Martin on Unsplash</div>
    
  </div>
</section>
    Source:components/source-hero/source-hero.scss, line 1

    Source Sub-Nav

    Go to Confluence for details.

    Example
    View Markup
    <!-- components/source-sub-nav/source-sub-nav.twig -->



<nav class="source-sub-nav">

  <div class="source-sub-nav-inner">

    <div class="source-sub-nav-logo-wrapper">
      <a href="#" class="source-sub-nav-source-logo">
        <img src="/images/logo-source-masthead.svg" alt="source logo">
      </a>

          <div class="source-sub-nav-secondary-logo">
        <img src="/images/fpo/ce-masthead.png" alt="CE magazine logo">
      </div>
    

    </div>

          <a href="#" class="btn source-sub-nav-subscribe-button-desktop">Subscribe Now</a>
    
          <div class="source-sub-nav-tagline">Optional Tagline</div>
    
    <div class="source-sub-nav-mobile-trigger-wrapper">
      <button class="source-sub-nav-mobile-trigger">
        <span class="sr-text">Open sub-menu</span>
        <span class="line line-1" aria-hidden="true"></span>
        <span class="line line-2" aria-hidden="true"></span>
        <span class="line line-3" aria-hidden="true"></span>
      </button>
    </div>

    <ul class="source-sub-nav-items">
              <li class="source-sub-nav-item" data-expanded="false">
          <a href="#">Society News</a>

                      <button
              id="source-sub-nav--1"
              class="source-sub-nav-trigger"
              aria-expanded="false"
              aria-controls="source-sub-nav--1"
            >
              <span class="sr-text">Expand Society News's children'</span>
            </button>
          
                      <ul
            class="source-sub-nav-children"
            id="source-sub-nav--1"
            role="region"
            aria-labelledby="source-sub-nav--1"
            aria-hidden="true"
            >
                              <li>
                  <a href="#">Sub Page 1</a>
                </li>
                              <li>
                  <a href="#">Sub Page 2</a>
                </li>
                              <li>
                  <a href="#">Sub Page 3</a>
                </li>
                          </ul>
                  </li>
              <li class="source-sub-nav-item" data-expanded="false">
          <a href="#">Videos</a>

                      <button
              id="source-sub-nav--2"
              class="source-sub-nav-trigger"
              aria-expanded="false"
              aria-controls="source-sub-nav--2"
            >
              <span class="sr-text">Expand Videos's children'</span>
            </button>
          
                      <ul
            class="source-sub-nav-children"
            id="source-sub-nav--2"
            role="region"
            aria-labelledby="source-sub-nav--2"
            aria-hidden="true"
            >
                              <li>
                  <a href="#">Sub Page 1</a>
                </li>
                              <li>
                  <a href="#">Sub Page 2</a>
                </li>
                              <li>
                  <a href="#">Sub Page 3</a>
                </li>
                          </ul>
                  </li>
              <li class="source-sub-nav-item" data-expanded="false">
          <a href="#">Podcasts</a>

                      <button
              id="source-sub-nav--3"
              class="source-sub-nav-trigger"
              aria-expanded="false"
              aria-controls="source-sub-nav--3"
            >
              <span class="sr-text">Expand Podcasts's children'</span>
            </button>
          
                      <ul
            class="source-sub-nav-children"
            id="source-sub-nav--3"
            role="region"
            aria-labelledby="source-sub-nav--3"
            aria-hidden="true"
            >
                              <li>
                  <a href="#">Sub Page 1</a>
                </li>
                              <li>
                  <a href="#">Sub Page 2</a>
                </li>
                              <li>
                  <a href="#">Sub Page 3</a>
                </li>
                          </ul>
                  </li>
              <li class="source-sub-nav-item" data-expanded="false">
          <a href="#">Perspectives</a>

          
                  </li>
            <li>
                  <a href="#" class="btn source-sub-nav-subscribe-button-mobile">Subscribe Now</a>
              </li>
    </ul>



  </div>

</nav>
    Source:components/source-sub-nav/source-sub-nav.scss, line 1

    Sponsors

    Go to Confluence for details.

    Example
    Sponsors
    View Markup
    <!-- components/sponsors/sponsors.twig -->


<div class="sponsors">
  <div class="sponsors-label eyebrow">Sponsors</div>
  <ul class="sponsors-list">
          <li>
        <a href="#" class="sponsors-link" target="_blank">
          <img src="/images/fpo/sponsors-logo-1.svg" class="sponsors-logo" alt="sponsor 1">
        </a>
      </li>
          <li>
        <a href="#" class="sponsors-link" target="_blank">
          <img src="/images/fpo/sponsors-logo-2.png" class="sponsors-logo" alt="sponsor 2">
        </a>
      </li>
          <li>
        <a href="#" class="sponsors-link" target="_blank">
          <img src="/images/fpo/sponsors-logo-3.svg" class="sponsors-logo" alt="sponsor 3">
        </a>
      </li>
      </ul>
</div>
    Source:components/sponsors/sponsors.scss, line 1

    Sponsors Carousel

    Go to Confluence for details.

    Example

    Featured sponsors (10)

    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

    Become a sponsor
    Optional secondary link
    Logo 1
    Elite
    Logo 2
    Elite
    Logo 3
    Premier
    Logo 4
    Elite
    Logo 5
    Showcase
    Logo 6
    Thought Leaders
    Logo 7
    Elite
    Logo 8
    Elite
    Logo 9
    Elite
    Logo 10
    Premier
    View Markup
    <!-- components/sponsors-carousel/sponsors-carousel.twig -->


<!-- components/sponsors-carousel/sponsors-carousel.twig -->
<article class="sponsors-carousel">

  
  <!-- components/intro-panel/intro-panel.twig -->



<section class="intro-panel" data-text="true">

  <h2 class="h5">Featured sponsors (10)</h2>

      <div class="intro-panel-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.</p>
    </div>
  
          <a href="#"
       class="btn ">
        <span>Become a sponsor</span>
    </a>

  
  
          <div class="intro-panel-secondary-link">
            <a href="#"
       class="-arrow-link ">
        <span>Optional secondary link</span>
    </a>

      </div>
    
  
</section>

  

  <div
    class="sponsors-carousel-scroller"
    data-count="10"
  >
    <div class="sponsors-carousel-track js-sponsors-carousel-track js-hidden-until-load">
              <div class="sponsors-carousel-item js-sponsors-carousel-item">
          <div class="sponsors-carousel-img">
                          <a href="http://www.google.com" class="sponsors-carousel-link" target="_blank"><img src="/images/fpo/logos/sponsor-logo-1.png" alt="Logo 1" loading="eager"></a>
                      </div>
          <div class="sponsors-carousel-level">Elite</div>
        </div>
              <div class="sponsors-carousel-item js-sponsors-carousel-item">
          <div class="sponsors-carousel-img">
                          <a href="http://www.google.com" class="sponsors-carousel-link" target="_blank"><img src="/images/fpo/logos/sponsor-logo-2.png" alt="Logo 2" loading="eager"></a>
                      </div>
          <div class="sponsors-carousel-level">Elite</div>
        </div>
              <div class="sponsors-carousel-item js-sponsors-carousel-item">
          <div class="sponsors-carousel-img">
                          <a href="http://www.google.com" class="sponsors-carousel-link" target="_blank"><img src="/images/fpo/logos/sponsor-logo-3.png" alt="Logo 3" loading="eager"></a>
                      </div>
          <div class="sponsors-carousel-level">Premier</div>
        </div>
              <div class="sponsors-carousel-item js-sponsors-carousel-item">
          <div class="sponsors-carousel-img">
                          <a href="http://www.google.com" class="sponsors-carousel-link" target="_blank"><img src="/images/fpo/logos/sponsor-logo-4.png" alt="Logo 4" loading="eager"></a>
                      </div>
          <div class="sponsors-carousel-level">Elite</div>
        </div>
              <div class="sponsors-carousel-item js-sponsors-carousel-item">
          <div class="sponsors-carousel-img">
                          <a href="http://www.google.com" class="sponsors-carousel-link" target="_blank"><img src="/images/fpo/logos/sponsor-logo-5.png" alt="Logo 5" loading="eager"></a>
                      </div>
          <div class="sponsors-carousel-level">Showcase</div>
        </div>
              <div class="sponsors-carousel-item js-sponsors-carousel-item">
          <div class="sponsors-carousel-img">
                          <a href="http://www.google.com" class="sponsors-carousel-link" target="_blank"><img src="/images/fpo/logos/sponsor-logo-18.png" alt="Logo 6" loading="eager"></a>
                      </div>
          <div class="sponsors-carousel-level">Thought Leaders</div>
        </div>
              <div class="sponsors-carousel-item js-sponsors-carousel-item">
          <div class="sponsors-carousel-img">
                          <a href="http://www.google.com" class="sponsors-carousel-link" target="_blank"><img src="/images/fpo/logos/sponsor-logo-7.png" alt="Logo 7" loading="eager"></a>
                      </div>
          <div class="sponsors-carousel-level">Elite</div>
        </div>
              <div class="sponsors-carousel-item js-sponsors-carousel-item">
          <div class="sponsors-carousel-img">
                          <a href="http://www.google.com" class="sponsors-carousel-link" target="_blank"><img src="/images/fpo/logos/sponsor-logo-8.png" alt="Logo 8" loading="eager"></a>
                      </div>
          <div class="sponsors-carousel-level">Elite</div>
        </div>
              <div class="sponsors-carousel-item js-sponsors-carousel-item">
          <div class="sponsors-carousel-img">
                          <a href="http://www.google.com" class="sponsors-carousel-link" target="_blank"><img src="/images/fpo/logos/sponsor-logo-9.png" alt="Logo 9" loading="eager"></a>
                      </div>
          <div class="sponsors-carousel-level">Elite</div>
        </div>
              <div class="sponsors-carousel-item js-sponsors-carousel-item">
          <div class="sponsors-carousel-img">
                          <a href="http://www.google.com" class="sponsors-carousel-link" target="_blank"><img src="/images/fpo/logos/sponsor-logo-10.png" alt="Logo 10" loading="eager"></a>
                      </div>
          <div class="sponsors-carousel-level">Premier</div>
        </div>
          </div>

    <div class="sponsors-carousel-controls">
      <button type="button" class="video-toggle-btn js-sponsors-carousel-control"><span class="sr-text">Pause</span></button>
    </div>

  </div>

</article>
    Source:components/sponsors-carousel/sponsors-carousel.scss, line 1

    Standard Hero

    Go to Confluence for details.

    Example

    Page title

    View Markup
    <!-- components/standard-hero/standard-hero.twig -->


<section class="standard-hero">
  <div class="standard-hero-inner">
    <h1 class="h1">Page title</h1>
    <!-- components/breadcrumbs/breadcrumbs.twig -->
<nav class="breadcrumbs">
  <ul class="breadcrumbs-list">
    <li class="breadcrumbs-list-item"><a href="/" class="breadcrumbs-list-item-link icon-home"><span class="sr-text">Home</span></a></li>
      </ul>
</nav>
  </div>
  </section>
    Source:components/standard-hero/standard-hero.scss, line 1

    Stats Three-Up

    Go to Confluence for details.

    Example

    Stats Three Up

    600+

    active jobs on ASCE Career Connections job bank

    $109k

    total median pre-tax annual income for civil engineers

    $62k

    formatting for a stat with a link attached

    View Markup
    <!-- components/stats-three-up/stats-three-up.twig -->

<section class="stats-three-up " data-columns="3">
  <div class="stats-three-up-inner">

    <div class="stats-three-up-border"></div>

    
      <h2 class="stats-three-up-title h3">Stats Three Up</h2>

    
    <div class="stats-three-up-items">
            <div class="stats-three-up-item">

        
          <div class="stats-three-up-item-title">600+</div>
          <p class="stats-three-up-item-text">active jobs on ASCE Career Connections job bank</p>

        
      </div>
          <div class="stats-three-up-item">

        
          <div class="stats-three-up-item-title">$109k</div>
          <p class="stats-three-up-item-text">total median pre-tax annual income for civil engineers</p>

        
      </div>
          <div class="stats-three-up-item">

        
          <a href="#" class="stats-three-up-item-link">
            <div class="stats-three-up-item-title-wrapper">
              <div class="stats-three-up-item-title h1">$62k</div>
            </div>
            <p class="stats-three-up-item-text h6">formatting for a stat with a link attached</p>
          </a>

        
      </div>
        </div>

  </div>
</section>
    Source:components/stats-three-up/stats-three-up.scss, line 1

    Table

    Go to Confluence for details.

    Example

    Table Header

    EventSchedule DateStatusTitle 4Title 5
    T&DI Student Competition: Around the World in XX Days Using YY WaysPostponedLorem ipsumLorem ipsum
    EMI International ConferencePostponedLorem ipsumLorem ipsum
    Another ConferencePostponedLorem ipsumLorem ipsum
    Yet Another ConferencePostponedLorem ipsumLorem ipsum
    Unlinked ConferencePostponedLorem ipsumLorem ipsum
    table button text
    View Markup
    <!-- components/table/table.twig -->

<section class="table">

  <h2 class="h4 table-header">Table Header</h2>

  <table class="table-wrapper wysiwyg-content" data-columns="5">

      <thead>
      <tr>
                <th>Event</th>
                <th>Schedule Date</th>
                <th>Status</th>
                <th>Title 4</th>
                <th>Title 5</th>
              </tr>
    </thead>
  
    <tbody>
            <tr>
                <td data-title="Event"><a href='#'>T&DI Student Competition: Around the World in XX Days Using YY Ways</a></td>
                <td data-title="Schedule Date"><time datetime='2020-01-27'>January 27, 2020</time></td>
                <td data-title="Status">Postponed</td>
                <td data-title="Title 4">Lorem ipsum</td>
                <td data-title="Title 5">Lorem ipsum</td>
              </tr>
            <tr>
                <td data-title="Event"><a href='#'>EMI International Conference</a></td>
                <td data-title="Schedule Date"><time datetime='2020-02-27'>February 27, 2020</time></td>
                <td data-title="Status">Postponed</td>
                <td data-title="Title 4">Lorem ipsum</td>
                <td data-title="Title 5">Lorem ipsum</td>
              </tr>
            <tr>
                <td data-title="Event"><a href='#'>Another Conference</a></td>
                <td data-title="Schedule Date"><time datetime='2020-03-27'>March 27, 2020</time></td>
                <td data-title="Status">Postponed</td>
                <td data-title="Title 4">Lorem ipsum</td>
                <td data-title="Title 5">Lorem ipsum</td>
              </tr>
            <tr>
                <td data-title="Event"><a href='#'>Yet Another Conference</a></td>
                <td data-title="Schedule Date"><time datetime='2020-04-27'>April 27, 2020</time></td>
                <td data-title="Status">Postponed</td>
                <td data-title="Title 4">Lorem ipsum</td>
                <td data-title="Title 5">Lorem ipsum</td>
              </tr>
            <tr>
                <td data-title="Event">Unlinked Conference</td>
                <td data-title="Schedule Date"><time datetime='2020-05-27'>May 27, 2020</time></td>
                <td data-title="Status">Postponed</td>
                <td data-title="Title 4">Lorem ipsum</td>
                <td data-title="Title 5">Lorem ipsum</td>
              </tr>
          </tbody>
  </table>

    <a class="btn table-button" href="#"
     target="_blank" rel="noopener nofollow">table button text</a>
  </section>
    Source:components/table/table.scss, line 1

    Tags

    Go to Confluence for details.

    Example
    View Markup
    <!-- components/tags/tags.twig -->


<section class="tags">
  <div class="tags-inner">
    <div class="tags-content">
      <ul>
                  <li><a href="">Topic</a></li>
                  <li><a href="">Topic Tag</a></li>
                  <li><a href="">Much longer topic tag</a></li>
              </ul>
    </div>
  </div>
</section>
    Source:components/tags/tags.scss, line 1

    Testimonial Slider

    Go to Confluence for details.

    Example

    "I have the confidence to embrace any challenge, from public speaking to leadership, through the opportunities that ASCE has provided me with."

    Jonathan Brower, P.E., M.ASCE
    Member
    LinkedIn

    "Please listen to what I have to say."

    A Person
    MVP
    LinkedIn
    View Markup
    <!-- components/testimonial-slider/testimonial-slider.twig -->





  
<section class="testimonial-slider" >

  
  <div class="testimonial-slider-container -is-slider">
    <div class="testimonial-slider-slick" data-slider="true">

              <div class="testimonial-slide" >
          <div class="testimonial-slide-inner">
                        <blockquote>
              <p>"I have the confidence to embrace any challenge, from public speaking to leadership, through the opportunities that ASCE has provided me with."</p>
              <cite>Jonathan Brower, P.E., M.ASCE</cite>
              <div class="attribution-title">Member</div>
                              <div class="testimonial-link">
                  <a href="#" class="icon-linkedin"><span class="sr-text">LinkedIn</span></a>
                </div>
                          </blockquote>
          </div>
        </div>
              <div class="testimonial-slide" >
          <div class="testimonial-slide-inner">
                        <blockquote>
              <p>"Please listen to what I have to say."</p>
              <cite>A Person</cite>
              <div class="attribution-title">MVP</div>
                              <div class="testimonial-link">
                  <a href="#" class="icon-linkedin"><span class="sr-text">LinkedIn</span></a>
                </div>
                          </blockquote>
          </div>
        </div>
      
    </div>
  </div>

  
</section>
    Source:components/testimonial-slider/testimonial-slider.scss, line 1

    Text Columns

    AKA – Text Columns with Social Media

    Go to Confluence for details.

    Example
    Column 1 Header
    Column 1 Text – Vestibulum ut dui a diam lobortis mollis vitae ut ex. Aliquam erat volutpat.
    Column 2 Header
    Column 2 Text – Curabitur mauris mauris, porttitor quis mi eget, lobortis facilisis mi.
    Column 3 Header
    Column 3 Text – Vestibulum ut dui a diam lobortis mollis vitae ut ex. Aliquam erat volutpat.
    View Markup
    <!-- components/text-columns/text-columns.twig -->


<section class="text-columns">

  <div class="text-columns-inner">
          <div class="text-columns-social">
        <aside class="social-share">
  
  <div class="social-share-title">Share</div>
  <ul class="social-share-services">
    <li><a data-service="facebook" href="#"><span class="sr-text">Share on Facebook</span></a></li>
    <li><a data-service="twitter" href="#"><span class="sr-text">Share on Twitter</span></a></li>
    <li><a data-service="linkedin" href="#"><span class="sr-text">Share on LinkedIn</span></a></li>
  </ul>
  
</aside>
      </div>
              <div class="text-columns-column">
        <div class="text-column-title">Column 1 Header</div>
        <div class="text-column-text">Column 1 Text – Vestibulum ut dui a diam lobortis mollis vitae ut ex. Aliquam erat volutpat.</div>
      </div>
          <div class="text-columns-column">
        <div class="text-column-title">Column 2 Header</div>
        <div class="text-column-text">Column 2 Text – Curabitur mauris mauris, porttitor quis mi eget, lobortis facilisis mi.</div>
      </div>
          <div class="text-columns-column">
        <div class="text-column-title">Column 3 Header</div>
        <div class="text-column-text">Column 3 Text – Vestibulum ut dui a diam lobortis mollis vitae ut ex. Aliquam erat volutpat.</div>
      </div>
      </div>


</section>
    Source:components/text-columns/text-columns.scss, line 1

    Topics Accordion

    Go to Confluence for details.

    Example

    Accordion Title

    View Markup
    <!-- components/topics-accordion/topics-accordion.twig -->


<section class="topics-accordion">

  <h2 class="topics-accordion-title h3">Accordion Title</h2>

  
  <ul class="topics-accordion-items">
          <li class="topics-accordion-item" data-expanded="false">
        <h3 class="h5">
          <button id="topics-accordion--1" class="topics-accordion-trigger h5" aria-expanded="false" aria-controls="topics-accordion-item--1">Aerospace</button>
        </h3>
        <div id="topics-accordion-item--1" class="topics-accordion-content" role="region" aria-labelledby="topics-accordion--1" aria-hidden="true">

          <div class="topics-accordion-item-container">
            <div class="topics-accordion-item-section -main">
                                  <a href="#"
       class="btn topics-accordion-item-button">
        <span>View all Aerospace</span>
    </a>

                                            <div class="topics-accordion-item-link">
                      <a href="#"
       class="-arrow-link topics-accordion-item-link">
        <span>Go to Aerospace Technical Group?</span>
    </a>


                  <button class="tooltip" [data-animation='scale' ]="]" data-tippy-content="Network and interact with leading minds in your profession">?<span class="sr-text">More Information</span></button>
                </div>
              
            </div>
            <div class="topics-accordion-item-section">
                              <table class="topics-accordion-item-table">
                  <tr>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aerodynamics</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space colonies</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aircraft and spacecraft</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space exploration</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Astronomy</span>
    </a>

                      </td>
                                      </tr>
                </table>
                          </div>
          </div>
        </div>
      </li>
          <li class="topics-accordion-item" data-expanded="false">
        <h3 class="h5">
          <button id="topics-accordion--2" class="topics-accordion-trigger h5" aria-expanded="false" aria-controls="topics-accordion-item--2">Architectural Engineering</button>
        </h3>
        <div id="topics-accordion-item--2" class="topics-accordion-content" role="region" aria-labelledby="topics-accordion--2" aria-hidden="true">

          <div class="topics-accordion-item-container">
            <div class="topics-accordion-item-section -main">
                                  <a href="#"
       class="btn topics-accordion-item-button -lock">
        <span>View all Architectural Engineering</span>
    </a>

                                            <div class="topics-accordion-item-link">
                      <a href="#"
       class="-arrow-link topics-accordion-item-link">
        <span>Go to Architectural Engineering Technical Group?</span>
    </a>


                  <button class="tooltip" [data-animation='scale' ]="]" data-tippy-content="Network and interact with leading minds in your profession">?<span class="sr-text">More Information</span></button>
                </div>
              
            </div>
            <div class="topics-accordion-item-section">
                              <table class="topics-accordion-item-table">
                  <tr>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aerodynamics</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space colonies</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aircraft and spacecraft</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space exploration</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Astronomy</span>
    </a>

                      </td>
                                      </tr>
                </table>
                          </div>
          </div>
        </div>
      </li>
          <li class="topics-accordion-item" data-expanded="false">
        <h3 class="h5">
          <button id="topics-accordion--3" class="topics-accordion-trigger h5" aria-expanded="false" aria-controls="topics-accordion-item--3">Changing Climate</button>
        </h3>
        <div id="topics-accordion-item--3" class="topics-accordion-content" role="region" aria-labelledby="topics-accordion--3" aria-hidden="true">

          <div class="topics-accordion-item-container">
            <div class="topics-accordion-item-section -main">
                                  <a href="#"
       class="btn topics-accordion-item-button -lock">
        <span>View all Changing Climate</span>
    </a>

                                            <div class="topics-accordion-item-link">
                      <a href="#"
       class="-arrow-link topics-accordion-item-link">
        <span>Go to Changing Climate Technical Group?</span>
    </a>


                  <button class="tooltip" [data-animation='scale' ]="]" data-tippy-content="Network and interact with leading minds in your profession">?<span class="sr-text">More Information</span></button>
                </div>
              
            </div>
            <div class="topics-accordion-item-section">
                              <table class="topics-accordion-item-table">
                  <tr>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aerodynamics</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space colonies</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aircraft and spacecraft</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space exploration</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Astronomy</span>
    </a>

                      </td>
                                      </tr>
                </table>
                          </div>
          </div>
        </div>
      </li>
          <li class="topics-accordion-item" data-expanded="false">
        <h3 class="h5">
          <button id="topics-accordion--4" class="topics-accordion-trigger h5" aria-expanded="false" aria-controls="topics-accordion-item--4">Coasts, Oceans, Ports, and Rivers</button>
        </h3>
        <div id="topics-accordion-item--4" class="topics-accordion-content" role="region" aria-labelledby="topics-accordion--4" aria-hidden="true">

          <div class="topics-accordion-item-container">
            <div class="topics-accordion-item-section -main">
                                  <a href="#"
       class="btn topics-accordion-item-button -lock">
        <span>View all Coasts, Oceans, Ports, and Rivers</span>
    </a>

                                            <div class="topics-accordion-item-link">
                      <a href="#"
       class="-arrow-link topics-accordion-item-link">
        <span>Go to Coasts, Oceans, Ports, and Rivers Technical Group?</span>
    </a>


                  <button class="tooltip" [data-animation='scale' ]="]" data-tippy-content="Network and interact with leading minds in your profession">?<span class="sr-text">More Information</span></button>
                </div>
              
            </div>
            <div class="topics-accordion-item-section">
                              <table class="topics-accordion-item-table">
                  <tr>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aerodynamics</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space colonies</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aircraft and spacecraft</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space exploration</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Astronomy</span>
    </a>

                      </td>
                                      </tr>
                </table>
                          </div>
          </div>
        </div>
      </li>
          <li class="topics-accordion-item" data-expanded="false">
        <h3 class="h5">
          <button id="topics-accordion--5" class="topics-accordion-trigger h5" aria-expanded="false" aria-controls="topics-accordion-item--5">Codes and Standards</button>
        </h3>
        <div id="topics-accordion-item--5" class="topics-accordion-content" role="region" aria-labelledby="topics-accordion--5" aria-hidden="true">

          <div class="topics-accordion-item-container">
            <div class="topics-accordion-item-section -main">
                                  <a href="#"
       class="btn topics-accordion-item-button -lock">
        <span>View all Codes and Standards</span>
    </a>

                                            <div class="topics-accordion-item-link">
                      <a href="#"
       class="-arrow-link topics-accordion-item-link">
        <span>Go to Codes and Standards Technical Group?</span>
    </a>


                  <button class="tooltip" [data-animation='scale' ]="]" data-tippy-content="Network and interact with leading minds in your profession">?<span class="sr-text">More Information</span></button>
                </div>
              
            </div>
            <div class="topics-accordion-item-section">
                              <table class="topics-accordion-item-table">
                  <tr>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aerodynamics</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space colonies</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aircraft and spacecraft</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space exploration</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Astronomy</span>
    </a>

                      </td>
                                      </tr>
                </table>
                          </div>
          </div>
        </div>
      </li>
          <li class="topics-accordion-item" data-expanded="false">
        <h3 class="h5">
          <button id="topics-accordion--6" class="topics-accordion-trigger h5" aria-expanded="false" aria-controls="topics-accordion-item--6">Cold Region Engineering</button>
        </h3>
        <div id="topics-accordion-item--6" class="topics-accordion-content" role="region" aria-labelledby="topics-accordion--6" aria-hidden="true">

          <div class="topics-accordion-item-container">
            <div class="topics-accordion-item-section -main">
                                  <a href="#"
       class="btn topics-accordion-item-button -lock">
        <span>View all Cold Region Engineering</span>
    </a>

                                            <div class="topics-accordion-item-link">
                      <a href="#"
       class="-arrow-link topics-accordion-item-link">
        <span>Go to Cold Region Engineering Technical Group?</span>
    </a>


                  <button class="tooltip" [data-animation='scale' ]="]" data-tippy-content="Network and interact with leading minds in your profession">?<span class="sr-text">More Information</span></button>
                </div>
              
            </div>
            <div class="topics-accordion-item-section">
                              <table class="topics-accordion-item-table">
                  <tr>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aerodynamics</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space colonies</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Aircraft and spacecraft</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Space exploration</span>
    </a>

                      </td>
                                          <td class="link">
                            <a href="#"
       class="-arrow-link topics-accordion-item-table-link">
        <span>Astronomy</span>
    </a>

                      </td>
                                      </tr>
                </table>
                          </div>
          </div>
        </div>
      </li>
      </ul>

</section>
    Source:components/topics-accordion/topics-accordion.scss, line 1

    Topics Columns

    AKA – Topic Columns 3 Up

    Go to Confluence for details.

    Example
    Description of feature image
    eyebrow

    Slideshow: China’s Imperial Kiln ruins inspire museum design

    A new museum built using ancient design principles and a mixture of old and new brick highlights Imperial Kiln ruins in Jingdezhen, China.

    Sponsored by Sponsor Name
    Description of article image
    Structure

    Active learning helps diverse groups with STEM subjects

    Recent racial protests have highlighted persistent income and wealth gaps between white Americans and racial minorities. A study finds a way to lessen the effects of this disparity in STEM education.

    Sponsored by The University of Delaware
    Structure

    What Does a Biden/Harris Administration Mean for Infrastructure?

    The weeklong 2020 election marathon ended Saturday, November 7 when former Vice President Joe Biden was elected as the projected 46th president of the United...

    Description of image
    Civil Engineering

    Review: How to persuade and inform

    Description of image
    Structure

    High-energy particle physics lab plans new engineering research center

    Description of image
    Civil Engineering

    Getting the height right: The North American Vertical Datum of 1988

    View Markup
    <!-- components/topics-columns/topics-columns.twig -->


<section class="topics-columns">
  <div class="topics-columns-featured">
    <div class="topics-columns-item">
      <div class="topics-columns-item-img-container">
        <a href="#" class="topics-columns-item-img -featured" style="background-image: url('/images/fpo/topics-columns-feature.jpg')">
          <span class="sr-text">Description of feature image</span>
        </a>
      </div>
      <div class="topics-columns-item-text">
                <div class="eyebrow">eyebrow</div>
        <h2 class="h4">
          <a href="#" class="topics-columns-item-link">Slideshow: China’s Imperial Kiln ruins inspire museum design</a>
        </h2>
        <p>A new museum built using ancient design principles and a mixture of old and new brick highlights Imperial Kiln ruins in Jingdezhen, China.</p>
      </div>
    </div>
  </div>
  <div class="topics-columns-references">
    <div class="topics-columns-references-2">
              <div class="topics-columns-item">
                      <div class="topics-columns-item-sponsored">
              Sponsored by Sponsor Name
            </div>
                                <div class="topics-columns-item-img-container">
              <a href="#" class="topics-columns-item-img">
                <img src="/images/fpo/image-slider-1.jpeg" alt="Description of article image">
              </a>
            </div>
                    <div class="topics-columns-item-text">
            <div class="eyebrow">Structure</div>
            <h3 class="h5">
              <a href="#" class="topics-columns-item-link">Active learning helps diverse groups with STEM subjects</a>
            </h3>
            <p>Recent racial protests have highlighted persistent income and wealth gaps between white Americans and racial minorities. A study finds a way to lessen the effects of this disparity in STEM education.</p>
          </div>
        </div>
              <div class="topics-columns-item">
                      <div class="topics-columns-item-sponsored">
              Sponsored by The University of Delaware
            </div>
                              <div class="topics-columns-item-text">
            <div class="eyebrow">Structure</div>
            <h3 class="h5">
              <a href="#" class="topics-columns-item-link">What Does a Biden/Harris Administration Mean for Infrastructure?</a>
            </h3>
            <p>The weeklong 2020 election marathon ended Saturday, November 7 when former Vice President Joe Biden was elected as the projected 46th president of the United...</p>
          </div>
        </div>
          </div>
    <div class="topics-columns-references-3">
              <div class="topics-columns-item">
                      <div class="topics-columns-item-img-container">
              <a href="#" class="topics-columns-item-img">
                <img src="/images/fpo/topics-columns-3.jpg" alt="Description of image">
              </a>
            </div>
                    <div class="topics-columns-item-text">
            <div class="eyebrow">Civil Engineering</div>
            <h3 class="h5 -gated">
              <a href="#" class="topics-columns-item-link">Review: How to persuade and inform</a>
            </h3>
          </div>
        </div>
              <div class="topics-columns-item">
                      <div class="topics-columns-item-img-container">
              <a href="#" class="topics-columns-item-img">
                <img src="/images/fpo/topics-columns-4.jpg" alt="Description of image">
              </a>
            </div>
                    <div class="topics-columns-item-text">
            <div class="eyebrow">Structure</div>
            <h3 class="h5">
              <a href="#" class="topics-columns-item-link">High-energy particle physics lab plans new engineering research center</a>
            </h3>
          </div>
        </div>
              <div class="topics-columns-item">
                      <div class="topics-columns-item-img-container">
              <a href="#" class="topics-columns-item-img">
                <img src="/images/fpo/topics-columns-5.jpg" alt="Description of image">
              </a>
            </div>
                    <div class="topics-columns-item-text">
            <div class="eyebrow">Civil Engineering</div>
            <h3 class="h5">
              <a href="#" class="topics-columns-item-link">Getting the height right: The North American Vertical Datum of 1988</a>
            </h3>
          </div>
        </div>
          </div>
  </div>
</section>
    Source:components/topics-columns/topics-columns.scss, line 1

    Topics Grid

    Go to Confluence for details.

    Example

    Topics Grid

    Topic 1
    Topic 2
    Topic 3
    Topic 4
    Topic 5
    Topic 6
    Topic 7
    Topic 8
    Topic 9
    A very long long Topic title
    View Markup
    <!-- components/topics-grid/topics-grid.twig -->
<section class="topics-grid">
  <div class="topics-grid-inner">
          <h2 class="topics-grid-title h4 -center">Topics Grid</h2>
        <div class="topics-grid-items">
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-1.jpeg')"></div>
          </div>
          <a href="#" class="topics-grid-item-title h5 js-link-event-link">Topic 1</a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-2.jpeg')"></div>
          </div>
          <a href="#" class="topics-grid-item-title h5 js-link-event-link">Topic 2</a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-3.jpeg')"></div>
          </div>
          <a href="#" class="topics-grid-item-title h5 js-link-event-link">Topic 3</a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-1.jpeg')"></div>
          </div>
          <a href="#" class="topics-grid-item-title h5 js-link-event-link">Topic 4</a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-2.jpeg')"></div>
          </div>
          <a href="#" class="topics-grid-item-title h5 js-link-event-link">Topic 5</a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-3.jpeg')"></div>
          </div>
          <a href="#" class="topics-grid-item-title h5 js-link-event-link">Topic 6</a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-1.jpeg')"></div>
          </div>
          <a href="#" class="topics-grid-item-title h5 js-link-event-link">Topic 7</a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-2.jpeg')"></div>
          </div>
          <a href="#" class="topics-grid-item-title h5 js-link-event-link">Topic 8</a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-3.jpeg')"></div>
          </div>
          <a href="#" class="topics-grid-item-title h5 js-link-event-link">Topic 9</a>
        </div>
              <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('/images/fpo/topics-1.jpeg')"></div>
          </div>
          <a href="#" class="topics-grid-item-title h5 js-link-event-link">A very long long Topic title</a>
        </div>
          </div>
  </div>
</section>
    Source:components/topics-grid/topics-grid.scss, line 1

    Topics News-List

    Go to Confluence for details.

    Example
    Description of image
    eyebrow
    Lorem Ipsum, Dolor Sit Amet Consectetur

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.

    January 1, 2021credits4.5 PDH9 ECU
    Description of image
    eyebrow
    Lorem Ipsum, Dolor Sit Amet Consectetur

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.

    February 1, 2021Virtual Event
    Description of image
    eyebrow
    Lorem Ipsum, Dolor Sit Amet Consectetur

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.

    March 1, 2021COPRIWashington, DCConference
    Description of image
    eyebrow
    Lorem Ipsum, Dolor Sit Amet Consectetur

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.

    April 1, 2021
    ASCE dots
    Descripton of full width promo image

    Promotion Full Width Title

    Promotion text...Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Button Text
    Description of image
    eyebrow
    Lorem Ipsum, Dolor Sit Amet Consectetur

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.

    January 1, 2021credits4.5 PDH9 ECU
    Description of image
    eyebrow
    Lorem Ipsum, Dolor Sit Amet Consectetur

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.

    February 1, 2021Virtual Event
    Description of image
    eyebrow
    Lorem Ipsum, Dolor Sit Amet Consectetur

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.

    March 1, 2021COPRIWashington, DCConference
    Description of image
    eyebrow
    Lorem Ipsum, Dolor Sit Amet Consectetur

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.

    April 1, 2021
    Link Text
    View Markup
    <!-- components/topics-news-list/topics-news-list.twig -->


<div class="topics-news-list">
    <div class="topics-news-list-inner">
        <div class="topics-news-list-items">
                            <div class="topics-news-list-item js-link-event">
                                            <div class="topics-news-list-item-image">
                            <div class="topics-news-list-item-image-wrapper">
                                <img src="/images/fpo/news-list-img.jpeg" alt="Description of image">
                            </div>
                        </div>
                                        <div class="topics-news-list-item-content">
                        <div class="eyebrow topics-news-list-item-eyebrow">eyebrow</div>
                        <a href="#"
                           class="h5 topics-news-list-item-title js-link-event-link">Lorem Ipsum, Dolor Sit Amet Consectetur</a>
                        <p class="topics-news-list-item-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.</p>
                        <div class="topics-news-list-item-metadata">
                                                            <span class="topics-news-list-item-metadata-date -date-icon">January 1, 2021</span>
                                                                                                                                                                            <span class="topics-news-list-item-metadata-credits">
                  <span class="-credits-text">credits</span>
                                        <span class="topics-news-list-item-metadata-credit">4.5 PDH</span>
                                        <span class="topics-news-list-item-metadata-credit">9 ECU</span>
                                  </span>
                                                    </div>
                    </div>
                </div>
                            <div class="topics-news-list-item js-link-event">
                                            <div class="topics-news-list-item-image">
                            <div class="topics-news-list-item-image-wrapper">
                                <img src="/images/fpo/image-slider-1.jpeg" alt="Description of image">
                            </div>
                        </div>
                                        <div class="topics-news-list-item-content">
                        <div class="eyebrow topics-news-list-item-eyebrow">eyebrow</div>
                        <a href="#"
                           class="h5 topics-news-list-item-title js-link-event-link">Lorem Ipsum, Dolor Sit Amet Consectetur</a>
                        <p class="topics-news-list-item-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.</p>
                        <div class="topics-news-list-item-metadata">
                                                            <span class="topics-news-list-item-metadata-date -date-icon">February 1, 2021</span>
                                                                                                                                                <span class="topics-news-list-item-metadata-event-type -gray">Virtual Event</span>
                                                                                </div>
                    </div>
                </div>
                            <div class="topics-news-list-item js-link-event">
                                            <div class="topics-news-list-item-image">
                            <div class="topics-news-list-item-image-wrapper">
                                <img src="/images/fpo/image-slider-2.jpeg" alt="Description of image">
                            </div>
                        </div>
                                        <div class="topics-news-list-item-content">
                        <div class="eyebrow topics-news-list-item-eyebrow">eyebrow</div>
                        <a href="#"
                           class="h5 topics-news-list-item-title js-link-event-link">Lorem Ipsum, Dolor Sit Amet Consectetur</a>
                        <p class="topics-news-list-item-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.</p>
                        <div class="topics-news-list-item-metadata">
                                                            <span class="topics-news-list-item-metadata-date -date-icon">March 1, 2021</span>
                                                                                        <span class="topics-news-list-item-metadata-shield">COPRI</span>
                                                                                        <span class="topics-news-list-item-metadata-location -gray">Washington, DC</span>
                                                                                        <span class="topics-news-list-item-metadata-event-type -gray">Conference</span>
                                                                                </div>
                    </div>
                </div>
                            <div class="topics-news-list-item js-link-event">
                                            <div class="topics-news-list-item-image">
                            <div class="topics-news-list-item-image-wrapper">
                                <img src="/images/fpo/image-slider-3.jpeg" alt="Description of image">
                            </div>
                        </div>
                                        <div class="topics-news-list-item-content">
                        <div class="eyebrow topics-news-list-item-eyebrow">eyebrow</div>
                        <a href="#"
                           class="h5 topics-news-list-item-title js-link-event-link">Lorem Ipsum, Dolor Sit Amet Consectetur</a>
                        <p class="topics-news-list-item-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.</p>
                        <div class="topics-news-list-item-metadata">
                                                            <span class="topics-news-list-item-metadata-date ">April 1, 2021</span>
                                                                                                                                                                    </div>
                    </div>
                </div>
                    </div>
    </div>

            <!-- components/promo-full-width/promo-full-width.twig -->


<section class="promo-full-width">

  <img class="dots" src="../images/white-dots.svg" alt="ASCE dots">

    <div class="promo-full-width-images">
          <img src="/images/fpo/promo-full-width-img1.jpeg" alt="Descripton of full width promo image">
      </div>
  
  <div class="promo-full-width-inner">
    <h2 class="h4 -line-above -white">Promotion Full Width Title</h2>

          <p class="-white">Promotion text...Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    
        <a href="#"
       class="btn -white">
        <span>Button Text</span>
    </a>

  </div>
</section>
    
            <div class="topics-news-list-inner">
            <div class="topics-news-list-items">
                                    <div class="topics-news-list-item js-link-event">
                                                    <div class="topics-news-list-item-image">
                                <div class="topics-news-list-item-image-wrapper">
                                    <img src="/images/fpo/news-list-img.jpeg" alt="Description of image">
                                </div>
                            </div>
                                                <div class="topics-news-list-item-content">
                            <div class="eyebrow topics-news-list-item-eyebrow">eyebrow</div>
                            <a href="#"
                               class="h5 topics-news-list-item-title js-link-event-link">Lorem Ipsum, Dolor Sit Amet Consectetur</a>
                            <p class="topics-news-list-item-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.</p>
                            <div class="topics-news-list-item-metadata">
                                                                    <span class="topics-news-list-item-metadata-date -date-icon">January 1, 2021</span>
                                                                                                                                                                                                    <span class="topics-news-list-item-metadata-credits">
                    <span class="-credits-text">credits</span>
                                            <span class="topics-news-list-item-metadata-credit">4.5 PDH</span>
                                            <span class="topics-news-list-item-metadata-credit">9 ECU</span>
                                      </span>
                                                            </div>
                        </div>
                    </div>
                                    <div class="topics-news-list-item js-link-event">
                                                    <div class="topics-news-list-item-image">
                                <div class="topics-news-list-item-image-wrapper">
                                    <img src="/images/fpo/image-slider-1.jpeg" alt="Description of image">
                                </div>
                            </div>
                                                <div class="topics-news-list-item-content">
                            <div class="eyebrow topics-news-list-item-eyebrow">eyebrow</div>
                            <a href="#"
                               class="h5 topics-news-list-item-title js-link-event-link">Lorem Ipsum, Dolor Sit Amet Consectetur</a>
                            <p class="topics-news-list-item-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.</p>
                            <div class="topics-news-list-item-metadata">
                                                                    <span class="topics-news-list-item-metadata-date -date-icon">February 1, 2021</span>
                                                                                                                                                                    <span class="topics-news-list-item-metadata-event-type -gray">Virtual Event</span>
                                                                                            </div>
                        </div>
                    </div>
                                    <div class="topics-news-list-item js-link-event">
                                                    <div class="topics-news-list-item-image">
                                <div class="topics-news-list-item-image-wrapper">
                                    <img src="/images/fpo/image-slider-2.jpeg" alt="Description of image">
                                </div>
                            </div>
                                                <div class="topics-news-list-item-content">
                            <div class="eyebrow topics-news-list-item-eyebrow">eyebrow</div>
                            <a href="#"
                               class="h5 topics-news-list-item-title js-link-event-link">Lorem Ipsum, Dolor Sit Amet Consectetur</a>
                            <p class="topics-news-list-item-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.</p>
                            <div class="topics-news-list-item-metadata">
                                                                    <span class="topics-news-list-item-metadata-date -date-icon">March 1, 2021</span>
                                                                                                    <span class="topics-news-list-item-metadata-shield">COPRI</span>
                                                                                                    <span class="topics-news-list-item-metadata-location -gray">Washington, DC</span>
                                                                                                    <span class="topics-news-list-item-metadata-event-type -gray">Conference</span>
                                                                                            </div>
                        </div>
                    </div>
                                    <div class="topics-news-list-item js-link-event">
                                                    <div class="topics-news-list-item-image">
                                <div class="topics-news-list-item-image-wrapper">
                                    <img src="/images/fpo/image-slider-3.jpeg" alt="Description of image">
                                </div>
                            </div>
                                                <div class="topics-news-list-item-content">
                            <div class="eyebrow topics-news-list-item-eyebrow">eyebrow</div>
                            <a href="#"
                               class="h5 topics-news-list-item-title js-link-event-link">Lorem Ipsum, Dolor Sit Amet Consectetur</a>
                            <p class="topics-news-list-item-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta aliquam corrupti, nulla fugiat dolor, accusantium impedit quae ad nisi officiis ab temporibus, harum ullam dicta ut architecto? Ipsam, explicabo quas.</p>
                            <div class="topics-news-list-item-metadata">
                                                                    <span class="topics-news-list-item-metadata-date ">April 1, 2021</span>
                                                                                                                                                                                            </div>
                        </div>
                    </div>
                            </div>
        </div>
    
            <div class="topics-news-list-button">
            <div class="topics-news-list-button-inner">
                    <a href="#"
       class="btn ">
        <span>Link Text</span>
    </a>

            </div>
        </div>
    </div>
    Source:components/topics-news-list/topics-news-list.scss, line 1

    Trending News-Topics

    Go to Confluence for details.

    Example

    Trending

    1

    Topic 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

    2

    Topic 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

    3

    Topic 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

    4

    Topic 4

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

    5

    Topic 5

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    View Markup
    <!-- components/trending-news-topics/trending-news-topics.twig -->


<section class="trending-news-topics -bg-left">
  <div class="trending-news-topics-inner">
    <h2 class="trending-news-topics-title h4">Trending</h2>
    <div class="trending-news-topics-container">
              <div class="trending-news-topics-item js-link-event">

            <h1 class="trending-news-topics-number-1 h1">1</h1>
                        <div class="trending-news-topics-image" >
              <img src="/images/fpo/news-topics-1.jpeg" alt="">
            </div>
                        <div class="trending-news-topics-content">
              <p class="trending-news-topics-eyebrow">Topic 1</p>
              <a href="#" class="trending-news-topics-summary js-link-event-link">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</a>
            </div>

        </div>
              <div class="trending-news-topics-item js-link-event">

            <h1 class="trending-news-topics-number-2 h1">2</h1>
                        <div class="trending-news-topics-image" >
              <img src="/images/fpo/news-topics-2.jpeg" alt="">
            </div>
                        <div class="trending-news-topics-content">
              <p class="trending-news-topics-eyebrow">Topic 2</p>
              <a href="#" class="trending-news-topics-summary js-link-event-link">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</a>
            </div>

        </div>
              <div class="trending-news-topics-item js-link-event">

            <h1 class="trending-news-topics-number-3 h1">3</h1>
                        <div class="trending-news-topics-content">
              <p class="trending-news-topics-eyebrow">Topic 3</p>
              <a href="#" class="trending-news-topics-summary js-link-event-link">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</a>
            </div>

        </div>
              <div class="trending-news-topics-item js-link-event">

            <h1 class="trending-news-topics-number-4 h1">4</h1>
                        <div class="trending-news-topics-image" >
              <img src="/images/fpo/news-topics-4.jpeg" alt="">
            </div>
                        <div class="trending-news-topics-content">
              <p class="trending-news-topics-eyebrow">Topic 4</p>
              <a href="#" class="trending-news-topics-summary js-link-event-link">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</a>
            </div>

        </div>
              <div class="trending-news-topics-item js-link-event">

            <h1 class="trending-news-topics-number-5 h1">5</h1>
                        <div class="trending-news-topics-image" >
              <img src="/images/fpo/news-topics-5.jpeg" alt="">
            </div>
                        <div class="trending-news-topics-content">
              <p class="trending-news-topics-eyebrow">Topic 5</p>
              <a href="#" class="trending-news-topics-summary js-link-event-link">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</a>
            </div>

        </div>
          </div>
  </div>
</section>
    Source:components/trending-news-topics/trending-news-topics.scss, line 1

    Video Component

    Go to Confluence for details.

    Example
    ASCE dots

    This is a video component

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.

    This is a button
    View Markup
    
<!-- components/video-component/video-component.twig -->
<article class="video-component">

    <img class="dots" src="../images/white-dots.svg" alt="ASCE dots">
    <div class="video-component-bg-color">
            </div>

    <div class="video-component-inner">

        <div class="video-component-intro">

        <h2 class="h3 -white">This is a video component</h2>

                    <div class="video-component-text wysiwyg-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore aute adipiscing.</p></div>
        
                    <div class="video-component-button">
                <a href="#"
       class="btn -small -white">
        <span>This is a button</span>
    </a>

            </div>
        
        </div>

        <div class="video-component-video">

        <div class="video-container">

                        
            <iframe src="https://players.brightcove.net/1752604059001/VJCJXL3Ye_default/index.html?videoId=4093643993001" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" allow="encrypted-media"></iframe>
            
        </div>

        </div>

    </div>

</article>
    Source:components/video-component/video-component.scss, line 1

    Video with Text

    Go to Confluence for details.

    Example
    Youtube Video

    ASCE Civil Engineering Salary Report

    ASCE's proprietary research maps current and long-term trends related to compensation and benefits in the US civil engineering industry.

    Link text
    This video is sponsored by
    View Markup
    <!-- components/video-with-text/video-with-text.twig -->


<section class="video-with-text" data-video-position="">
  <div class="video-with-text-inner">
    <div class="video-with-text-video">
      <div class="video-container">

                  
          <iframe src="https://www.youtube.com/embed/JjN1FwzbJaY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        
      </div>
    </div>
    <div class="video-with-text-content">
              <div class="eyebrow">Youtube Video</div>
            <h2 class="h4">ASCE Civil Engineering Salary Report</h2>
              <div class="wysiwyg-content">
          <p>ASCE's proprietary research maps current and long-term trends related to compensation and benefits in the US civil engineering industry.</p>
        </div>
                        <a href="#"
       class="-arrow-link  -external">
        <span>Link text</span>
    </a>

          </div>
  </div>

      <!-- components/sponsors/sponsors.twig -->


<div class="sponsors">
  <div class="sponsors-label eyebrow">This video is sponsored by</div>
  <ul class="sponsors-list">
          <li>
        <a href="#" class="sponsors-link" target="_blank">
          <img src="/images/fpo/sponsors-logo-1.svg" class="sponsors-logo" alt="Sponsor 1">
        </a>
      </li>
          <li>
        <a href="#" class="sponsors-link" target="_blank">
          <img src="/images/fpo/sponsors-logo-2.png" class="sponsors-logo" alt="Sponsor 2">
        </a>
      </li>
          <li>
        <a href="#" class="sponsors-link" target="_blank">
          <img src="/images/fpo/sponsors-logo-3.svg" class="sponsors-logo" alt="Sponsor 3">
        </a>
      </li>
      </ul>
</div>
  </section>
    Source:components/video-with-text/video-with-text.scss, line 1

    Wufoo Form

    AKA – WuFoo Embed

    Go to Confluence for details.

    Example
    View Markup
    <div class="wufoo-form-asce-container">
  <iframe src="//forms.asce.org/webform/asce_styleguide/share/iframe-resizer/4.2.10" title="ASCE StyleGuide | ASCE Forms" class="webform-share-iframe" frameborder="0" allow="geolocation; microphone; camera" allowtransparency="true" allowfullscreen="true" style="width:1px;min-width:100%"></iframe>
  <script src="//cdn.jsdelivr.net/gh/davidjbradshaw/[email protected]/js/iframeResizer.min.js"></script>
  <script>iFrameResize({}, '.webform-share-iframe');</script>
</div>
    Source:components/wufoo-form/wufoo-form.scss, line 1

    Zoomable Image

    Go to Confluence for details.

    Example
    IMAGE CENTER ALTIan Hollands
    Optional caption
    View Markup
    
<!-- components/zoomable-image/zoomable-image.twig -->
<a href="https://placehold.co/2500x1666" class="zoomable-image mfp-with-zoom">
  <figure class="wysiwyg-image -center">
    <img src="https://placehold.co/900x600" alt="IMAGE CENTER ALT">
    <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
    <figcaption>Optional caption</figcaption>
  </figure>
</a>
    Source:components/zoomable-image/zoomable-image.scss, line 1

    Site Header

    Go to Confluence for details.

    Example
    Advanced Search
    View Markup
    
<!-- components/site-header/site-header.twig -->
<header class="site-header -logged-in">
    <div class="site-header-inner">

        
        <nav class="site-header-nav" aria-label="Main Site Navigation">
            <div class="site-header-logo">
                <a href="/">
                    <img src="../images/logo.svg" alt="">
                </a>
            </div>
            <div class="site-header-nav-wrapper">
                <ul class="site-header-utility-nav" aria-role="Navigation">
                                    <li class="site-header-utility-nav-item ">
                    <a
                    href="#"
                    target=""
                    class="site-header-utility-nav-link "
                    data-children="true"
                    >
                    <span>ASCE sites</span>
                                        </a>

                                        
                    <ul class="site-header-utility-nav-dropdown">
                        
                                                    <li class="site-header-utility-nav-dropdown-block">
                            
                                                            <div class="site-header-utility-nav-dropdown-block-heading">Related Sites</div>
                            
                            <ul class="site-header-utility-nav-dropdown-items">
                                                                <li class="site-header-utility-nav-dropdown-item">
                                <a
                                href="#"
                                target=""
                                data-active="false"
                                class=""
                                ><span>Civil Engineering</span></a>
                                </li>
                                                                <li class="site-header-utility-nav-dropdown-item">
                                <a
                                href="#"
                                target=""
                                data-active="false"
                                class=""
                                ><span>Civil Magazine</span></a>
                                </li>
                                                                <li class="site-header-utility-nav-dropdown-item">
                                <a
                                href="#"
                                target=""
                                data-active="false"
                                class=""
                                ><span>Civil Source</span></a>
                                </li>
                                                                <li class="site-header-utility-nav-dropdown-item">
                                <a
                                href="#"
                                target=""
                                data-active="false"
                                class="-arrow-link"
                                ><span>Infrastructure</span></a>
                                </li>
                                                            </ul>
                            </li>

                                                            <a href="#"
       class="btn site-header-utility-nav-dropdown-button -external">
        <span>Sites</span>
    </a>

                            
                                                </ul>
                    
                                        </li>
                                    <li class="site-header-utility-nav-item ">
                    <a
                    href="#"
                    target=""
                    class="site-header-utility-nav-link "
                    data-children="true"
                    >
                    <span>Membership</span>
                                        </a>

                                        
                    <ul class="site-header-utility-nav-dropdown">
                        
                                                    <li class="site-header-utility-nav-dropdown-block">
                            
                                                            <div class="site-header-utility-nav-dropdown-block-heading">Membership</div>
                            
                            <ul class="site-header-utility-nav-dropdown-items">
                                                                <li class="site-header-utility-nav-dropdown-item">
                                <a
                                href="#"
                                target=""
                                data-active="false"
                                class=""
                                ><span>Benefits</span></a>
                                </li>
                                                                <li class="site-header-utility-nav-dropdown-item">
                                <a
                                href="#"
                                target=""
                                data-active="false"
                                class=""
                                ><span>Pricing</span></a>
                                </li>
                                                                <li class="site-header-utility-nav-dropdown-item">
                                <a
                                href="#"
                                target=""
                                data-active="false"
                                class=""
                                ><span>Additional Details</span></a>
                                </li>
                                                                <li class="site-header-utility-nav-dropdown-item">
                                <a
                                href="#"
                                target=""
                                data-active="false"
                                class="-arrow-link"
                                ><span>Membership</span></a>
                                </li>
                                                            </ul>
                            </li>

                            
                                                </ul>
                    
                                        </li>
                                    <li class="site-header-utility-nav-item  -login">
                    <a
                    href="#"
                    target=""
                    class="site-header-utility-nav-link  -login"
                    data-children="false"
                    >
                    <span>Login</span>
                                        </a>

                                        </li>
                                    <li class="site-header-utility-nav-item  -join">
                    <a
                    href="#"
                    target=""
                    class="site-header-utility-nav-link "
                    data-children="false"
                    >
                    <span>Join</span>
                                        </a>

                                        </li>
                                </ul>

                <ul class="site-header-main-nav">
                                    <li class="site-header-item">
                    <a
                        href="#"
                        target=""
                        data-active="false"
                        data-children="true"
                    >Publication & News</a>
                                            <ul class="site-header-main-nav-dropdown -publication-and-news -logged-in">

                        <div class="site-header-main-nav-dropdown-column-1">
                                                        <div class="site-header-main-nav-dropdown-block ">

                                                            <div class="site-header-main-nav-dropdown-block-heading">featured</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Source</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Magazine</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Source</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Infrastructure Report Card</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                </div>

                                                <div class="site-header-main-nav-dropdown-column-2">
                                                        <div class="site-header-main-nav-dropdown-block">

                                                            <div class="site-header-main-nav-dropdown-block-heading">by type</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Journals</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>News Releases</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Policies</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Standards & Books</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                </div>
                                                
                                                <div class="site-header-main-nav-dropdown-column-3">
                                                <div class="site-header-main-nav-dropdown-block">

                                                        <div class="site-header-main-nav-dropdown-block-heading">featured news</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                        <li class="site-header-main-nav-dropdown-item">

                                <a
                                href="#"
                                target=""
                                data-active="false"
                                class="-bold-link"
                                ><span>The Not-So-Simple Return to the Civil Engineering Office</span></a>

                                                            </li>
                                                        <li class="site-header-main-nav-dropdown-item">

                                <a
                                href="#"
                                target=""
                                data-active="false"
                                class="-bold-link"
                                ><span>4 Smart City Trends Shaping the Future</span></a>

                                                            </li>
                                                        <li class="site-header-main-nav-dropdown-item">

                                <a
                                href="#"
                                target=""
                                data-active="false"
                                class="-arrow-link"
                                ><span>View all news</span></a>

                                                            </li>
                                                        </ul>
                        </div>
                                                </div>
                         
                        </ul>
                                        </li>
                                    <li class="site-header-item">
                    <a
                        href="#"
                        target=""
                        data-active="false"
                        data-children="true"
                    >Careers & Growth</a>
                                            <ul class="site-header-main-nav-dropdown -careers -logged-in">

                        <div class="site-header-main-nav-dropdown-column-1">
                                                        <div class="site-header-main-nav-dropdown-block ">

                                                            <div class="site-header-main-nav-dropdown-block-heading">jobs</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Journals</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>News Releases</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Policies</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Standards & Books</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                    <div class="site-header-main-nav-dropdown-block ">

                                                            <div class="site-header-main-nav-dropdown-block-heading">Support for</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Source</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Magazine</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Source</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Infrastructure Report Card</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                </div>

                                                <div class="site-header-main-nav-dropdown-column-2">
                                                        <div class="site-header-main-nav-dropdown-block">

                                                            <div class="site-header-main-nav-dropdown-block-heading">By type</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Journals</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>News Releases</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Policies</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Standards & Books</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Journals</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>News Releases</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Policies</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Standards & Books</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                </div>
                                                
                         
                        </ul>
                                        </li>
                                    <li class="site-header-item">
                    <a
                        href="#"
                        target=""
                        data-active="false"
                        data-children="true"
                    >Education & Events</a>
                                            <ul class="site-header-main-nav-dropdown  -logged-in">

                        <div class="site-header-main-nav-dropdown-column-1">
                                                        <div class="site-header-main-nav-dropdown-block ">

                                                            <div class="site-header-main-nav-dropdown-block-heading">jobs</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Journals</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>News Releases</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Policies</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Standards & Books</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                    <div class="site-header-main-nav-dropdown-block ">

                                                            <div class="site-header-main-nav-dropdown-block-heading">Support for</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Source</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Magazine</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Source</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Infrastructure Report Card</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                </div>

                                                <div class="site-header-main-nav-dropdown-column-2">
                                                        <div class="site-header-main-nav-dropdown-block">

                                                            <div class="site-header-main-nav-dropdown-block-heading">By type</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Journals</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>News Releases</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Policies</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Standards & Books</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Journals</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>News Releases</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Policies</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Standards & Books</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                </div>
                                                
                         
                        </ul>
                                        </li>
                                    <li class="site-header-item">
                    <a
                        href="#"
                        target=""
                        data-active="false"
                        data-children="true"
                    >Communities</a>
                                            <ul class="site-header-main-nav-dropdown -communities -logged-in">

                        <div class="site-header-main-nav-dropdown-column-1">
                                                        <div class="site-header-main-nav-dropdown-block -column-1">

                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class="-bold-link"
                                ><span>Find a Group</span></a>

                                                                    <p>Network and interact with leading minds in your profession</p>
                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class="-bold-link"
                                ><span>Civil Engineering Magazine</span></a>

                                                                    <p>Network and interact with leading minds in your profession</p>
                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class="-bold-link"
                                ><span>Civil Engineering Source</span></a>

                                                                    <p>Network and interact with leading minds in your profession</p>
                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class="-bold-link"
                                ><span>Infrastructure Report Card</span></a>

                                                                    <p>Network and interact with leading minds in your profession</p>
                                                                </li>
                                                        </ul>
                            </div>
                                                </div>

                                                <div class="site-header-main-nav-dropdown-column-2">
                                                        <div class="site-header-main-nav-dropdown-block">

                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Student Chapters</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Younger Members</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>International Members</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>International Members</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>International Members</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                </div>
                                                
                         
                        </ul>
                                        </li>
                                    <li class="site-header-item">
                    <a
                        href="#"
                        target=""
                        data-active="false"
                        data-children="true"
                    >Topics</a>
                                            <ul class="site-header-main-nav-dropdown  -logged-in">

                        <div class="site-header-main-nav-dropdown-column-1">
                                                        <div class="site-header-main-nav-dropdown-block ">

                                                            <div class="site-header-main-nav-dropdown-block-heading">jobs</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Journals</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>News Releases</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Policies</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Standards & Books</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                    <div class="site-header-main-nav-dropdown-block ">

                                                            <div class="site-header-main-nav-dropdown-block-heading">Support for</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Source</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Magazine</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Civil Engineering Source</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Infrastructure Report Card</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                </div>

                                                <div class="site-header-main-nav-dropdown-column-2">
                                                        <div class="site-header-main-nav-dropdown-block">

                                                            <div class="site-header-main-nav-dropdown-block-heading">By type</div>
                            
                            <ul class="site-header-main-nav-dropdown-items">
                                                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Journals</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>News Releases</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Policies</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Standards & Books</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Journals</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>News Releases</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Policies</span></a>

                                                                </li>
                                                            <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="#"
                                    target=""
                                    data-active="false"
                                    class=""
                                ><span>Standards & Books</span></a>

                                                                </li>
                                                        </ul>
                            </div>
                                                </div>
                                                
                         
                        </ul>
                                        </li>
                
                <li role="none" class="site-header-main-nav-item">
                    <a href="#" class="site-header-main-nav-search-trigger js-search-open"><span class="sr-text">Search</span></a>
                </li>

                <li role="none" class="site-header-main-nav-item">
                    <a href="#" class="site-header-main-nav-side-nav js-side-nav-trigger"><span class="sr-text">Side Navigation</span></a>
                </li>
                </ul>
            </div>
        </nav>
    </div>

    <div class="site-header-side-nav js-side-nav" data-menu="closed" aria-hidden="true">
        <div class="site-header-side-nav-top">
            
            <button class="site-header-side-nav-close icon-close js-side-nav-close"><span class="sr-text">Close</span></button>

        </div>
        
        <div class="site-header-side-nav-inner">
        
            
            <nav class="site-header-side-nav-nav" aria-label="Side Navigation">
            <div class="site-header-side-nav-links">
                                <div class="site-header-side-nav-link">
                    <a href="#">About ASCE</a>
                </div>
                                <div class="site-header-side-nav-link">
                    <a href="#">Initiatives</a>
                </div>
                                <div class="site-header-side-nav-link">
                    <a href="#">Advocacy</a>
                </div>
                                <div class="site-header-side-nav-link">
                    <a href="#">Diversity & Inclusion</a>
                </div>
                                <div class="site-header-side-nav-link">
                    <a href="#">Historic Landmarks</a>
                </div>
                            </div>

                            <div class="site-header-side-nav-button">
                    <a href="#" class="btn -white">Donate to ASCE</a>
                </div>
                        
                        <nav class="site-header-side-nav-social-links" aria-label="Social Media Links">
                <ul>
                                    <li>
                    <a
                        class="icon-linkedin"
                        href="https://www.linkedin.com"
                        target="_blank"
                        rel="noopener"
                    >
                        <span class="sr-text">LinkedIn</span>
                    </a>
                    </li>
                                    <li>
                    <a
                        class="icon-facebook"
                        href="https://www.facebook.com"
                        target="_blank"
                        rel="noopener"
                    >
                        <span class="sr-text">Facebook</span>
                    </a>
                    </li>
                                    <li>
                    <a
                        class="icon-twitter"
                        href="https://www.twitter.com"
                        target="_blank"
                        rel="noopener"
                    >
                        <span class="sr-text">Twitter</span>
                    </a>
                    </li>
                                    <li>
                    <a
                        class="icon-youtube"
                        href="https://www.youtube.com"
                        target="_blank"
                        rel="noopener"
                    >
                        <span class="sr-text">Youtube</span>
                    </a>
                    </li>
                                    <li>
                    <a
                        class="icon-instagram"
                        href="https://www.instagram.com"
                        target="_blank"
                        rel="noopener"
                    >
                        <span class="sr-text">Instagram</span>
                    </a>
                    </li>
                                </ul>
            </nav>
                        </nav>

        </div>
    </div>

    <div class="site-header-search-container -js-container">
        <div class="site-header-search">

            
            <button class="site-header-search-close icon-close js-site-header-search-close"><span class="sr-text">Close</span></button>

            <div class="site-header-search-inner">
                <label for="site-header-search-input" class="site-header-search-label">Search</label>
                <div class="site-header-search-wrapper">
                    <input id="site-header-search-input" type="text" name="" value="" placeholder="" class="site-header-search-input">
                    <button class="site-header-search-submit">
                    <span class="sr-text">Search</span></button>
                                            <div class="site-header-search-link">
                            <a href="#"
       class="-arrow-link ">
        <span>Advanced Search</span>
    </a>

                        </div>
                    
                </div>
            </div>
        </div>
    </div>
</header>
    Source:components/site-header/site-header.scss, line 1

    Mobile Header

    Example
    Join
    View Markup
    <!-- components/mobile-menu/mobile-menu.twig -->
<div class="mobile-menu" data-level="1" aria-hidden="true">

  <div class="mobile-menu-top">

    
    <button class="mobile-menu-close icon-close js-mobile-menu-close"><span class="sr-text">Close</span></button>

    
    <button class="mobile-menu-back js-mobile-menu-back">Back</button>

  </div>

  <div class="mobile-menu-inner">

    
    <nav class="mobile-menu-nav" aria-label="Side Navigation">

      
      <ul class="mobile-menu-main">

        
        <div class="mobile-menu-main-search">
          <label for="mobile-menu-main-search-input" class="sr-text">Search</label>
          <input id="mobile-menu-main-search-input" type="text" name="" value="" placeholder="Search" class="mobile-menu-main-search-input">
          <button class="mobile-menu-main-search-submit">
            <span class="sr-text">Search</span></button>
        </div>

        
        
        
                
              </ul>

    </nav>
  </div>
</div>
<!-- components/mobile-header/mobile-header.twig -->
<header class="mobile-header ">
    <div class="mobile-header-inner">
        <a href="/">
            <img src="/images/logo-mobile.svg" alt="ASCE logo" class="mobile-header-logo">
        </a>
        <div class="mobile-header-nav" aria-label="Main Site Navigation">
            <a href="#" class="btn -small">Join</a>
            <button type="button" class="mobile-menu-trigger js-mobile-menu-toggle">
                <span class="sr-text">Mobile Menu</span>
            </button>
        </div>
    </div>
</header>
    Source:components/mobile-header/mobile-header.scss, line 1

    Mobile Menu

    Example
    View Markup
    <!-- components/mobile-menu/mobile-menu.twig -->
<div class="mobile-menu" data-level="1" aria-hidden="true">

  <div class="mobile-menu-top">

    
    <button class="mobile-menu-close icon-close js-mobile-menu-close"><span class="sr-text">Close</span></button>

    
    <button class="mobile-menu-back js-mobile-menu-back">Back</button>

  </div>

  <div class="mobile-menu-inner">

    
    <nav class="mobile-menu-nav" aria-label="Side Navigation">

      
      <ul class="mobile-menu-main">

        
        <div class="mobile-menu-main-search">
          <label for="mobile-menu-main-search-input" class="sr-text">Search</label>
          <input id="mobile-menu-main-search-input" type="text" name="" value="" placeholder="Search" class="mobile-menu-main-search-input">
          <button class="mobile-menu-main-search-submit">
            <span class="sr-text">Search</span></button>
        </div>

        
          <li class="mobile-menu-main-nav-link">
            
            <a class="mobile-menu-main-link" href="#" target="_blank">Publications & News</a>

            
            
              
              <a class="mobile-menu-main-next icon-chevron js-mobile-menu-next" href="#">
                <span class="sr-text">View Menu</span>
              </a>

              
              <div class="mobile-menu-main-panel" aria-hidden="true">

                
                <ul>
                                                            <li>
                                                  <div class="mobile-menu-column-heading">Optional heading</div>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">link 1 text</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">link 2 text</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">link 3 text</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">current link text</a>
                        </div>
                                              </li>
                                      
                                                                <li>
                                                  <div class="mobile-menu-column-heading">Optional heading</div>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">bold link 1 text</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">bold link 2 text</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">bold link 3 text</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">current bold link text</a>
                        </div>
                                              </li>
                                      
                                                                <li>
                                                  <div class="mobile-menu-column-heading">Optional heading</div>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">arrow link 1 text</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">arrow link 2 text</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">arrow link 3 text</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">current arrow link text</a>
                        </div>
                                              </li>
                                                      </ul>

              </div>
            
          </li>

        
          <li class="mobile-menu-main-nav-link">
            
            <a class="mobile-menu-main-link" href="#" target="_blank">Careers & Growth</a>

            
            
              
              <a class="mobile-menu-main-next icon-chevron js-mobile-menu-next" href="#">
                <span class="sr-text">View Menu</span>
              </a>

              
              <div class="mobile-menu-main-panel" aria-hidden="true">

                
                <ul>
                                                            <li>
                                                  <div class="mobile-menu-column-heading">Column 1</div>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">link 1 text</a>
                        </div>
                                              </li>
                                      
                                                                <li>
                                                  <div class="mobile-menu-column-heading">Column 2</div>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">bold link 1 text</a>
                        </div>
                                              </li>
                                      
                                    </ul>

              </div>
            
          </li>

        
          <li class="mobile-menu-main-nav-link">
            
            <a class="mobile-menu-main-link" href="#" target="_blank">Education & Events</a>

            
            
              
              <a class="mobile-menu-main-next icon-chevron js-mobile-menu-next" href="#">
                <span class="sr-text">View Menu</span>
              </a>

              
              <div class="mobile-menu-main-panel" aria-hidden="true">

                
                <ul>
                                                            <li>
                                                  <div class="mobile-menu-column-heading">Jobs</div>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Journals</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">New Releases</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Policies</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Books & Standards</a>
                        </div>
                                              </li>
                                          <li>
                                                  <div class="mobile-menu-column-heading">Support For</div>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Civil Engineering Source</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Civil Engineering Magazine</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Civil Engineering Source</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Infrastructure Report Card</a>
                        </div>
                                              </li>
                                      
                                                                <li>
                                                  <div class="mobile-menu-column-heading">By Type</div>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Journals</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">News Releases</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Policies</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Books & Standards</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Journals</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">News Releases</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Policies</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Books & Standards</a>
                        </div>
                                              </li>
                                      
                                    </ul>

              </div>
            
          </li>

        
          <li class="mobile-menu-main-nav-link">
            
            <a class="mobile-menu-main-link" href="#" target="_blank">Communities</a>

            
            
              
              <a class="mobile-menu-main-next icon-chevron js-mobile-menu-next" href="#">
                <span class="sr-text">View Menu</span>
              </a>

              
              <div class="mobile-menu-main-panel" aria-hidden="true">

                
                <ul>
                                                            <li>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Find a Group</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Civil Engineering Magazine</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Civil Engineering Source</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Infrastructure Report Card</a>
                        </div>
                                              </li>
                                      
                                                                <li>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Student Chapters</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Younger Members</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">International Members</a>
                        </div>
                                              </li>
                                      
                                    </ul>

              </div>
            
          </li>

        
          <li class="mobile-menu-main-nav-link">
            
            <a class="mobile-menu-main-link" href="#" target="_blank">Topics</a>

            
            
              
              <a class="mobile-menu-main-next icon-chevron js-mobile-menu-next" href="#">
                <span class="sr-text">View Menu</span>
              </a>

              
              <div class="mobile-menu-main-panel" aria-hidden="true">

                
                <ul>
                                                            <li>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 1</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 2</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 3</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 4</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 5</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 6</a>
                        </div>
                                              </li>
                                      
                                                                <li>
                        
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 7</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 8</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 9</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 10</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 11</a>
                        </div>
                                                <div class="mobile-menu-column-link">
                          <a  href="#" target="">Topic 12</a>
                        </div>
                                              </li>
                                      
                                    </ul>

              </div>
            
          </li>

        
        
        
        <li class="mobile-menu-side-nav-link">
          <a class="mobile-menu-main-link" href="#" target="">About ASCE</a>
        </li>
          
        
        <li class="mobile-menu-side-nav-link">
          <a class="mobile-menu-main-link" href="#" target="">Initiatives</a>
        </li>
          
        
        <li class="mobile-menu-side-nav-link">
          <a class="mobile-menu-main-link" href="#" target="">Advocacy</a>
        </li>
          
        
        <li class="mobile-menu-side-nav-link">
          <a class="mobile-menu-main-link" href="#" target="">Diversity & Inclusion</a>
        </li>
          
        
        <li class="mobile-menu-side-nav-link">
          <a class="mobile-menu-main-link" href="#" target="">Historic Landmarks</a>
        </li>
          
        
                  <div class="mobile-menu-side-nav-button">
            <a href="#" class="btn -white">Donate to ASCE</a>
          </div>
                
                  <nav class="mobile-menu-side-nav-social-links" aria-label="Social Media Links">
            <ul>
                              <li>
                  <a
                    class="icon-linkedin"
                    href="#"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">linkedin</span>
                  </a>
                </li>
                              <li>
                  <a
                    class="icon-facebook"
                    href="#"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">facebook</span>
                  </a>
                </li>
                              <li>
                  <a
                    class="icon-twitter"
                    href="#"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">twitter</span>
                  </a>
                </li>
                              <li>
                  <a
                    class="icon-youtube"
                    href="#"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">youtube</span>
                  </a>
                </li>
                              <li>
                  <a
                    class="icon-instagram"
                    href="#"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">instagram</span>
                  </a>
                </li>
                          </ul>
          </nav>
              </ul>

    </nav>
  </div>
</div>
    Source:components/mobile-menu/mobile-menu.scss, line 1

    Site Footer

    Go to Confluence for details.

    Example
    View Markup
    <footer class="site-footer">
  <div class="site-footer-inner">

    
    <div class="site-footer-top">

      
      <nav class="site-footer-nav" aria-label="Footer Navigation">
        <ul class="site-footer-nav-left">
                      <li><a href="#" target="">Publications & News</a></li>
                      <li><a href="#" target="">Career & Growth</a></li>
                      <li><a href="#" target="">Continuing Education</a></li>
                      <li><a href="#" target="">Events Calendar</a></li>
                      <li><a href="#" target="">Communities</a></li>
                  </ul>
        <ul class="site-footer-nav-right">
                      <li><a href="#" target="">About ASCE</a></li>
                      <li><a href="#" target="">Join or Renew</a></li>
                      <li><a href="#" target="">Advertise or Sponsor</a></li>
                      <li><a href="#" target="">Jobs in Civil Engineering</a></li>
                      <li><a href="#" target="">Jobs at ASCE</a></li>
                                <li>
              <a href="#" class="btn -small -gray site-footer-login">Login</a>
            </li>
                  </ul>
      </nav>

    </div>

    
    <div class="site-footer-bottom">

      
      <a href="/" class="site-footer-logo"><img src="/images/logo-footer.svg" alt="ASCE Logo"></a>

      
      <nav class="site-footer-contact" aria-label="Contact Links">
        <ul>
                      <li>
              <a href="tel:8005482723" class="site-footer-contact-link">(800) 548-ASCE (2723)</a>
            </li>
                      <li>
              <a href="tel:17032956300" class="site-footer-contact-link">+1 (703) 295-6300 (International)</a>
            </li>
                      <li>
              <a href="#" class="site-footer-contact-link">Contact Us</a>
            </li>
                  </ul>
      </nav>

      <nav class="site-footer-social" aria-label="Social Media Links">
        <ul class="social-media-links">
          
                      <li>
              <a class="icon-facebook"
                href="https://www.facebook.com"
                target="_blank"
                rel="noopener">
                <span class="sr-text">Facebook</span>
              </a>
            </li>
                      <li>
              <a class="icon-twitter"
                href="https://www.twitter.com"
                target="_blank"
                rel="noopener">
                <span class="sr-text">Twitter</span>
              </a>
            </li>
                      <li>
              <a class="icon-youtube"
                href="https://www.youtube.com"
                target="_blank"
                rel="noopener">
                <span class="sr-text">YouTube</span>
              </a>
            </li>
                      <li>
              <a class="icon-instagram"
                href="https://www.instagram.com"
                target="_blank"
                rel="noopener">
                <span class="sr-text">Instagram</span>
              </a>
            </li>
                  </ul>

        <ul>
          
                      <li>
              <button class="btn -gray -small site-footer-chat" onclick="Comm100API.open_chat_window(event, 600);">
                <span class="sr-text">site footer chat</span>
                <span>Chat</span>
              </button>
            </li>
          
          
                      <li>
              <a class="icon-whatsapp"
                href="https://www.whatsapp.com"
                target="_blank"
                rel="noopener">
                <span>Chat on WhatsApp</span>
              </a>
            </li>
                  </ul>
      </nav>

      
      <div class="site-footer-copyright">
        <p>&copy; 2026 The American Society of Civil Engineers. All Rights Reserved.</p>
      </div>

      
      <div class="site-footer-links">

        <ul>
                      <li>
              <a href="#">Code of Conduct</a>
            </li>
                      <li>
              <a href="#">Privacy</a>
            </li>
                      <li>
              <a href="#">Terms & Conditions</a>
            </li>
                      <li>
              <a href="#">Do not share my personal data</a>
            </li>
                  </ul>

      </div>
    </div>
  </div>
</footer>
    Source:components/site-footer/site-footer.scss, line 3