Placeholder

Guidance

The @uol-placeholder allows the loading of custom code within the component. This will act as a placeholder which can be used to position this code within design system pages.

Usage

Custom code can be passed through config using ‘content’: ‘{Custom Code here}’

<div class="uol-placeholder">{{ content | safe }}</div>
<div class="uol-placeholder">
    <p>Test</p>
</div>
  • Content:
    .uol-placeholder {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #51504C;
        aspect-ratio: 2 / 1;
    }
    
  • URL: /components/raw/uol-placeholder/_placeholder.scss
  • Filesystem Path: src/library/02-components/placeholder/_placeholder.scss
  • Size: 122 Bytes
{
  "content": "<p>Test</p>"
}