Casino
Concerts & More
Camas Club
Hotel
Spa
Dining & Bars
Shopping
Kids & Family
RV Resort
Calendar
NQRC Web Style Guide
Specs and more for the Northern Quest Website
IMAGE SPECS
It is extremely helpful to adhere to these naming guidelines for images uploaded into Craft CMS. Doing so will allow you to much more easily scan asset names to find your image.
- Make sure your file names are all lowercase with dashes instead of spaces.
- Because site uses a CDN (content distribution network), overwriting files with the same name won’t work. Adding a date to the end of the file name will allow you to keep track of the newest assets.
Card (aka Thumbnail): thumbnail-epic-woman-with-bigscreen-061118.jpg
Header: header-epic-woman-with-bigscreen-061118.jpg
Carousel: carousel-kgcc-proshop-golfclubs-061118.jpg
Save images using the sizing specs below and Adobe Photoshop’s "Save for web" with the preset for JPG:High Quality.
Images are uploaded through the Craft CMS and automatically optimized for you.
2200px wide X 1600px tall
Background images and textures will size and crop according to the device’s screen size.
2400px wide X 1600px tall - Image
1200px wide X 800px tall - Texture
Header Image Depth Options
- Biggest (Entire .PSD)
- Big
- Shallow
Standard Card Sizing
1300px wide X 850px tall
Long Box & Social Media Card Sizing
2650px wide X 850px tall
VIDEO SPECS
We’ve had the best results exporting a lossless version in the native dimensions of the video. Then using Handbrake, we resize the video to 1000px wide and try to keep a 16:9 ratio.
Compress using H.264 as an .MP4 file.
Background video and/or video that should autoplay cannot have audio. Make sure to render the final file with no audio.
All videos will need a fallback image for mobile devices.
COMPONENTS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nibh varius, consequat dui at, maximus neque. Donec elit arcu, vulputate non venenatis vel, egestas vel nunc. Curabitur rhoncus risus id tortor tincidunt, quis pellentesque mauris auctor. Proin mi sem, sagittis vitae ipsum ut, vehicula facilisis libero. Aliquam nec nulla et mauris lacinia rhoncus. Morbi eros felis, gravida quis imperdiet in, rutrum nec lorem. Proin tristique malesuada elit, sed tincidunt mauris finibus ac. Donec lobortis leo tempus velit mollis, sit amet pretium quam imperdiet. Suspendisse mauris orci, ultricies et aliquam in, dignissim non tortor. Donec eros risus, pulvinar pulvinar sagittis a, dignissim vitae purus. Sed facilisis eros lobortis metus suscipit viverra ut sit amet arcu. Cras tincidunt vitae quam eu vehicula.
-
Expander Heading
Expander Body Copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nibh varius, consequat dui at, maximus neque. Donec elit arcu, vulputate non venenatis vel, egestas vel nunc. Curabitur rhoncus risus id tortor tincidunt, quis pellentesque mauris auctor. Proin mi sem, sagittis vitae ipsum ut, vehicula facilisis libero. Aliquam nec nulla et mauris lacinia rhoncus. Morbi eros felis, gravida quis imperdiet in, rutrum nec lorem. Proin tristique malesuada elit, sed tincidunt mauris finibus ac. Donec lobortis leo tempus velit mollis, sit amet pretium quam imperdiet. Suspendisse mauris orci, ultricies et aliquam in, dignissim non tortor. Donec eros risus, pulvinar pulvinar sagittis a, dignissim vitae purus. Sed facilisis eros lobortis metus suscipit viverra ut sit amet arcu. Cras tincidunt vitae quam eu vehicula.
List Item
Another List Item
List Item with Body Copy
List item body copy example
Another List Item
H1 Heading
Sub-Heading
Sub-Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pulvinar magna ut mi convallis, rutrum faucibus ipsum efficitur. Phasellus fermentum arcu mauris, vel pulvinar augue dapibus sit amet.
SPECIAL CONTENT
Did You Know?’s are for highlighting unique and/or lesser-known factoids. These should be in some way contextual to the page the user is viewing.
They should also always begin with the heading "Did you know?".
The Camas Club block is for highlighting how the user can take advantage of their Camas Rewards card in context of the page they are browsing.
This style guide was created to help everyone involved in web projects maintain the site with greater ease.
Made by HANNA
