<section class="is-fixed" style="width: 100%; height: 100%; overflow-y: auto">
<div class="has-background-grey-darker is-absolute" style="width: 100%; height: 100%; opacity: 0.6;"></div>
<div class="section">
<div class="is-relative has-background-white p-8 has-mw-3xl mx-auto" style="border-radius: 6px;">
<a class="is-absolute is-right-0 is-top-0 -mt-12 mt-0-tablet -mr-16-tablet" href="#">
<img src="acros-assets/icons/modals/decline.svg" alt="">
</a>
<div class="columns is-justify-content-space-between">
<div class="column">
<h3 class="title is-size-3 has-mw-xs">Sign up to our newsletter</h3>
<p class="mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="field mb-4">
<label class="label"><small>Password</small></label>
<div class="control">
<input class="input" type="text" placeholder="Type your email">
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-primary is-fullwidth">Sign In</button>
</div>
</div>
</div>
<div class="column">
<div class="is-relative p-8">
<div class="is-absolute is-left-0 is-top-0 has-background-primary" style="border-radius: 4px; opacity: 0.1; width: 100%; height:100%;"></div>
<img class="mb-16" src="acros-assets/icons/modals/mail-read.svg" alt="">
<h6 class="title is-size-6 has-text-weight-medium">There are many variations:</h6>
<ul>
<li class="is-flex is-align-items-center mb-2">
<img class="mr-3" src="acros-assets/icons/modals/check-circle.svg" alt="">
<small>It is a long established fact that a reader</small>
</li>
<li class="is-flex is-align-items-start mb-2">
<img class="mr-3" src="acros-assets/icons/modals/check-circle.svg" alt="">
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
</li>
<li class="is-flex is-align-items-center">
<img class="mr-3" src="acros-assets/icons/modals/check-circle.svg" alt="">
<small>All the Lorem Ipsum generators</small>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Bulma
UI Library
All Libraries
Components
- Application 38
- Banner 5
- Blog 50
- Call to action 78
- Contact 24
- Content 10
- Content 34
- Cookies 31
- E-commerce (orders) 14
- E-commerce (products) 20
- FAQ 31
- Features 106
- Footer 34
- HTTP codes 31
- Headers 60
- How it works 29
- Logo clouds 58
- Modals 4
- Navigation (horizontal) 67
- Newsletter 35
- Portfolio 28
- Pricing 25
- Reviews 5
- Sign in / Sign up 49
- Stats 17
- Tables 2
- Team 25
- Testimonials 34
Communicate to your users the need to take an action or confirm an action. Bulma modals components will allow you to easily convey the message you want.
Browse and choose one variant from Bulma components modals. They are UI library components created by our talented designers and coded by our development team. Don't forget to take a look at alerts and banners sections - you'll find other components with similar purpose there.
Buy a subscription to get access to the drag and drop editor, all UI libraries and code under each component.
Component #1
