cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="infopanel is-active">
	<h2 class="tile__headline">Lorem ipsum dolor sit amet.</h2>

	<div class="tile__system tile--layout9">

		<div class="tile__content tile__style--default">
			<h3>Lorem ipsum dolor.</h3>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, commodi, cumque. Eum iste provident, distinctio odit sed officia. Enim fugit, illo, eum eos neque hic adipisci explicabo labore earum provident odit, numquam doloribus reprehenderit alias consequuntur. </p>
			
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis enim debitis velit, fugit magnam, perspiciatis blanditiis expedita consequuntur ducimus ipsa possimus ipsum amet. Saepe, nihil.</p>
		</div>

		<div class="tile__content tile__style--alternate">
			<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, minima.</h3>

			<h3>Lorem</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque sit minima consequuntur atque tempora magnam commodi, ducimus velit ex recusandae molestiae cumque, necessitatibus sint fugit illo, praesentium dolorem earum non.</p>
			<h3>Lorem</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>

		<div class="tile__content tile__style--default">
			<h3>Lorem ipsum dolor sit amet, consectetur.</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, debitis quod qui a quisquam ad sit excepturi rem expedita numquam, cumque eius. Natus ullam beatae ipsa vero, blanditiis quidem optio quia sapiente mollitia. Quos rem exercitationem
				explicabo dolorem! Maxime, nihil facere magni repudiandae mollitia consequuntur nulla pariatur minus dignissimos ab, architecto iusto numquam eum harum suscipit laborum fuga, ipsum sint inventore. Perferendis quam esse nesciunt eos aut dolore provident
				optio.</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit aut consectetur at obcaecati laudantium corporis rerum modi architecto, incidunt quam quas vitae consequuntur perferendis quaerat, provident autem neque laboriosam quisquam dignissimos.
				Quaerat quis fuga doloribus laboriosam cumque, maiores, ut cum! Reprehenderit quaerat labore adipisci iusto. Facere nihil aliquam pariatur ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>

		<div class="tile__content tile__style--alternate">
			<img src="https://source.unsplash.com/category/objects/600x200" alt="graphic" />
		</div>

		<div class="tile__content tile__style--highlight">
			<blockquote>
				<q>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, provident.</q>
			</blockquote>
		</div>

	</div>

</div>
            
          
!
            
              .infopanel {
	background-color: #dee5e7;
	padding: 2rem;
	margin: 2rem;
}

.tile__headline {
	border-left: 4px solid #edf1f2;
	color: red;
	font-size: 2rem;
	font-weight: 300;
	padding-left: 0.5em;
	margin-top: 0;
}

.tile__content {
	padding: 1em;
	margin-bottom: 10px;

	@media (min-width: 50em) {
		margin-bottom: 0;
	}
}

.tile__style--default {
	background-color: #edf1f2;
}

.tile__style--alternate {
	background-color: #fff;
}

.tile__style--highlight {
	background-color: #003947;
	color: #fff;
}


@media (min-width: 50em) {
	.tile--layout9 {
		display: grid;
		grid-template-columns: 4fr 4fr 6fr;
		grid-gap: 10px;

		> :nth-child(3) {
			grid-row: 1 / span 2;
		}

		> :nth-child(4) {
			grid-column: 1 / span 2;
			grid-row: 2 / span 2;
		}

		> :nth-child(5) {
			grid-column: 3 / span 1;
			grid-row: 3 / span 1;
		}
	}

}


img {
	width: 100%;
	max-height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

blockquote {
	text-align: center;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 1em;
}

q {
	font-size: 1.25rem;
	align-self: center;
}



// defaults
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

h3:first-child,
p:first-child {
	margin-top: 0;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

blockquote {
	margin: 0;
}

q {
	quotes: '„' '“' '\2039' '\203A';
}
            
          
!
999px
Loading ..................

Console