Cochrane design system

Box: Default

No notes defined.

<div class="box ">
    <h5>This is a panel</h5>
    <p class="subheading">This is a panel</p>
</div>
 
{% set classString = '' %}
{% for modifier in modifiers %}
    {% set classString = classString ~ modifier %}
{% endfor %}

<div class="box {{ classString }}">
    <h5>This is a panel</h5>
    <p class="subheading">This is a panel</p>
</div>
  • Content: 
    .box {
	background: #fff;
	padding: 2rem;
	width: 100%;
	box-shadow: 0 1rem 1rem -0.75rem rgba(0,0,0,0.1);
	margin: 0 0 $spacing-2xl;
	box-sizing: border-box;
	@include typescale('xs');
	position: relative;
	z-index: 2;
	display: block;

	&.sub-box {
		background: $grey--lightest;
	}

	+ .sub-box {
		margin-top: -$spacing-2xl;
		z-index: 1;
	}

	&--blue {
		background: $primary;
		color: #fff;

		#{headings()} {
			color: #fff;
		}
	}

}

a.box {
	padding: 1rem;
	transition: all 0.2s;
	top: 0;
	color: $magenta;


	#{headings()} {
		color: $magenta;
		margin: 0 0 0.75rem;
		line-height: 1.3;
		text-decoration: underline;

		+ p {
			color: $navy;
		}
	}

	&:hover {
		box-shadow: 0 1rem 1rem -0.75rem rgba(0,0,0,0.2);
		top: -0.1rem;
		transform: scale(1.025);

		#{headings()} {
			color: $navy;
		}
	}
}

.page-section > .introbox:first-child {
	margin-top: -6.5rem;
}

.widebox {
	@media (min-width: map_get($breakpoint-stages, smalldesktop)) {
		padding-left: calc(11.11% + 1rem);
		padding-right: calc(11.11% + 1rem);
		padding-top: 3rem;
	}
	hr {
		background: #C0C0C0;
		height: 1px;
		width: calc(130.4% + 2em);
		margin-left: calc(-1em - 15.2%);

	}
}
  • URL: /components/raw/panel/_box.scss
  • Filesystem Path: app/components/02-components/box/_box.scss
  • Size: 1.2 KB