• Home
  • content_example_bk



Left image text right (Mobile: Image top text bottom)

Image Title

Title Here

Lorem ipsum dolor sit amet eiusmod aliqua quam elementum habitasse aenean. Eiusmod magna vivamus dapibus nunc purus tortor semper integer. Platea est aliqua dolore quis faucibus enim aliqua pellentesque curabitur. Pellentesque venenatis risus sagittis sapien nec proin urna feugiat quis. Hac hendrerit odio urna est aliquet congue aliqua.



Example Code

<div class="content-blocks">
<div class="row content-blocks__flex">
<div class="col-sm-6 col-md-6">
<div class="content-blocks__image">
<img src="IMAGE URL" alt="IMAGE TITLE">
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="content-blocks__text">
<h2>Title Here</h2>
<p>Content here</p>
</div>
</div>
</div>
</div>



Left text right image (Mobile: Text top image bottom)

Title Here

Lorem ipsum dolor sit amet eiusmod aliqua quam elementum habitasse aenean. Eiusmod magna vivamus dapibus nunc purus tortor semper integer. Platea est aliqua dolore quis faucibus enim aliqua pellentesque curabitur. Pellentesque venenatis risus sagittis sapien nec proin urna feugiat quis. Hac hendrerit odio urna est aliquet congue aliqua.

Image Title


Example Code

<div class="content-blocks">
<div class="row content-blocks__flex">
<div class="col-sm-6 col-md-6">
<div class="content-blocks__text">
<h2>Title Here</h2>
<p>Content here</p>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="content-blocks__image">
<img src="IMAGE URL" alt="IMAGE TITLE" />
</div>
</div>
</div>
</div>





Text Across page

Lorem ipsum dolor sit amet eiusmod aliqua quam elementum habitasse aenean. Eiusmod magna vivamus dapibus nunc purus tortor semper integer. Platea est aliqua dolore quis faucibus enim aliqua pellentesque curabitur. Pellentesque venenatis risus sagittis sapien nec proin urna feugiat quis. Hac hendrerit odio urna est aliquet congue aliqua.

Example Code

<p><strong>Text Across page</strong></p>
<p>Lorem ipsum dolor sit amet eiusmod aliqua quam elementum habitasse aenean. Eiusmod magna vivamus dapibus nunc purus tortor semper integer. Platea est aliqua dolore quis faucibus enim aliqua pellentesque curabitur. Pellentesque venenatis risus sagittis sapien nec proin urna feugiat quis. Hac hendrerit odio urna est aliquet congue aliqua.</p>


Text Across page

The system is flexible on sizing as it uses a grid system with 12 sizes. Any image can be used In the example code it’s 50-50 in size and the images center exactly like https://www.fspmlake.com/packages-specials/ To make a 60-40 some code would need to be swapped out. Currently the blocks use col-sm-6 col-md-6 60-40 Example: Swap out col-sm-6 col-md-6 with col-sm-8 col-md-8 (Left Box) and col-sm-6 col-md-6 with col-sm-4 col-md-4 (Right Box)

Other Modifiers

<p><strong>Other modifiers</strong></p>
col-sm-12 col-md-12 = 100%
col-sm-11 col-md-11 = 91.67%
col-sm-10 col-md-10 = 83.33%
col-sm-9 col-md-9 = 83.33%
col-sm-8 col-md-8 = 66.67%
col-sm-7 col-md-7 = 58.33%
col-sm-6 col-md-6 = 50%
col-sm-5 col-md-5 = 41.67%
col-sm-4 col-md-4 = 33.33%
col-sm-3 col-md-3 = 25%
col-sm-2 col-md-2 = 16.67%
col-sm-1 col-md-1 = 8.33%
Go Back