Class "grey" will give the div a grey background.
Columns do not have padding by default. You can add a 3% padding to any element by adding class "padded". This column is padded.
a class="button yellow-button" creates the buttons on the site.
You can nest columns inside other columns - just be sure to include the parent .flex-col
Here is the second nested column. It uses class "black" for a black background with white text.
Only this paragraph is padded.
Class "yellow" will give the div a yellow background.
Columns inside the same .flex-col parent will be the same height as the tallest column in that parent.
This is an h2
There is no margin set on heading or paragraph elements by default. You can use line breaks to increase spacing or use the CSS at the top of the page to set the margin.
You can use class "vertical-margin" to add a 3% margin to the top and bottom of any element. This paragraph has class="vertical-margin" added.
This is an h3
This h3 has a margin top and bottom of 15px set in the CSS on this page.
This is an h4
Adding a class of "side-margin" will add a 3% margin to the left and right of an element. Keep in mind the margin is 3% of the overall width of the element - so wider elements will have wider margins when using this method.
The margin on the paragraph above is applied directly to the paragraph element. Columns have a set left and right margin on their own.
This is an h5
The two classes can also be combined to add a 3% margin all the way around an element like this paragraph.
This text is here to see the margin of the element above.
This is an h6
Adding a class of "center" to any element will center all text inside of that element. This paragraph has "center" applied to it.
Adding a class of "justify" to any element will center all text inside of that element. This paragraph has "justify" applied to it. It also has "vertical-margin" applied to it. You can also bold text by wrapping it in a strong tag.
Adding a class of "circle" to the DIV containing an image will make that image match the circles from the home page. Just make sure the image dimensions are square.
This column has an example box shadow applied to it. The box shadow is defined in the styling at the top of this custom page. This is the box shadow from the sprint.com homepage.
This flex-col parent has a class of vertical-margin applied to it as well.
You can also include one column in a row. It should still be in a "col" div inside of a "flex-col" parent and inside of the overall content div. The content div constrains the page to 1280px wide and includes padding on the edges to prevent content from touch the sides of the screen.
Feel free to add any additional styling to the css at the top of the page.
Any div outside of the content div will stretch 100% of the page width.
This should be reserved for elements like banner images - or divs where the background should be full width.
This yellow background div is outside of the initial content div so it will stretch the full width of the page. These paragraphs are wrapped in a div with class "content" which keeps the content to 1280px wide.
This is a list of locations using the locations widget
This is a list of the latest jobs added using the widget.
|Sales Consultant-Bilingual||COACHELLA, CA US||11-21-2017|
|Sales Consultant-Bilingual||COVINA, CA US||11-21-2017|
|Retail Sales Consultant||SAN DIEGO, CA US||11-21-2017|
|Retail Sales Consultant||APPLE VALLEY, CA US||11-21-2017|
|RETAIL SALES SUPERVISOR||WEST COVINA, CA US||11-21-2017|