Blades

Black Blade - no bkg image

has white text

  • Blade bkg images do not scale. 
  • strongly suggest you fade edges to a bkg color.  These 3 defined colors will automatically change the color of the text in the blade to white or black.  These colors are:
    • grey: dcdcdc - with black text
    • off-black: 2d2d2d - with white text
    • black: 000000 - with white text
  • we can anchor the image to the right, left, or center
  • remember to size the image to fit the important imagery in the horizontal space required for the content...meaning, this blade is taller because there is more content in it, but notice the next couple of blades are very short because there is less content.  You need to account for that in your image size.  Also, some users will set their text size larger, in which case their blades will be taller.  Your should have enough image on the bottom to account for this possibility. 
  • Blade backgrounds can be dimmed - see the 5th blade below comparing it to the 6th blade.  All images will dim if the screensize is less than 1200 px wide (responsive setting) 

Off-Black Blade

has white text

  • 200x200 bkg image
  • placed flush right
  • notice if the image isn't tall enough to fill the full height of the blade, it will align right top
  • basically the bkg image will not scale, so conversely, if the image is too tall, it will crop from the bottom

Grey Blade

has dark text

  • same 200x200 bkg image
  • placed flush left

White Blade

has dark text

  • same 200x200 bkg image
  • placed flush center

With bkg image dimmed

4000px x 280px bkg image

  • This image has the same colors as the blade below, but it is dimmed in the cms.  Remember all bkg images will dim when screensize shrinks below 1200px

     

  • Also, if the content is higher than the bkg image, you will see the blade bkg color.  in this case the white bkg color was selected, so you see white below the colored boxes.

With bkg image not-dimmed

4000px x 500px bkg image

1200 px wide bkg image

1200 x 400

  • notice if you cut the image abruptly, the user will most likely see the edge.  You can use this as a design element if you want a T type of page,  full width header and centered narrower body content.

Sample text

Sample text

Sample text

4000 px wide bkg image

4000 x 500 with sizing overlays

  • 4000px x 500px
  • orange overlay at 1200px centered which is the full width of the content area
  • green overlay at 4000px centered. Note that is screen is wider than 4000px wide, the blade will show the bkg color or the bkg will repeat (configurable in cms).

4000 px wide bkg image

4000 x 500

Suggested blade background image formatting

  • 4000 px wide (same image as above without the green and orange sizing boxes)
  • image extended to edge
  • main image (TSC-7) not cut off on right so it renders nicer on screens wider than 1200.
  • adding
  • content
  • to
  • show
  • the
  • full
  • image
  • oops, too went to far...this is what that looks like!