---
url: 'https://unleashed-technologies.com/styleguide/section-and-layout'
title: 'Section and Layout'
author:
  name: Lynn
  url: 'https://unleashed-technologies.com/user/2'
date: '2022-12-08T18:05:10+00:00'
updated: '2023-08-22T13:01:37+00:00'
type: page
published: true
og:
  site_name: 'Unleashed Technologies'
---
##  [Section and Layout](/styleguide/section-and-layout) 

 ## Section with Primary background

 

## Layout - One column

 

###  Text Card - Primary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[Learn More Lorem Ipsum](/)

 

 

 





 

 

 

 

 

  



 ## Section with Secondary background

 

## Layout - Two columns

 

###  Text Card - Primary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



###  Text Card - Secondary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 





 

 

 

 

 

  



 ## Section with Tertiary background

 

## Layout - Three columns

 

###  Text Card - Secondary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



###  Text Card - Primary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



###  Text Card - Tertiary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 





 

 

 

 

 

  



 ## Section with Black background

 

## Layout - Four columns

 

###  Text Card - Primary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



###  Text Card - Secondary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



###  Text Card - Tertiary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



###  Text Card - Gray 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 





 

 

 

 

 

  



 ## Section with White + Border background

 

## Layout - Four columns

 

 

 

###  Image Card 



Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

 

 

 [ ](/) 

###  [ Image Card with a link ](/) 

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

 

 

 [ ](/) 

###  [ Image Card with a link ](/) 

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

 

 

 

 

###  Image Card 



Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

 

 



 

 

 

 

 

  



 ## Section with White background

 

 

Image

  .cls-1{stroke:#94c83d;}.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:6px;}.cls-2{stroke:#214082;}          

 

 

 

 

###  Icon Card 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



Image

  .cls-1{stroke:#94c83d;}.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:6px;}.cls-2{stroke:#214082;}                     

 

 

 

 

###  Icon Card 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



Image

  .cls-1{stroke:#94c83d;}.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:6px;}.cls-2{stroke:#214082;}                                    

 

 

 

 

###  Icon Card 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



 

 

 

 

 

 

  



 ## Section with Gray background

 

## Layout - Four columns no gutter

 

###  Text Card - Primary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



###  Text Card - Secondary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



###  Text Card - Tertiary 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 



###  Text Card - Gray 

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

 





 

 

 

 

 

  



 ## Two Column Layout with Testimonials

 

 

 

This is a test quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

  Test Name 

   Test Title 

  

 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

  Jessica Thompson 

   Head of Account Services 

  

 



 

 

 

 

 

  



 ### Three Column Layout with Link List

 

####  Link List Title Test Lorem Ipsum Dolor Sit Amet 



- [Link one](/)
- [Link two](/)
- [Link three](/)
 


####  Link List Card 2 



- [Lorem ipsum dolor sit amet consectetur adipiscing elit sed do](/)
- [Link two](/)
 


####  Link List Title Testing 



- [This is a link](/)
- [This is another link test](/)
- [Third link test](/)
- [Fourth link test](/)
 




 

 

 

 

 

  



 ### Featured Media - One Column 

 

 [ 

 

 

 ](/)#### Featured Media Title Lorem Ipsum

 [Button Text](/) 

 

 

 

 

 

#### Mauris Pharetra Et Ultrices

Faucibus purus in massa tempor. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Pharetra diam sit amet nisl suscipit adipiscing bibendum.

 

 

 

 



 

 

 

 

 

  



 ### Media Embed - One Column