<a class="skip-link" href="#main-content">Skip To Main Content</a>
<div class="off-canvas">
<div class="max-bound">
<header class="site-header site-header--ecosystem">
<div class="site-header__top">
<div class="site-header__logo-name-wrap">
<a href="https://www.iastate.edu/" class="site-header__logo">
<img src="https://cdn.theme.iastate.edu/img/iastate22/iowa-state-university-logo-no-tagline-red.svg" alt="Iowa State University" loading="lazy" width="224" height="17">
</a>
<a class="site-header__parent-unit-name" href="https://www.iastate.edu/">Parent Unit Name Lorem Ipsum</a> </div>
<div class="site-header__website-title"><a href="#">Website Title Lorem Ipsum Even Longer Lorem Ipsum</a></div>
<div class="site-header__utility-search-wrap">
<nav class="site-header__utility" aria-label="Utility">
<ul>
<li>
<a href="https://www.iastate.edu/">Util 1</a>
</li>
<li>
<a href="https://www.iastate.edu/">Util 2</a>
</li>
<li>
<a href="https://www.iastate.edu/">Util 3</a>
</li>
<li>
<a href="https://www.iastate.edu/">Util 4</a>
</li>
<li>
<a href="https://www.iastate.edu/">Util 5</a>
</li>
<li>
<a href="https://www.iastate.edu/">Sign Ons and Tools</a>
</li>
</ul>
</nav>
<div class="site-header__search">
<a href="#site-search" class="site-header__search-toggle">
<span class="visible-for-screen-readers">Search</span>
<span class="fak fa-iastate22-magnifying-glass" aria-hidden="true"></span>
</a>
<a href="#" class="site-header__search-close">
<span class="visible-for-screen-readers">Close Search</span>
<span class="fa-light fa-xmark"></span>
</a>
<form class="site-header__search-form-desktop">
<label class="visible-for-screen-readers" for="searchDesktop">Search</label>
<input type="search" id="searchDesktop" name="search" placeholder="Search">
<button type="submit"><span class="fak fa-iastate22-magnifying-glass" aria-hidden="true"></span><span class="visible-for-screen-readers">Submit Search</span></button>
</form>
</div>
<a class="site-header__utility-button" href="https://www.iastate.edu/">Button<span></span></a> </div>
</div>
<div class="site-header__main">
<a href="#site-header-mega-menu" class="site-header__mega-menu-open" role="button" aria-controls="site-header-mega-menu">
<span class="visible-for-screen-readers">Toggle Menu</span>
<span class="site-header__mega-menu-open-line-wrap">
<span></span>
<span></span>
<span></span>
</span>
</a>
<div class="site-header__mega-menu" id="site-header-mega-menu">
<div class="site-header__mega-menu-inner">
<div class="site-header__mega-menu-scroller">
<noscript>
<a href="#" role="button" class="nojs-close-menu">Close Main Menu</a>
</noscript>
<div>
<div class="site-header__mega-menu-main">
<div class="site-header__mega-menu-max-bound">
<div class="site-header__website-title"><a href="#">Website Title Lorem Ipsum Even Longer Lorem Ipsum</a></div>
<nav class="site-header__mega-menu-main-nav" aria-label="Main">
<ul>
<li>
<a href="https://www.iastate.edu/">Primary Nav 1</a>
<ul class="two-column-dropdown">
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Minim adipiscing, eu est adipiscing elit do minim.<span class="arrow"></span></a>
</li>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Tempor nulla velit lorem, ullamco quis qui non. Lorem ullamco quis, qui non eiusmod ullamco anim. Qui non eiusmod ullamco<span class="arrow"></span></a>
</li>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
</ul>
</li>
<li>
<a href="https://www.iastate.edu/">Primary Nav 2</a>
<ul>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
</ul>
</li>
<li>
<a href="https://www.iastate.edu/">Primary Nav 3</a>
<ul>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
</ul>
</li>
<li>
<a href="https://www.iastate.edu/">Primary Nav 4</a>
<ul>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
</ul>
</li>
<li>
<a href="https://www.iastate.edu/">Primary Nav 5</a>
<ul>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
</ul>
</li>
<li>
<a href="https://www.iastate.edu/">Primary Nav 6</a>
<ul>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
</ul>
</li>
<li>
<a href="https://www.iastate.edu/">Primary Nav 7</a>
<ul>
<li>
<a class="link-tertiary" href="https://www.iastate.edu/">Principles of Community<span class="arrow"></span></a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="site-header__mega-menu-secondary">
<div class="site-header__mega-menu-max-bound">
<nav class="site-header__mega-menu-utility" aria-label="Utility">
<ul>
<li>
<a href="https://www.iastate.edu/">Util 1</a>
</li>
<li>
<a href="https://www.iastate.edu/">Util 2</a>
</li>
<li>
<a href="https://www.iastate.edu/">Util 3</a>
</li>
<li>
<a href="https://www.iastate.edu/">Util 4</a>
</li>
<li>
<a href="https://www.iastate.edu/">Util 5</a>
</li>
<li>
<a href="https://www.iastate.edu/">Sign Ons and Tools</a>
</li>
</ul>
<a class="site-header__utility-button" href="https://www.iastate.edu/">Button<span></span></a>
<form class="site-header__search-form-mobile">
<label class="visible-for-screen-readers" for="searchMobile">Search</label>
<input type="search" id="searchMobile" name="search" placeholder="Search">
<button type="submit"><span class="fak fa-iastate22-magnifying-glass" aria-hidden="true"></span><span class="visible-for-screen-readers">Submit Search</span></button>
</form>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<main id="main-content">
<div class="outer-pad">
<div class="hero">
<div class="hero__text-wrap">
<nav class="iastate22-breadcrumb" aria-label="Breadcrumb">
<ol class="iastate22-breadcrumb__list">
<li>
<a href="https://www.iastate.edu/">Home</a>
</li>
<li>
<a href="https://www.iastate.edu/">Parent Page</a>
</li>
<li>
<a href="https://www.iastate.edu/" aria-current="page">Kitchen Sink</a>
</li>
</ol>
</nav>
<h1 class="hero__title">Kitchen Sink</h1>
</div>
<div class="hero__media">
<img src="../../img/Heroes-Kitchen_Sink.jpg" alt="" loading="lazy" width="1770" height="662">
</div>
<div class="hero__subnav-wrap">
<nav class="subnav" aria-label="Sidebar">
<noscript>
<button class="subnav__toggle" id="subnav-toggle" aria-controls="subnav-list" aria-haspopup="true" aria-expanded="false"><span>Explore This Section</span></button>
</noscript>
<div class="subnav__list" id="subnav-list">
<ul>
<li>
<a href="https://www.iastate.edu/">Parent Page</a>
</li>
<li>
<a href="https://www.iastate.edu/">Sibling Page Title Lorem Ipsum</a>
</li>
<li>
<a href="https://www.iastate.edu/">Sibling Page Title Lorem Ipsum</a>
</li>
<li>
<a href="https://www.iastate.edu/">Sibling Page Title Lorem Ipsum</a>
</li>
<li>
<a href="https://www.iastate.edu/" aria-current="page">Kitchen Sink</a>
<ul>
<li>
<a href="https://www.iastate.edu/">Child Page Title Lorem</a>
</li>
<li>
<a href="https://www.iastate.edu/">Child Page Title Lorem</a>
</li>
</ul>
</li>
<li>
<a href="https://www.iastate.edu/">Sibling Page Title Lorem Ipsum</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="text-content">
<h2>Heading 2 - This is a title of major section of a page</h2>
<p>Body copy….This should be used for any basic text, especially when writing in sentences. 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>
<a href="#test">Test anchor</a>
<h2>Heading 2 - This is a title of the next major section</h2>
<h3>Heading 3 - This is the title of a subsection of a page</h3>
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h3>Heading 3 - This is the title of a subsection of a page</h3>
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
<h3>Heading 3 - This is the title of a subsection of a page</h3>
<h4>Heading 4 Example</h4>
<h5>Heading 5 Example</h5>
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
<ul>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
<ul>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae.</li>
</ul>
</li>
</ul>
<ol>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</li>
</ol>
<p>Lorem ipsum dolor sit amet.
<a href="#">Inline Text Link</a> 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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut</p>
</div>
<div class="paragraph-widget paragraph-widget--button-set">
<div class="iastate22-button-set">
<ul>
<li>
<a class="iastate22-button" href="https://iastate.edu">Primary CTA Style<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
<div class="paragraph-widget paragraph-widget--link-set">
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Secondary Link Style<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-external">External Link Style<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link link-tertiary">Tertiary Link Style<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Heading 2 - This is a title of the next major section</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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
</div>
</div>
<div class="paragraph-widget paragraph-widget--multicolumn-content">
<div class="multi-column-content">
<div class="multi-column-content__column">
<div class="text-content">
<h3>3-Column Heading Lorem</h3>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
</div>
<div class="multi-column-content__column">
<div class="text-content">
<h3>3-Column Heading Lorem</h3>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
</div>
<div class="multi-column-content__column">
<div class="text-content">
<h3>3-Column Heading Lorem</h3>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--multicolumn-content">
<div class="multi-column-content multi-column-content-two-col">
<div class="multi-column-content__column">
<div class="text-content">
<h3>2-Column Heading Lorem</h3>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
</div>
<div class="multi-column-content__column">
<div class="text-content">
<h3>2-Column Heading Lorem</h3>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
</div>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--multicolumn-content">
<div class="multi-column-content multi-column-content-two-col">
<div class="multi-column-content__column">
<div class="text-content">
<h3>2-Column With Image</h3><img src="../../img/Component-Feature-Image-Small.jpg" width="445" height="297" alt="">
</div>
</div>
<div class="multi-column-content__column">
<div class="text-content">
<h3>2-Column With Image</h3><img src="../../img/Component-Feature-Image-Small.jpg" width="445" height="297" alt="">
</div>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Heading 2 - How Images Can Be Used</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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.</p>
<figure class="align-right">
<div class="media media--type-image media--view-mode-default">
<img src="../../img/IMG_Inline_Right_FPO.jpg" width="324" height="324" alt="">
</div>
<figcaption>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</figcaption>
</figure>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<figure class="align-left">
<div class="media media--type-image media--view-mode-default">
<img src="../../img/IMG_Inline_Left_FPO.jpg" width="324" height="324" alt="">
</div>
<figcaption>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</figcaption>
</figure>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<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>
<figure class="align-center">
<div class="media media--type-image media--view-mode-default">
<img src="../../img/IMG-Inline_Center_FPO.jpg" width="736" height="451" alt="">
</div>
<figcaption>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</figcaption>
</figure>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 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. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h1 style="margin:0; padding:0;" id="test">Test</h1>
<h2>Carousel</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--carousel">
<div class="iastate22-carousel-holder">
<div class="iastate22-carousel">
<div class="carousel__slide">
<div class="carousel__slide-image" style="background-image:url(../../img/carousel-slide_fpo.jpg)"></div>
<div class="carousel__slide-content">
<p class="carousel__slide-content-caption">Image caption 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
consequat.</p>
<h3 class="carousel__slide-content-title">Image Slide Short Descriptive Title Lorem</h3>
<p class="carousel__slide-content-body">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
</div>
</div>
<div class="carousel__slide">
<div class="video-embed">
<div class="video-embed__media-wrap">
<img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" width="1200" height="673" />
<div class="video-embed__video" aria-label="YouTube Video: " data-vid="LjOmcZkXVcU"></div>
</div>
</div>
<div class="carousel__slide-content">
<p class="carousel__slide-content-caption">Image caption 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
consequat.</p>
<h3 class="carousel__slide-content-title">YouTube Video Example</h3>
<p class="carousel__slide-content-body">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
</div>
</div>
<div class="carousel__slide">
<div class="video-embed">
<div class="video-embed__media-wrap">
<img src="https://vumbnail.com/74317943.jpg" alt="Video Poster">
<div data-vimeo-id="74317943" class="video--vim"></div>
</div>
</div>
<div class="carousel__slide-content">
<p class="carousel__slide-content-caption">Image caption 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
consequat.</p>
<h3 class="carousel__slide-content-title">Vimeo Video Example</h3>
<p class="carousel__slide-content-body">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
</div>
</div>
</div>
<div class="carousel__nav">
<div class="carousel__nav-sizer"></div>
<button class="carousel__nav-previous" aria-label="Previous slide">
<span class="visible-for-screen-readers">Previous slide</span>
</button>
<button class="carousel__nav-next" aria-label="Next slide">
<span class="visible-for-screen-readers">Next slide</span>
</button>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--filter-form">
<div class="filter-form">
<h2 class="filter-form__label">Lorem Ipsum Label - 1 Input, 2 Select items</h2>
<form class="iastate22-form iastate22-form--inline" id="InlineForm" action="#" method="post">
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<button type="submit">Submit<span class="arrow"></span>
</button>
</div>
</form>
</div>
</div>
<div class="paragraph-widget paragraph-widget--filter-form">
<div class="filter-form">
<h2 class="filter-form__label">Lorem Ipsum Label - 1 Input, 6 Select items</h2>
<form class="iastate22-form iastate22-form--inline" id="InlineForm" action="#" method="post">
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<button type="submit">Submit<span class="arrow"></span>
</button>
</div>
</form>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Full Width Image</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--full-width-image">
<figure class="full-width-image">
<div class="full-width-image__image">
<img src="../../img/Component-Centered-Image-Full-Width.jpg" alt="" loading="lazy" width="1470" height="549">
</div>
<figcaption class="full-width-image__caption text-content">Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</figcaption>
</figure>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Grid List</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--grid-list">
<div class="grid-list">
<h2 class="grid-list__label">Optional Label</h2>
<h3 class="grid-list__sublabel">Lorem ipsum eiusmod proident duis dolore proident officia adipiscing sunt proident tempor enim aliquip commodo eiusmod enim ex quis dolor</h3>
<ul>
<li>
<a href="https://iastate.edu" class="grid-list__item">
<div class="grid-list__image">
<i class="fa-solid fa-graduation-cap"></i>
</div>
<span class="grid-list__text">Font Awesome Example
</span>
</a>
</li>
<li>
<a href="https://iastate.edu" class="grid-list__item">
<div class="grid-list__image">
<i class="fak fa-iastate22-email"></i>
</div>
<span class="grid-list__text">Font Awesome Example Two
</span>
</a>
</li>
<li>
<a href="https://iastate.edu" class="grid-list__item">
<div class="grid-list__image">
<img src="https://placehold.co/500x400" alt="" loading="lazy" width="130" height="130">
</div>
</a>
</li>
<li>
<a href="https://iastate.edu" class="grid-list__item">
<span class="grid-list__text grid-list--no-text">Lorem ipsum eiusmod proident duis dolore
</span>
</a>
</li>
<li>
<a href="https://iastate.edu" class="grid-list__item">
<div class="grid-list__image">
<img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-undergraduate.svg" alt="" loading="lazy" width="130" height="130">
</div>
<span class="grid-list__text">Undergraduate Student
</span>
</a>
</li>
<li>
<div class="grid-list__item">
<div class="grid-list__image">
<img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-undergraduate.svg" alt="" loading="lazy" width="130" height="130">
</div>
<span class="grid-list__text">Non-Link Example
</span>
</div>
</li>
<li>
<a href="https://iastate.edu" class="grid-list__item">
<div class="grid-list__image">
<img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-graduate.svg" alt="" loading="lazy" width="130" height="130">
</div>
<span class="grid-list__text">Graduate Student
</span>
</a>
</li>
<li>
<a href="https://iastate.edu" class="grid-list__item">
<div class="grid-list__image">
<img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-transfer.svg" alt="" loading="lazy" width="130" height="130">
</div>
<span class="grid-list__text">Transfer Student
</span>
</a>
</li>
<li>
<a href="https://iastate.edu" class="grid-list__item">
<div class="grid-list__image">
<img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-non-degree.svg" alt="" loading="lazy" width="130" height="130">
</div>
<span class="grid-list__text">Non-Degree Student
</span>
</a>
</li>
<li>
<a href="https://iastate.edu" class="grid-list__item">
<div class="grid-list__image">
<img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-military-non-traditional.svg" alt="" loading="lazy" width="130" height="130">
</div>
<span class="grid-list__text">Military or Nontraditional Student
</span>
</a>
</li>
<li>
<a href="https://iastate.edu" class="grid-list__item">
<div class="grid-list__image">
<img src="https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-international.svg" alt="" loading="lazy" width="130" height="130">
</div>
<span class="grid-list__text">International Student
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Tables</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--table">
<div class="iastate22-table" role="region" aria-labelledby="caption1" tabindex="0">
<table>
<caption id="caption1">Table Caption Example</caption>
<thead>
<tr>
<th>Long Header Lorem Ipsum Dolor Sit Amet</th>
<th>Short Header</th>
<th>Medium Header Lorem Ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donec pede justo, fringilla vel, aliquet nec, vulputate</td>
<td>Donec pede justo, fringilla vel, aliquet nec, vulputate</td>
<td>Donec pede justo, fringilla vel, aliquet nec, vulputate</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
</tr>
<tr>
<td>Aenean massa nulla.</td>
<td>Nulla consequat massa quis enim.</td>
<td>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</td>
</tr>
<tr>
<td>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</td>
<td>Aenean commodo ligula eget dolor.</td>
<td>Nulla consequat massa quis enim.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Accordions</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--accordion">
<div class="accordion accordion-flush accordion--first-open" id="accordionFlush0">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading0-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse0-1" aria-expanded="false" aria-controls="flush-collapse0-1">
Accordion Short Title
</button>
</h2>
<div id="flush-collapse0-1" class="accordion-collapse collapse" aria-labelledby="flush-heading0-1" data-bs-parent="#accordionFlush0">
<div class="accordion-body text-content">
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
<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>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading0-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse0-2" aria-expanded="false" aria-controls="flush-collapse0-2">
Engineered Medicine
</button>
</h2>
<div id="flush-collapse0-2" class="accordion-collapse collapse" aria-labelledby="flush-heading0-2" data-bs-parent="#accordionFlush0">
<div class="accordion-body text-content">
<h3>Leading to improved health and enhanced quality of life</h3>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
<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>
<h3>Focus Areas</h3>
<ul>
<li><a href="#">Biomaterials for nanomedicine and tissue/cellular engineering</a></li>
<li><a href="#">Biosensors, biochips, and theranostics</a></li>
<li><a href="#">Bioinformatics and computational medicine</a></li>
<li><a href="#">Human factors and rehabilitation engineering</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading0-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse0-3" aria-expanded="false" aria-controls="flush-collapse0-3">
Accordion with a Long Title and Table Example
</button>
</h2>
<div id="flush-collapse0-3" class="accordion-collapse collapse" aria-labelledby="flush-heading0-3" data-bs-parent="#accordionFlush0">
<div class="accordion-body text-content">
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
<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 class="iastate22-table" tabindex="0" role="region">
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>International Merit Scholarship (Spring and Fall)</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Award of Achievement</td>
<td>Up to $40,000 ($5,000/yr–$10,000/yr)</td>
</tr>
<tr>
<td>Award of Distinction</td>
<td>
<p>Up to $16,000 ($2,000/yr–$4,000/yr)</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading0-4">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse0-4" aria-expanded="false" aria-controls="flush-collapse0-4">
Accordion Short Title
</button>
</h2>
<div id="flush-collapse0-4" class="accordion-collapse collapse" aria-labelledby="flush-heading0-4" data-bs-parent="#accordionFlush0">
<div class="accordion-body text-content">
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
<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>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading0-5">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse0-5" aria-expanded="false" aria-controls="flush-collapse0-5">
Accordion Short Title
</button>
</h2>
<div id="flush-collapse0-5" class="accordion-collapse collapse" aria-labelledby="flush-heading0-5" data-bs-parent="#accordionFlush0">
<div class="accordion-body text-content">
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
<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>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Inline Statistic</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--statistic-with-text">
<div class="statistic-with-text">
<div class="statistic">
<h2 class="statistics__label">Class of 2025 Profile</h2>
<ul>
<li>
<h3 class="statistic__title">X,XXX</h3>
<div class="statistic__text">Enrolled Students</div>
</li>
<li>
<h3 class="statistic__title">XX%</h3>
<div class="statistic__text">Out of State or International Students</div>
</li>
<li>
<h3 class="statistic__title">1 in 4</h3>
<div class="statistic__text">Students are Black, Asian, Hispanic or Multiracial</div>
</li>
</ul>
</div>
<div class="statistic-with-text__text text-content">
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<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.</p>
<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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--callout-with-image">
<div class="callout-with-image">
<div class="callout-with-image__media">
<img src="../../img/Component-Feature-Image-Small.jpg" alt="" width="622" height="414" loading="lazy">
</div>
<div class="callout-with-image__content text-content">
<h2>Heading 2 - This is a title of major section of a page</h2>
<div>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem
ipsem.</div>
<a href="#" class="iastate22-button">Primary CTA Style<span class="arrow"></span></a>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Secondary Link Style<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-external">External Link Style<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link link-tertiary">Tertiary Link Style<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Feature with H3 and 1 Small Image</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--callout-set">
<div class="callout-set">
<ul>
<li>
<div class="iastate22-callout">
<div class="iastate22-callout__media">
<img src="../../img/Component-Featured-Image-Small_FPO.jpg" alt="" width="622" height="414" loading="lazy">
</div>
<div class="iastate22-callout__content text-content">
<h3>Feature Title Lorem Ipsum Dolor</h3>
<div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</div>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Secondary Link Example<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link link-tertiary">Tertiary Link Example<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link">Inline Link Example</a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link">Inline Link Example</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Feature with H3 and No Image</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--callout-set">
<div class="callout-set">
<ul>
<li>
<div class="iastate22-callout">
<div class="iastate22-callout__media">
<img src="../../img/Component-Featured-Image-Small_FPO.jpg" alt="" width="622" height="414" loading="lazy">
</div>
<div class="iastate22-callout__content text-content">
<h3>Feature Title Lorem Ipsum Dolor</h3>
<div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</div>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Lorem Ipsum Dolor<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Feature with H3 and 2 Small Images</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--callout-set">
<div class="callout-set">
<ul>
<li>
<div class="iastate22-callout">
<div class="iastate22-callout__media">
<img src="../../img/Component-Featured-Image-Small_FPO.jpg" alt="" width="622" height="414" loading="lazy">
</div>
<div class="iastate22-callout__content text-content">
<h3>Feature Title Lorem Ipsum Dolor</h3>
<div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</div>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Lorem Ipsum Dolor<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="iastate22-callout">
<div class="iastate22-callout__media">
<img src="../../img/Component-Featured-Image-Small-2_FPO.jpg" alt="" width="622" height="414" loading="lazy">
</div>
<div class="iastate22-callout__content text-content">
<h3>Feature Title Lorem Ipsum Dolor</h3>
<div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</div>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Lorem Ipsum Dolor<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Feature with H3 and 3 Small Images</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--callout-set">
<div class="callout-set">
<ul>
<li>
<div class="iastate22-callout">
<div class="iastate22-callout__media">
<img src="../../img/Component-Featured-Image-Small_FPO.jpg" alt="" width="622" height="414" loading="lazy">
</div>
<div class="iastate22-callout__content text-content">
<h3>Feature Title Lorem Ipsum Dolor</h3>
<div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</div>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Lorem Ipsum Dolor<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="iastate22-callout">
<div class="iastate22-callout__media">
<img src="../../img/Component-Featured-Image-Small-2_FPO.jpg" alt="" width="622" height="414" loading="lazy">
</div>
<div class="iastate22-callout__content text-content">
<h3>Feature Title Lorem Ipsum Dolor</h3>
<div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</div>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Lorem Ipsum Dolor<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="iastate22-callout">
<div class="iastate22-callout__media">
<img src="../../img/Component-Featured-Image-Small_FPO.jpg" alt="" width="622" height="414" loading="lazy">
</div>
<div class="iastate22-callout__content text-content">
<h3>Feature Title Lorem Ipsum Dolor</h3>
<div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</div>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Lorem Ipsum Dolor<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="paragraph-widget paragraph-widget--image-grid-with-text">
<div class="image-grid-with-text">
<div class="image-grid-with-text__content text-content">
<h2>Image Grid with H2 Title and CTA</h2>
<div>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
</div>
<div class="iastate22-button-set">
<ul>
<li>
<a class="iastate22-button" href="https://iastate.edu">Primary CTA Styles<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
<div class="image-grid">
<div class="image-grid__image">
<img src="../../img/IMG-Campus-Location-Large-Image.jpg" alt="" width="627" height="418" loading="lazy">
</div>
<div class="image-grid__image">
<img src="../../img/IMG-Campus-Location-Large-Image.jpg" alt="" width="303" height="202" loading="lazy">
</div>
<div class="image-grid__image">
<img src="../../img/IMG-Campus-Location-Large-Image.jpg" alt="" width="303" height="202" loading="lazy">
</div>
<div class="image-grid__caption">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Video</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--video-embed">
<div class="video-embed">
<div class="video-embed__media-wrap">
<img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" />
<div class="video-embed__video" aria-label="YouTube Video: Your future starts now." data-vid="LjOmcZkXVcU"></div>
</div>
<div class="video-embed__caption">Video caption 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.</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--link-block">
<div class="link-block">
<h2>Optional Subheading Lorem Ipsum Dolor</h2>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Label Lorem Ipsum Dolor Sit<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Label Lorem Ipsum Dolor<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Label Lorem<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Name Lorem Ipsum<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Label Lorem Dolor<span class="arrow"></span></a>
</li>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-secondary">Link Label Lorem Ipsum Dolor<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--external-news-story">
<div class="external-news-story">
<h2>Optional Subheading External News/Story Feature</h2>
<div class="external-news-story__flex-wrap">
<div class="external-news-story__media">
<img src="../../img/Component-Feature-News-Story-Image.jpg" alt="" loading="lazy" width="608" height="404">
</div>
<div class="external-news-story__content text-content">
<h3>Headline Nemo enim irure dolor in reprehenderit in voluptate velit esse cillum dolore.</h3>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="link-set">
<ul>
<li>
<a href="https://iastate.edu" class="link-set__link iastate22-link-external">External Link Style<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--blockquote">
<div class="iastate22-blockquote iastate22-blockquote--with-image">
<div class="iastate22-blockquote__inner-wrap">
<div class="iastate22-blockquote__portrait">
<img src="../../img/featured-quote.jpg" alt="" loading="lazy" width="258" height="258">
</div>
<div class="iastate22-blockquote__text-wrap">
<h2 class="iastate22-blockquote__quote">Being involved with Multicultural Student Affairs programs has helped me a lot and I have met people who inspire me to pursue higher education.</h2>
<p class="iastate22-blockquote__author">Ser Paw , International Studies Major
</p>
</div>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--blockquote">
<div class="iastate22-blockquote iastate22-blockquote--with-no-image iastate22-blockquote--no-author">
<div class="iastate22-blockquote__inner-wrap">
<div class="iastate22-blockquote__text-wrap">
<h2 class="iastate22-blockquote__quote">Being involved with Multicultural Student Affairs programs has helped me a lot and I have met people who inspire me to pursue higher education.</h2>
</div>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>3 Cards—with Images and Links</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--card-set">
<div class="card-set">
<ul>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-2.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-3.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>6 Cards—with Images and Links</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--card-set">
<div class="card-set">
<ul>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-2.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-3.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-2.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-3.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>3 Cards—with Images</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--card-set">
<div class="card-set">
<ul>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-2.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-3.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>3 Cards—no Images and Links</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--card-set">
<div class="card-set">
<ul>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
<li>
<div class="iastate22-card">
<div class="iastate22-card__media">
<img src="../../img/Component-Card-Image-1.jpg" alt="" loading="lazy" width="600" height="600">
</div>
<div class="iastate22-card__content">
<h2 class="iastate22-card__title">
<a href="https://www.iastate.edu/" target="_blank">Card Title Lorem Ipsum Dolor Sit Amet</a>
</h2>
<div class="iastate22-card__body text-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</div>
<a href="https://www.iastate.edu/" class="iastate22-card__cta" target="_blank">Optional Link Text Lorem</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="paragraph-widget paragraph-widget--feature-with-large-image">
<div class="feature-with-large-image">
<div class="feature-with-large-image__media">
<img src="../../img/feature_with_large_image.jpg" alt="" loading="lazy" width="1176" height="662">
</div>
<div class="feature-with-large-image__content">
<h2>Feature with H2 and Large Image</h2>
<div class="feature-with-large-image__text text-content">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>
</div>
<div class="iastate22-button-set">
<ul>
<li>
<a class="iastate22-button" href="https://iastate.edu">Primary CTA Style<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--callout-inset">
<div class="callout-inset">
<div class="callout-inset_inset">
<h2 class="callout-inset_inset-headline">Inset Call Out with H2</h2>
<div class="text-content">
<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>
<div class="feature-with-large-image">
<div class="feature-with-large-image__media">
<img src="../../img/Feature-Image-Inset-Large_FPO.jpg" alt="" loading="lazy" width="1176" height="662">
</div>
<div class="feature-with-large-image__content">
<h2>Inset Feature with H2 and Large Image</h2>
<div class="feature-with-large-image__text text-content">
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>
</div>
<div class="iastate22-button-set">
<ul>
<li>
<a class="iastate22-button" href="https://iastate.edu">Primary CTA Style<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--call-to-action--small">
<div class="call-to-action call-to-action--small">
<div class="call-to-action__copy-wrap">
<h2 class="call-to-action__headline">Small Call to Action Voluptate Lorem Ipsum Dolor</h2>
<div>
<p>Nemo enim ipsam voluptatem quia voluptas.</p>
</div>
</div>
<div class="iastate22-button-set">
<ul>
<li>
<a class="iastate22-button" href="https://iastate.edu">Primary CTA Style<span class="arrow"></span></a>
</li>
<li>
<a class="iastate22-button" href="https://iastate.edu">Primary CTA Style<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="paragraph-widget paragraph-widget--call-to-action--large">
<div class="call-to-action call-to-action--large">
<div class="call-to-action__media">
<img src="../../img/CTA-Large-Image_FPO.jpg" alt="" loading="lazy" width="1713" height="641">
</div>
<div class="call-to-action__copy-wrap">
<h2 class="call-to-action__headline">Large Call to Action Voluptate Lorem</h2>
<div class="text-content">
<p>Nemo enim ipsam voluptatem quia voluptas.</p>
</div>
<div class="iastate22-button-set">
<ul>
<li>
<a class="iastate22-button" href="https://iastate.edu">Primary CTA Style<span class="arrow"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="site-footer site-footer--ecosystem">
<div class="site-footer__flex-wrap">
<div class="site-footer__logo-social-links-wrap">
<a href="https://www.iastate.edu" class="site-footer__logo">
<img src="https://cdn.theme.iastate.edu/img/iastate22/iowa-state-university-logo-with-tagline-sci-tech.svg" alt="Iowa State University of Science and Technology" loading="lazy" width="516" height="69">
</a>
<ul class="site-footer__social">
</ul>
</div>
<nav class="site-footer__primary-nav" aria-label="Footer Primary">
<ul>
<li>
<a href="#">Footer Link 1</a>
</li>
<li>
<a href="#">Footer Link 2</a>
</li>
<li>
<a href="#">Footer Link 3</a>
</li>
<li>
<a href="#">Footer Link 4</a>
</li>
<li>
<a href="#">Footer Link 5</a>
</li>
<li>
<a href="#">Footer Link 6</a>
</li>
</ul>
</nav>
<nav class="site-footer__secondary-nav" aria-label="Footer Secondary">
<h2 class="site-footer__section-label">Quick Links</h2>
<ul>
<li>
<a href="#">Quick Link 1</a>
</li>
<li>
<a href="#">Quick Link 2</a>
</li>
<li>
<a href="#">Quick Link 3</a>
</li>
<li>
<a href="#">Quick Link 4</a>
</li>
<li>
<a href="#">Quick Link 5</a>
</li>
<li>
<a href="#">Sign Ons and Tools</a>
</li>
</ul>
</nav>
</div>
<div class="site-footer__bottom-wrap">
<nav class="site-footer__utility-nav" aria-label="Footer Utility">
<ul>
<li>
<a href="https://www.iastate.edu/disclaimers-and-terms">Privacy Policy</a>
</li>
<li>
<a href="https://www.policy.iastate.edu/policy/discrimination">Non-discrimination Policy</a>
</li>
<li>
<a href="https://www.digitalaccess.iastate.edu/">Digital Access and Accessibility</a>
</li>
<li>
<a href="https://www.iastate.edu/consumer-information">Consumer Information</a>
</li>
</ul>
</nav>
<div class="site-footer__copyright">
<p>©Iowa State University of Science and Technology</p>
</div>
</div>
</footer>
</div>
</div>
<div class="privacy-consent" hidden>
<div class="privacy-consent__content">
This website uses cookies to measure traffic and improve your experience. Declining tracking cookies will set a single cookie to remember your preference. You can manage your cookie preference at any time and learn more by visiting our <a href="/privacy-policy">Privacy Policy</a>.
</div>
<div class="privacy-consent__buttons">
<button class="iastate22-button iastate22-button--reverse privacy-consent__accept" type="button">Accept<span class="arrow"></span></button>
<button class="iastate22-button iastate22-button--reverse privacy-consent__decline" type="button">Decline<span class="arrow"></span></button>
</div>
</div>
{% extends "@page" %}
{% block header %}
{% include "@site-header--ecosystem" %}
{% endblock %}
{% block content %}
<div class="outer-pad">
{% include "@hero" with hero %}
<div class="text-content">
<h2>Heading 2 - This is a title of major section of a page</h2>
<p>Body copy….This should be used for any basic text, especially when writing in sentences. 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>
<a href="#test">Test anchor</a>
<h2>Heading 2 - This is a title of the next major section</h2>
<h3>Heading 3 - This is the title of a subsection of a page</h3>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h3>Heading 3 - This is the title of a subsection of a page</h3>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
<h3>Heading 3 - This is the title of a subsection of a page</h3>
<h4>Heading 4 Example</h4>
<h5>Heading 5 Example</h5>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
<ul>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
<ul>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae.</li>
</ul>
</li>
</ul>
<ol>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</li>
</ol>
<p>Lorem ipsum dolor sit amet.
<a href="#">Inline Text Link</a>
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
</div>
<div class="paragraph-widget paragraph-widget--button-set">
{% include "@button-set" with button_set %}
</div>
<div class="paragraph-widget paragraph-widget--link-set">
{% include "@link-set" with link_set %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Heading 2 - This is a title of the next major section</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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
</div>
</div>
<div class="paragraph-widget paragraph-widget--multicolumn-content">
{% include "@multi-column-content" with three_column_text %}
</div>
<div class="paragraph-widget paragraph-widget--multicolumn-content">
{% include "@multi-column-content" with two_column_text %}
</div>
<div class="paragraph-widget paragraph-widget--multicolumn-content">
{% include "@multi-column-content" with image_columns %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Heading 2 - How Images Can Be Used</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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.</p>
{# Right aligned image with caption #}
<figure class="align-right">
<div class="media media--type-image media--view-mode-default">
<img src="{{ "../../img/IMG_Inline_Right_FPO.jpg"|path }}" width="324" height="324" alt="">
</div>
<figcaption>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</figcaption>
</figure>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
{# Left aligned image with caption #}
<figure class="align-left">
<div class="media media--type-image media--view-mode-default">
<img src="{{ "../../img/IMG_Inline_Left_FPO.jpg"|path }}" width="324" height="324" alt="">
</div>
<figcaption>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</figcaption>
</figure>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<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>
{# Center aligned image with caption #}
<figure class="align-center">
<div class="media media--type-image media--view-mode-default">
<img src="{{ "../../img/IMG-Inline_Center_FPO.jpg"|path }}" width="736" height="451" alt="">
</div>
<figcaption>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</figcaption>
</figure>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h1 style="margin:0; padding:0;" id="test">Test</h1>
<h2>Carousel</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--carousel">
{% include "@carousel" %}
</div>
<div class="paragraph-widget paragraph-widget--filter-form">
<div class="filter-form">
<h2 class="filter-form__label">Lorem Ipsum Label - 1 Input, 2 Select items</h2>
<form class="iastate22-form iastate22-form--inline" id="InlineForm" action="#" method="post">
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<button type="submit">Submit<span class="arrow"></span>
</button>
</div>
</form>
</div>
</div>
<div class="paragraph-widget paragraph-widget--filter-form">
<div class="filter-form">
<h2 class="filter-form__label">Lorem Ipsum Label - 1 Input, 6 Select items</h2>
<form class="iastate22-form iastate22-form--inline" id="InlineForm" action="#" method="post">
<div class="form-item">
<label for="name">Text Input</label>
<input type="text" name="name" id="name" value="" tabindex="1">
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<label for="select-choice">Select Dropdown Choice</label>
<select name="select-choice" id="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div class="form-item">
<button type="submit">Submit<span class="arrow"></span>
</button>
</div>
</form>
</div>
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Full Width Image</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--full-width-image">
{% include "@full-width-image" with full_width_image %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Grid List</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--grid-list">
{% include "@grid-list" with grid_list %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Tables</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--table">
{% include "@table" with table %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Accordions</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--accordion">
{% include "@accordion" with accordion %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Inline Statistic</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--statistic-with-text">
{% include "@statistic" with statistic_with_text %}
</div>
<div class="paragraph-widget paragraph-widget--callout-with-image">
{% include "@feature-with-small-image" with callout_with_image %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Feature with H3 and 1 Small Image</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--callout-set">
{% include "@feature-set" with callout_with_image_small_set_one %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Feature with H3 and No Image</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--callout-set">
{% include "@feature-set" with callout_with_no_image %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Feature with H3 and 2 Small Images</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--callout-set">
{% include "@feature-set" with callout_with_image_small_set_two %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Feature with H3 and 3 Small Images</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--callout-set">
{% include "@feature-set" with callout_with_image_small_set_three %}
</div>
<div class="paragraph-widget paragraph-widget--image-grid-with-text">
{% include "@image-grid-with-text" with image_grid_with_text %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>Video</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--video-embed">
{% include "@video-embed" with video_embed %}
</div>
<div class="paragraph-widget paragraph-widget--link-block">
{% include "@link-block" with link_block %}
</div>
<div class="paragraph-widget paragraph-widget--external-news-story">
{% include "@external-news-story" with external_news_story %}
</div>
<div class="paragraph-widget paragraph-widget--blockquote">
{% include "@blockquote" with pull_quote_with_author_with_image %}
</div>
<div class="paragraph-widget paragraph-widget--blockquote">
{% include "@blockquote" with pull_quote_no_author_no_image %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>3 Cards—with Images and Links</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--card-set">
{% include "@card-set" with card_set_three_links %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>6 Cards—with Images and Links</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--card-set">
{% include "@card-set" with card_set_six %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>3 Cards—with Images</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--card-set">
{% include "@card-set" with card_set_three_no_links %}
</div>
<div class="paragraph-widget paragraph-widget--text-html">
<div class="text-content">
<h2>3 Cards—no Images and Links</h2>
</div>
</div>
<div class="paragraph-widget paragraph-widget--card-set">
{% include "@card-set" with card_set_three_links_no_images %}
</div>
<div class="paragraph-widget paragraph-widget--feature-with-large-image">
{% include "@feature-with-large-image" with feature_with_large_image %}
</div>
<div class="paragraph-widget paragraph-widget--callout-inset">
{% include "@feature-with-large-image-and-intro" with callout_inset %}
</div>
<div class="paragraph-widget paragraph-widget--call-to-action--small">
{% include "@call-to-action--small" with call_to_action_small %}
</div>
<div class="paragraph-widget paragraph-widget--call-to-action--large">
{% include "@call-to-action--large" with call_to_action_large %}
</div>
</div>
{% endblock %}
{% block footer %}
{% include "@site-footer--ecosystem" %}
{% endblock %}
{
"hero": {
"breadcrumbs": {
"links": [
{
"url": "https://www.iastate.edu/",
"name": "Home"
},
{
"url": "https://www.iastate.edu/",
"name": "Parent Page"
},
{
"url": "https://www.iastate.edu/",
"name": "Kitchen Sink"
}
]
},
"title": "Kitchen Sink",
"image": "../../img/Heroes-Kitchen_Sink.jpg",
"subnav": {
"items": [
{
"url": "https://www.iastate.edu/",
"title": "Parent Page",
"current": false,
"children": []
},
{
"url": "https://www.iastate.edu/",
"title": "Sibling Page Title Lorem Ipsum",
"current": false,
"children": []
},
{
"url": "https://www.iastate.edu/",
"title": "Sibling Page Title Lorem Ipsum",
"current": false,
"children": []
},
{
"url": "https://www.iastate.edu/",
"title": "Sibling Page Title Lorem Ipsum",
"current": false,
"children": []
},
{
"url": "https://www.iastate.edu/",
"title": "Kitchen Sink",
"current": true,
"children": [
{
"url": "https://www.iastate.edu/",
"title": "Child Page Title Lorem",
"current": false,
"children": []
},
{
"url": "https://www.iastate.edu/",
"title": "Child Page Title Lorem",
"current": false,
"children": []
}
]
},
{
"url": "https://www.iastate.edu/",
"title": "Sibling Page Title Lorem Ipsum",
"current": false,
"children": []
}
]
}
},
"button_set": {
"items": [
{
"text": "Primary CTA Style",
"url": "https://iastate.edu"
}
]
},
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "Secondary Link Style",
"variant": "iastate22-link-secondary"
},
{
"url": "https://iastate.edu",
"text": "External Link Style",
"variant": "iastate22-link-external"
},
{
"url": "https://iastate.edu",
"text": "Tertiary Link Style",
"variant": "link-tertiary"
}
]
},
"three_column_text": {
"columns": [
"<h3>3-Column Heading Lorem</h3><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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>",
"<h3>3-Column Heading Lorem</h3><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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>",
"<h3>3-Column Heading Lorem</h3><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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>"
]
},
"two_column_text": {
"columns": [
"<h3>2-Column Heading Lorem</h3><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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>",
"<h3>2-Column Heading Lorem</h3><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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>"
]
},
"image_columns": {
"columns": [
"<h3>2-Column With Image</h3><img src=\"../../img/Component-Feature-Image-Small.jpg\" width=\"445\" height=\"297\" alt=\"\">",
"<h3>2-Column With Image</h3><img src=\"../../img/Component-Feature-Image-Small.jpg\" width=\"445\" height=\"297\" alt=\"\">"
]
},
"full_width_image": {
"image": "../../img/Component-Centered-Image-Full-Width.jpg",
"caption": "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim."
},
"grid_list": {
"label": "Optional Label",
"sublabel": "Lorem ipsum eiusmod proident duis dolore proident officia adipiscing sunt proident tempor enim aliquip commodo eiusmod enim ex quis dolor",
"grid_list": [
{
"media": {
"image": "",
"icon_id": "fa-solid fa-graduation-cap"
},
"url": "https://iastate.edu",
"text": "Font Awesome Example"
},
{
"media": {
"image": "",
"icon_id": "fak fa-iastate22-email"
},
"url": "https://iastate.edu",
"text": "Font Awesome Example Two"
},
{
"media": {
"image": "https://placehold.co/500x400",
"icon_id": ""
},
"url": "https://iastate.edu",
"text": ""
},
{
"media": {
"image": "",
"icon_id": ""
},
"url": "https://iastate.edu",
"text": "Lorem ipsum eiusmod proident duis dolore"
},
{
"media": {
"image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-undergraduate.svg",
"icon_id": ""
},
"url": "https://iastate.edu",
"text": "Undergraduate Student"
},
{
"media": {
"image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-undergraduate.svg",
"icon_id": ""
},
"url": "",
"text": "Non-Link Example"
},
{
"media": {
"image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-graduate.svg",
"icon_id": ""
},
"url": "https://iastate.edu",
"text": "Graduate Student"
},
{
"media": {
"image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-transfer.svg",
"icon_id": ""
},
"url": "https://iastate.edu",
"text": "Transfer Student"
},
{
"media": {
"image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-non-degree.svg",
"icon_id": ""
},
"url": "https://iastate.edu",
"text": "Non-Degree Student"
},
{
"media": {
"image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-military-non-traditional.svg",
"icon_id": ""
},
"url": "https://iastate.edu",
"text": "Military or Nontraditional Student"
},
{
"media": {
"image": "https://cdn.theme.iastate.edu/img/iastate22/icons/multicolor-icon-international.svg",
"icon_id": ""
},
"url": "https://iastate.edu",
"text": "International Student"
}
]
},
"table": {
"caption_ID": "caption1",
"table_caption": "Table Caption Example",
"headers": [
"Long Header Lorem Ipsum Dolor Sit Amet",
"Short Header",
"Medium Header Lorem Ipsum"
],
"rows": [
[
"Donec pede justo, fringilla vel, aliquet nec, vulputate",
"Donec pede justo, fringilla vel, aliquet nec, vulputate",
"Donec pede justo, fringilla vel, aliquet nec, vulputate"
],
[
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.",
"Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.",
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
],
[
"Aenean massa nulla.",
"Nulla consequat massa quis enim.",
"Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem."
],
[
"Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
"Aenean commodo ligula eget dolor.",
"Nulla consequat massa quis enim."
]
]
},
"accordion": {
"id": "0",
"sections": [
{
"title": "Accordion Short Title",
"content": "<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><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>"
},
{
"title": "Engineered Medicine",
"content": "<h3>Leading to improved health and enhanced quality of life</h3><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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><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><h3>Focus Areas</h3><ul><li><a href=\"#\">Biomaterials for nanomedicine and tissue/cellular engineering</a></li><li><a href=\"#\">Biosensors, biochips, and theranostics</a></li><li><a href=\"#\">Bioinformatics and computational medicine</a></li><li><a href=\"#\">Human factors and rehabilitation engineering</a></li></ul>"
},
{
"title": "Accordion with a Long Title and Table Example",
"content": "<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><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 class=\"iastate22-table\" tabindex=\"0\" role=\"region\"><table class=\"table table-condensed table-striped\"><thead><tr><th>International Merit Scholarship (Spring and Fall)</th><th>Amount</th></tr></thead><tbody><tr><td>Award of Achievement</td><td>Up to $40,000 ($5,000/yr–$10,000/yr)</td></tr><tr><td>Award of Distinction</td><td><p>Up to $16,000 ($2,000/yr–$4,000/yr)</p></td></tr></tbody></table></div>"
},
{
"title": "Accordion Short Title",
"content": "<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><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>"
},
{
"title": "Accordion Short Title",
"content": "<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><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>"
}
]
},
"statistic_with_text": {
"statistic": {
"statistic_title": "X,XXX",
"statistic_text": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem"
},
"text": "<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><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.</p><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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>"
},
"callout_with_image": {
"image": "../../img/Component-Feature-Image-Small.jpg",
"title": "Heading 2 - This is a title of major section of a page",
"body_copy": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem.",
"button": {
"text": "Primary CTA Style",
"url": "#"
}
},
"callout_with_image_small_set_one": {
"callouts": [
{
"image": "../../img/Component-Featured-Image-Small_FPO.jpg",
"title": "Feature Title Lorem Ipsum Dolor",
"body_copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "Secondary Link Example",
"variant": "iastate22-link-secondary"
},
{
"url": "https://iastate.edu",
"text": "Tertiary Link Example",
"variant": "link-tertiary"
},
{
"url": "https://iastate.edu",
"text": "Inline Link Example"
},
{
"url": "https://iastate.edu",
"text": "Inline Link Example"
}
]
}
}
]
},
"callout_with_no_image": {
"callouts": [
{
"title": "Feature Title Lorem Ipsum Dolor",
"body_copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "Link Lorem Ipsum Dolor",
"variant": "iastate22-link-secondary"
}
]
}
}
]
},
"callout_with_image_small_set_two": {
"callouts": [
{
"image": "../../img/Component-Featured-Image-Small_FPO.jpg",
"title": "Feature Title Lorem Ipsum Dolor",
"body_copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "Link Lorem Ipsum Dolor",
"variant": "iastate22-link-secondary"
}
]
}
},
{
"image": "../../img/Component-Featured-Image-Small-2_FPO.jpg",
"title": "Feature Title Lorem Ipsum Dolor",
"body_copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "Link Lorem Ipsum Dolor",
"variant": "iastate22-link-secondary"
}
]
}
}
]
},
"callout_with_image_small_set_three": {
"callouts": [
{
"image": "../../img/Component-Featured-Image-Small_FPO.jpg",
"title": "Feature Title Lorem Ipsum Dolor",
"body_copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "Link Lorem Ipsum Dolor",
"variant": "iastate22-link-secondary"
}
]
}
},
{
"image": "../../img/Component-Featured-Image-Small-2_FPO.jpg",
"title": "Feature Title Lorem Ipsum Dolor",
"body_copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "Link Lorem Ipsum Dolor",
"variant": "iastate22-link-secondary"
}
]
}
},
{
"image": "../../img/Component-Featured-Image-Small_FPO.jpg",
"title": "Feature Title Lorem Ipsum Dolor",
"body_copy": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "Link Lorem Ipsum Dolor",
"variant": "iastate22-link-secondary"
}
]
}
}
]
},
"image_grid_with_text": {
"title": "Image Grid with H2 Title and CTA",
"copy": "<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
"image_grid": {
"image_one": "../../img/IMG-Campus-Location-Large-Image.jpg",
"image_two": "../../img/IMG-Campus-Location-Large-Image.jpg",
"image_three": "../../img/IMG-Campus-Location-Large-Image.jpg",
"caption": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
},
"button_set": {
"items": [
{
"text": "Primary CTA Styles",
"url": "https://iastate.edu"
}
]
}
},
"video_embed": {
"wallpaper": "../../img/IMG-Inline_Center_FPO.jpg",
"source": "youtube",
"title": "Your future starts now.",
"youtube_video_id": "LjOmcZkXVcU",
"vimeo_video_id": "364912347",
"caption": "Video caption 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."
},
"link_block": {
"title": "Optional Subheading Lorem Ipsum Dolor",
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "Link Label Lorem Ipsum Dolor Sit",
"variant": "iastate22-link-secondary"
},
{
"url": "https://iastate.edu",
"text": "Link Label Lorem Ipsum Dolor",
"variant": "iastate22-link-secondary"
},
{
"url": "https://iastate.edu",
"text": "Link Label Lorem",
"variant": "iastate22-link-secondary"
},
{
"url": "https://iastate.edu",
"text": "Link Name Lorem Ipsum",
"variant": "iastate22-link-secondary"
},
{
"url": "https://iastate.edu",
"text": "Link Label Lorem Dolor",
"variant": "iastate22-link-secondary"
},
{
"url": "https://iastate.edu",
"text": "Link Label Lorem Ipsum Dolor",
"variant": "iastate22-link-secondary"
}
]
}
},
"external_news_story": {
"subhead": "Optional Subheading External News/Story Feature",
"image": "../../img/Component-Feature-News-Story-Image.jpg",
"headline": "Headline Nemo enim irure dolor in reprehenderit in voluptate velit esse cillum dolore.",
"body_copy": "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
"link_set": {
"links": [
{
"url": "https://iastate.edu",
"text": "External Link Style",
"variant": "iastate22-link-external"
}
]
}
},
"pull_quote_with_author_with_image": {
"quote": "Being involved with Multicultural Student Affairs programs has helped me a lot and I have met people who inspire me to pursue higher education.",
"author": "Ser Paw",
"author_role": "International Studies Major",
"portrait": "../../img/featured-quote.jpg"
},
"pull_quote_no_author_no_image": {
"quote": "Being involved with Multicultural Student Affairs programs has helped me a lot and I have met people who inspire me to pursue higher education.",
"author": "",
"author_role": "",
"portrait": ""
},
"card_set_three_links": {
"cards": [
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-1.jpg",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-2.jpg",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-3.jpg",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
}
]
},
"card_set_six": {
"cards": [
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-1.jpg",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-2.jpg",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-3.jpg",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-1.jpg",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-2.jpg",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-3.jpg",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
}
]
},
"card_set_three_no_links": {
"cards": [
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-1.jpg"
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-2.jpg"
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"image": "../../img/Component-Card-Image-3.jpg"
}
]
},
"card_set_three_links_no_images": {
"cards": [
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
},
{
"title": "Card Title Lorem Ipsum Dolor Sit Amet",
"body": "<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>",
"url": "https://www.iastate.edu/",
"cta": {
"url": "https://www.iastate.edu/",
"text": "Optional Link Text Lorem"
}
}
]
},
"feature_with_large_image": {
"image": "../../img/feature_with_large_image.jpg",
"title": "Feature with H2 and Large Image",
"text": "<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>",
"button_set": {
"items": [
{
"text": "Primary CTA Style",
"url": "https://iastate.edu"
}
]
}
},
"callout_inset": {
"title": "Inset Call Out with H2",
"intro_text": "<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>",
"feature_with_large_image": {
"image": "../../img/Feature-Image-Inset-Large_FPO.jpg",
"title": "Inset Feature with H2 and Large Image",
"text": "<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni lorem ipsem.</p>",
"button_set": {
"items": [
{
"text": "Primary CTA Style",
"url": "https://iastate.edu"
}
]
}
}
},
"call_to_action_small": {
"title": "Small Call to Action Voluptate Lorem Ipsum Dolor",
"body": "Nemo enim ipsam voluptatem quia voluptas.",
"button_set": {
"items": [
{
"text": "Primary CTA Style",
"url": "https://iastate.edu"
},
{
"text": "Primary CTA Style",
"url": "https://iastate.edu"
}
]
}
},
"call_to_action_large": {
"title": "Large Call to Action Voluptate Lorem",
"body": "<p>Nemo enim ipsam voluptatem quia voluptas.</p>",
"image": "../../img/CTA-Large-Image_FPO.jpg",
"button_set": {
"items": [
{
"text": "Primary CTA Style",
"url": "https://iastate.edu"
}
]
}
}
}
There are no notes for this item.