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 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!