Please note that this component is part of the One Leeds Design System project (also known as DS2). It is currently intended for use in sandbox, development and test environments only and must not be implemented in production.
The component intends to act as a wireframe/placeholder for when full page examples are required.
There are only two parameters for this component. The height of the component (in px) and text to be placed within the component.
'context': {
'height': '300',
'content': 'Wireframe component with configurable height (300px)'
}
<div class="ds2-placeholder" style="height: {{ height }}px ">
<p class="ds2-placeholder__text">{{ content | safe }}</p>
</div>
<div class="ds2-placeholder" style="height: px ">
<p class="ds2-placeholder__text">The quick brown fox jumps over the lazy dog.</p>
</div>
.ds2-placeholder {
font-family: uolInter, Arial, Helvetica, sans-serif;
width: calc(100% - 2px);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid $color-brand-black-20;
border-top: none;
background-image: repeating-linear-gradient(-45deg,
$color-brand-black-20 20px,
$color-brand-black-20 22px,
transparent 22px,
transparent 40px);
&__text {
background: $color-white;
padding: 10px;
font-size: $spacing-4;
}
}
{
"content": "The quick brown fox jumps over the lazy dog."
}