Full width bands

Full width band sections used for CTA's etc. Examples of these can be found in the kitchen-sink.php and _kitchen-sink.scss

Background colours are defined in the section class element (example shows primary colour):

class="m3-band your_colour"

<section class="m3-band primary">
<div class="m3-band-content-container">
  <header>
    <h2>Primary band title</h2>
  </header>
  <div class="m3-band-content">
    <p>Band content</p>
  </div>
  <footer>
    <a href="" class="button">A button</a>
  </footer>
  </div>
</section>

//Full width Bands sections
.m3-band {
	padding: 1rem 0;

	&.primary {
		background-color: map-get($foundation-palette, primary);
		color: $white;

		.button {
			background-color: $secondary-color;
			&:hover {
				background-color: scale-color($secondary-color, $lightness: -15%);
			}
		}//button
	}//primary

	&.secondary {
		background-color: map-get($foundation-palette, secondary);
		color: $white;
	}//secondary

	&.grey {
		background-color: $light-gray;
		color: $body-font-color;
	}//grey

	.m3-band-content-container {
		@include grid-row();
	}//m3-band-content-container

	header {
		@include grid-row();
		@include grid-column(12);
	}//header

	.m3-band-content {
		@include grid-row();
		@include grid-column(12);
	}//m3-band-content

	footer {
		@include grid-row();
		@include grid-column(12);
	}//footer

	.button {
		margin-top: 1rem;
	}//button

}//.m3-band