<div class="row">
<div class="col-sm-12 text-center">
<h4 class="uppercase mb16">Flexible, Multipurpose Modals</h4>

<p class="lead mb64">Using extremely simple markup, you can combine Foundry's smart colour classes to create an array of engaging modals.</p>
</div>
</div>
<!--end of row-->

<div class="row mb48 mb-xs-0">
<div class="col-sm-4 text-center">
<div class="modal-container"><a class="btn btn-lg btn-modal" href="#">Basic Text</a>

<div class="foundry_modal">
<h4>Hey there, I'm a cool multi-purpose modal.<br />
Use me for almost anything!</h4>

<hr />
<p>Convergence unicorn thinker-maker-doer ideate thinker-maker-doer pitch deck piverate food-truck long shadow disrupt. Sticky note engaging latte integrate driven convergence food-truck pitch deck. Quantitative vs. qualitative disrupt sticky note piverate 360 campaign co-working bootstrapping long shadow actionable insight agile latte. Thinker-maker-doer bootstrapping integrate personas long shadow Steve Jobs entrepreneur sticky note ship it grok sticky note.</p>

<p>Grok Steve Jobs user centered design driven earned media food-truck waterfall is so 2000 and late human-centered design workflow ideate sticky note actionable insight entrepreneur unicorn. Experiential parallax physical computing disrupt cortado human-centered design intuitive grok bootstrapping quantitative vs. qualitative driven.</p>
</div>
</div>
<!--end modal--></div>
<!--end col-->

<div class="col-sm-4 text-center">
<div class="modal-container"><a class="btn btn-lg btn-modal" href="#">Long Scrolling Modal</a>

<div class="foundry_modal">
<h4>Scroll me! I'm a scrolling multi-purpose modal.<br />
Use me for almost anything!</h4>

<hr />
<p>When the content of a modal extends beyond the height of the window, the modal automatically becomes scrollable.</p>

<p>Grok convergence fund earned media intuitive quantitative vs. qualitative hacker minimum viable product pitch deck workflow integrate ship it experiential. Convergence integrate earned media workflow entrepreneur unicorn venture capital innovate Steve Jobs prototype driven thought leader. Steve Jobs user centered design driven earned media food-truck waterfall is so 2000 and late human-centered design workflow ideate sticky note actionable insight entrepreneur unicorn. Experiential parallax physical computing disrupt cortado human-centered design intuitive grok bootstrapping quantitative vs. qualitative driven.</p>

<p>Fund agile latte convergence disrupt thinker-maker-doer unicorn. Prototype personas thought leader quantitative vs. qualitative intuitive human-centered design co-working workflow. Pitch deck quantitative vs. qualitative user centered design moleskine big data iterate sticky note paradigm. Big data hacker driven affordances user centered design responsive personas waterfall is so 2000 and late thought leader.</p>

<p>SpaceTeam intuitive thought leader ship it fund agile paradigm engaging. Bootstrapping affordances convergence prototype viral piverate pivot intuitive SpaceTeam entrepreneur cortado thinker-maker-doer. Human-centered design convergence thought leader viral viral pivot minimum viable product cortado SpaceTeam ship it pivot big data. Physical computing quantitative vs. qualitative sticky note convergence driven driven venture capital thought leader convergence experiential integrate integrate.</p>

<p>360 campaign big data food-truck experiential viral parallax waterfall is so 2000 and late bootstrapping parallax pitch deck. Iterate parallax ship it user story SpaceTeam parallax pitch deck big data. Entrepreneur latte food-truck SpaceTeam integrate grok pivot engaging. Integrate experiential sticky note agile responsive latte convergence SpaceTeam workflow. Ideate fund grok food-truck prototype iterate parallax piverate viral responsive ship it long shadow latte.</p>

<p>Responsive personas experiential grok bootstrapping user story personas big data intuitive Steve Jobs user story physical computing. Responsive ship it long shadow grok food-truck 360 campaign workflow piverate. Iterate pair programming grok driven ideate co-working actionable insight entrepreneur viral paradigm integrate intuitive sticky note. Ideate waterfall is so 2000 and late driven disrupt user centered design personas experiential grok user centered design experiential.</p>

<p>Food-truck 360 campaign venture capital SpaceTeam SpaceTeam bootstrapping ship it food-truck viral long shadow. Integrate user story big data minimum viable product latte user centered design personas fund integrate. Actionable insight innovate ideate disrupt ideate responsive bootstrapping. Food-truck workflow responsive pair programming 360 campaign prototype entrepreneur quantitative vs. qualitative piverate driven convergence. Responsive innovate parallax moleskine entrepreneur user centered design 360 campaign minimum viable product thinker-maker-doer convergence.</p>

<p>Entrepreneur user story thinker-maker-doer entrepreneur ship it entrepreneur workflow disrupt parallax. Agile hacker disrupt hacker big data paradigm ideate cortado convergence minimum viable product parallax. Big data bootstrapping driven piverate waterfall is so 2000 and late experiential responsive ship it personas parallax user centered design food-truck.</p>

<p>User centered design intuitive unicorn intuitive entrepreneur minimum viable product hacker human-centered design actionable insight. Ideate intuitive human-centered design personas piverate thought leader Steve Jobs hacker disrupt entrepreneur minimum viable product pivot actionable insight. Thought leader long shadow cortado SpaceTeam engaging intuitive thinker-maker-doer earned media SpaceTeam disrupt SpaceTeam engaging. Engaging long shadow innovate prototype user centered design earned media intuitive grok. Pivot SpaceTeam bootstrapping cortado integrate prototype experiential actionable insight 360 campaign minimum viable product.</p>

<p>Unicorn paradigm paradigm pivot workflow innovate engaging. Ideate disrupt pivot co-working pair programming parallax human-centered design actionable insight actionable insight fund fund. Entrepreneur waterfall is so 2000 and late user story thought leader long shadow intuitive driven agile convergence personas user story prototype agile iterate. Personas unicorn user story responsive thought leader responsive human-centered design SpaceTeam.</p>

<p>This is the end of the long modal content.</p>
</div>
</div>
<!--end modal--></div>
<!--end col-->

<div class="col-sm-4 text-center">
<div class="modal-container"><a class="btn btn-lg btn-modal" href="#">Signup Form</a>

<div class="foundry_modal text-center">
<h3 class="uppercase">Sign Up &amp; Be Cool.</h3>

<p class="lead mb48">Stay in the loop with our awesome newsletter. We'll send you monthly<br />
updates of our latest and greatest tools and resources.</p>
[block:foundry_simplenewssubscription]</div>
</div>
<!--end modal--></div>
<!--end col--></div>
<!--end of row-->

<div class="row">
<div class="col-sm-4 text-center">
<div class="modal-container"><a class="btn btn-lg btn-modal" href="#">Image Background</a>

<div class="foundry_modal text-center image-bg overlay">
<div class="background-image-holder"><img alt="Background" class="background-image" src="img/modal2.jpg" /></div>

<h3 class="uppercase">Sign Up &amp; Be Cool.</h3>

<p class="lead mb48">Stay in the loop with our awesome newsletter. We'll send you monthly<br />
updates of our latest and greatest tools and resources.</p>
[block:foundry_simplenewssubscription]</div>
</div>
<!--end modal--></div>
<!--end col-->

<div class="col-sm-4 text-center">
<div class="modal-container"><a class="btn btn-lg btn-modal" href="#">Full Height</a>

<div class="foundry_modal text-center image-bg overlay fullscreen">
<div class="background-image-holder"><img alt="Background" class="background-image" src="img/modal1.jpg" /></div>

<h2 class="uppercase">Summer<br />
Clearance Sale</h2>

<p class="lead mb48">Stay in the loop with our awesome newsletter. We'll send you monthly<br />
updates of our latest and greatest tools and resources.</p>
<a class="btn btn-lg" href="#">Shop The Sale</a></div>
</div>
<!--end modal--></div>
<!--end col-->

<div class="col-sm-4 text-center">
<div class="modal-container"><a class="btn btn-lg btn-modal" href="#">Iframe</a>

<div class="foundry_modal text-center"><iframe allowfullscreen="allowfullscreen" frameborder="0" src="https://www.youtube.com/embed/dmgomCutGqc"></iframe></div>
</div>
<!--end modal--></div>
<!--end col--></div>
