Carousel
This pattern contains:
molecules-inset-block
HTML
<div class="carousel-list-carousel">
<div class="carousel-container">
<div class="block block-inset">
<a href="#" class="inner">
<div class="b-thumb">
<img src="../../images/fpo_4x3.png" alt="4x3 Image" /> </div>
<div class="b-text">
<h2 class="headline">Lorem ipsum dolor sit (37 characters)</h2>
</div>
</a>
</div> <div>
<div class="carousel-controls">
<a href="#" class="carousel-prev">←</a>
<div class="carousel-pagination">1/5</div>
<a href="#" class="carousel-next">→</a>
</div>
</div>
Work Form
HTML
<form action="#" method="post" class="para-form">
<p>Hello. How’s it going <label class="is-vishidden" for="name">your name</label>
<input required="true" class="inline" id="name" name="name" type="text" placeholder="your name">? I know things have never been more exciting than they are now at <label class="is-vishidden" for="company">your company</label>
<input class="inline" id="company" name="company" type="text" placeholder="your company">. You know I’m really happy to see you stopped by to tell us about <label class="is-vishidden" for="reason">your reason for contacting</label> <select id="reason" class="inline" name="reason">
<option selected="" disabled="" value="">your reason for contacting</option>
<option value="Scheduling a workshop">scheduling a workshop</option>
<option value="Design consulting">design consulting</option>
<option value="Just saying hello!">what you’re up to :)</option>
</select>. I’ll send you an e-mail at <input class="inline" required="true" id="email" name="email" type="email" placeholder="your e-mail"> so we can talk it over.</p>
<label for="more-information">If you have time, tell us more about that:</label>
<textarea name="more-information" id="more-information"></textarea>
<input type="submit" class="btn btn-large" name="Contact" value="Fire Away">
</form>