Design Blocks

From Foundation
Jump to navigation Jump to search

Design Blocks

This page contains various design blocks that you can use in your wiki articles.

Block 1

Material Design Blocks

At vero eos et accusamus et iusto odio dignissimos qui cupiditate non-provident.
tennis.png
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
basketball.png
Ut enim ad minim veniam, quis nostrud ut aliquip ex ea commodo consequat.
<div class="container-fluid my-5 py-5 z-depth-1">
<div class="dark-grey-text text-center"> 
<h3 class="font-weight-bold pt-4 mb-4">Material Design Blocks</h3> 
<h5 class="font-weight-bold font-italic mb-5">At vero eos et accusamus et iusto odio dignissimos qui cupiditate non-provident.</h5>
<div class="row mx-lg-5 mx-md-3">
<div class="col-md-6 mb-4">       
<div class="view mb-5">
<div class="img-fluid">https://res.cloudinary.com/ideviceuk/image/upload/v1584885193/tennis.png</div></div>
<h5 class="font-weight-normal text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h5>
</div>
<div class="col-md-6 mb-4">
<div class="view mb-5">
<div class="img-fluid">https://res.cloudinary.com/ideviceuk/image/upload/v1584885194/basketball.png</div></div>
<h5 class="font-weight-normal text-muted">Ut enim ad minim veniam, quis nostrud ut aliquip ex ea commodo consequat.</h5>
</div>
</div>
</div>
</div>

Block 2

guitar.png

Material Design Blocks

Lorem ipsum dolor sit amet consectetur adip elit. Maiores deleniti explicabo voluptatem quisquam nulla asperiores aspernatur aperiam voluptate et consectetur minima delectus, fugiat eum soluta blanditiis adipisci, velit dolore magnam.

Download
<div class="container-fluid my-5 z-depth-1">
<div class="dark-grey-text">
<div class="row pr-lg-5">
<div class="col-md-7 mb-4">
<div class="view">
<div class="img-fluid">https://res.cloudinary.com/ideviceuk/image/upload/v1584891922/guitar.png</div>
</div>
</div>
<div class="col-md-5 d-flex align-items-center">
<div>
<h3 class="font-weight-bold mb-4">Material Design Blocks</h3>
<p>Lorem ipsum dolor sit amet consectetur adip elit. Maiores deleniti explicabo voluptatem quisquam nulla asperiores aspernatur aperiam voluptate et consectetur minima delectus, fugiat eum soluta blanditiis adipisci, velit dolore magnam.</p>
<div type="button" class="btn btn-orange btn-rounded mx-0">Download</div>
        </div>
      </div>
    </div>
  </div>
</div>

Block 3

Material Design Blocks

Lorem ipsum dolor, sit amet consectetur adipisicing elit. I'd quam sapiente molestiae numquam quas, voluptates omnis nulla ea odio quia similique corrupti magnam, doloremque laborum.

Start now
demo1.jpg
<div class="container-fluid my-5 py-5 z-depth-1">
<div class="px-md-5 mx-md-5 text-center text-lg-left dark-grey-text">
<div class="row">
<div class="col-md-6 mb-4 mb-md-0">
<h3 class="font-weight-bold">Material Design Blocks</h3>
<p class="text-muted">Lorem ipsum dolor, sit amet consectetur adipisicing elit. I'd quam sapiente molestiae numquam quas, voluptates omnis nulla ea odio quia similique corrupti magnam, doloremque laborum.</p>
<div class="btn btn-purple btn-md ml-0" role="button">Start now<i class="fa fa-gem ml-2"></i></div>
</div>
<div class="col-md-6 mb-4 mb-md-0">
<div class="view overlay z-depth-1-half">
<div class="img-fluid">https://res.cloudinary.com/ideviceuk/image/upload/v1584892436/demo1.jpg</div>
</div>
</div>  
</div>
</div>
</div>

Block 4

wiki_logo.png

Call to action

Lorem ipsum dolor, sit amet consectetur adipisicing elit. I'd quam sapiente molestiae numquam quas, voluptates omnis nulla ea odio quia similique corrupti magnam, doloremque laborum.

Start now

<div class="container-fluid my-5 py-5 z-depth-1">
<div class="px-md-5 mx-md-5 dark-grey-text text-center text-lg-left">
<div class="row">
<div class="col-lg-7 mb-4 mb-lg-0">
<div class="img-fluid mb-5">https://res.cloudinary.com/ideviceuk/image/upload/v1584892893/wiki_logo.png</div>
<h3 class="font-weight-bold">Call to action</h3>
<p class="text-muted">Lorem ipsum dolor, sit amet consectetur adipisicing elit. I'd quam sapiente molestiae numquam quas, voluptates omnis nulla ea odio quia similique corrupti magnam, doloremque laborum.</p>
<div class="btn btn-primary btn-md ml-0" role="button">Start now<i class="fa fa-magic ml-2"></i></div>
</div>
<div class="col-lg-5 mb-4 mb-lg-0 d-flex align-items-center justify-content-center">
<i class="fas fa-gem fa-10x blue-text"></i>
</div>
</div>
</div>
</div>

Block 5

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem minima cum sapiente alias iste expedita saepe explicabo illum ab, reiciendis aliquid nulla temporibus mollitia quae beatae harum sequi quidem ad.

<div class="container-fluid my-5 py-5 z-depth-1">
<div class="px-md-5 mx-md-5 dark-grey-text text-center">
<div class="row d-flex justify-content-center">
<div class="col-lg-8">
<div class="row">
<div class="col-md-3 col-6 mb-4"><i class="fas fa-gem fa-3x blue-text"></i></div>
<div class="col-md-3 col-6 mb-4"><i class="fas fa-chart-area fa-3x teal-text"></i></div>
<div class="col-md-3 col-6 mb-4"><i class="fas fa-cogs fa-3x indigo-text"></i></div>
<div class="col-md-3 col-6 mb-4"><i class="fas fa-cloud-upload-alt fa-3x deep-purple-text"></i></div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem minima cum sapiente alias iste expedita saepe explicabo illum ab, reiciendis aliquid nulla temporibus mollitia quae beatae harum sequi quidem ad.</p>
</div>
</div>
</div>
</div>



TOP

Retrieved from ‘https://foundationextension.com/index.php?title=Design_Blocks&oldid=687