Color Block Guidelines

These color blocks are used throughout the site. The size varies, depending on the use case on each page. The background color uses the secondary color on the top nav, which is pulled automatically. 

Full width: Option 1

Title here

[Texts here] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ligula nibh, efficitur nec ex vel, blandit tempor turpis. Sed suscipit lacus justo, eget aliquam odio maximus a. Fusce sit amet libero eget ante pellentesque euismod sit amet euismod nisl.

Preview of the code used to create: Full width: option 1

<div class="color-block">
    <p class="cb-title">
    Title Here
  </p>
    <p class="cb-text">
    Texts here
  </p>
  <input class="cb-button" type=button onClick="parent.location='http://www.ascnyc.org/docs/files/ASCNYC%20Impact%20Update%202015.pdf'" value='Button text here'>
  
</div>
 

Full width: Option 2

Title here

[Texts here] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin, ligula eget aliquet venenatis, sapien lacus dictum diam, vitae interdum dui risus nec odio. Vivamus sollicitudin lobortis libero sed dictum. Cras volutpat semper ligula. Duis fermentum, orci porttitor tempus consequat, lacus orci consectetur lectus, eget auctor risus sapien ut justo. Quisque libero lacus, mattis sit amet mauris in, volutpat mattis felis. Nullam aliquet, neque vitae hendrerit placerat, urna ligula luctus purus, sed varius nisl odio in lorem.

Preview of the code used to create: Full width: option 2

<div class="color-block">
    <p class="cb-title">
    Title here
  </p>
    <p class="cb-text">
    Texts here
  </p>
</div>

Half width: Option 1

Title here

Texts here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ligula nibh, efficitur nec ex vel, blandit tempor turpis.

Preview of the code used to create:
Half width: option 1

<div class="color-block">
    <p class="cb-title">
    Title here
  </p>
    <p class="cb-text">
    Texts here
  </p>
  <input class="cb-button" type=button onClick="parent.location='http://www.ascnyc.com/'" value='Button text here'>
  
</div>
 

Half width: Option 2

Title here

[Texts here] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ligula nibh, efficitur nec ex vel, blandit tempor turpis. Sed suscipit lacus justo, eget aliquam odio maximus

Preview of the code used to create:
Half width: option 2

<div class="color-block">
    <p class="cb-title">
    Title here
  </p>
    <p class="cb-text">
    Texts here
  </p>
  <input class="cb-button" type=button onClick="parent.location='http://www.ascnyc.com/'" value='Button text here'>
  
 <input class="cb-button" type=button onClick="parent.location='http://www.ascnyc.com/'" value='button text here'>
</div>
 

Half width: Option 3

Title here

[Texts here] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ligula nibh, efficitur nec ex vel, blandit tempor turpis. Sed suscipit lacus justo, eget aliquam odio maximus.

Preview of the code used to create:
Half width: option 3

<div class="color-block">
    <p class="cb-title">
     Title here
  </p>
    <p class="cb-text">
    Texts here
  </p>
</div>

Side 

Bold text here:
Sentence
Sentence
email here

Preview of the code used
to create: Side 

<div class="color-block">
    <p class="cb-text">
    <b>Bold text here:</b>
      <br>
      Sentence
      <br>
      Sentence
      <br> 
      <a href="mailto:email here">email here</a>
  </p>
</div>