Placeholders

Placeholders let you substitute boxes instead of actual content on a page, so you can use this if you don't have text for a layout you're creating.

Setting Up

• placeholder, col-# width
  • placeholder(-SIZ)
    • SIZ: xs sm lg
  • placeholder-TYP
    • TYP: wave glow
• disabled aria-hidden="true" buttons

Try it

To use it you start by adding a placeholder class to text or button elements you want to be rendered as boxes. You should add a column width from 1-12 to specify the width of the container. The width will depend on the width available to the parent and because they're columns they will automatically appear side by side. You can add a d-block if you want it go to a next line.

If you type some content within the placeholder component, it will grow and shrink with the content. The size of the boxes will be controlled by the type of element, so an H1 would show up bigger than an h4.

You can also just specify some different sized heights by adding a placeholder class with a size parameter. Notice there's no medium because that's the default size without a size value.

You can also specify that a placeholder animate in one of two ways. Wave moves from side to size and glow sort of pulses the color

If you add the placeholder to a button component, you need to set it to disabled and the aria-hidden value to true.