CSS Regions

Scenario 1: How to load in content and declare CSS Regions

Back to scenarios menu

Description

This code sample demonstrates how to create a data source using an iframe element and then flow that data into a CSS Region container to be distributed over the elements in that container.

Code

// CSS
.content-source {
    -ms-flow-into: content;
}

.s1-region {
    -ms-flow-from: content;

    width: 300px;
    height: 150px;
    border: 1px solid #ccc;
}

// HTML
<iframe class="content-source" src="content.html"></iframe>
<div class="s1-region"></div>
<div class="s1-region"></div>
<div class="s1-region"></div>

Result