<div class="c-input c-input--horizontal">
<label class="c-input__label">Blocks field</label>
<div class="c-input__controls">
<div class="c-blocksfield">
<div class="c-blocksfield__blocks">
<div class="c-blocksfield__block">
<div class="c-blocksfield-form">
<div class="c-blocksfield-form__view">
<img src="https://source.unsplash.com/random/800x400" />
</div>
<div class="c-blocksfield-form__edit">...</div>
</div>
<div class="c-blocksfield__controls">
<div class="c-button-group">
<button type="button" class="c-button c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-trash"></i>
</button>
<button type="button" class="c-button drag-handle c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-drag"></i>
</button>
</div>
</div>
</div>
<div class="c-blocksfield__block">
<div class="c-blocksfield-text">
<div class="c-blocksfield-text__formatting">...</div>
<div class="c-blocksfield-text__editor">
<p>
This is a text block with a
<span class="u-placeholder">{placeholder}</span>
</p>
</div>
<div class="c-toolbar c-blocksfield-text__footer">...</div>
</div>
<div class="c-blocksfield__controls">
<div class="c-button-group">
<button type="button" class="c-button c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-trash"></i>
</button>
<button type="button" class="c-button drag-handle c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-drag"></i>
</button>
</div>
</div>
</div>
</div>
<div class="c-dropdown c-blocksfield__add">
<div class="c-dropdown__trigger">
<button type="button" class="c-button c-button--default c-button--small">
<i class="c-button__icon icon icon-add"></i>
<div class="c-button__label">Add block</div>
<i class="c-button__caret icon icon-caret-down"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">Image block (focus state)</label>
<div class="c-input__controls">
<div class="c-blocksfield">
<div class="c-blocksfield__blocks">
<div class="c-blocksfield__block c-blocksfield__block--expanded">
<div class="c-blocksfield-form">
<div class="c-blocksfield-form__view">...</div>
<div class="c-blocksfield-form__edit">
<div class="c-input c-input--horizontal">
<label class="c-input__label c-input__label--extra-small">
Image
</label>
<div class="c-input__controls">
<div class="c-input-group">
<div class="c-image-thumbnail">
<img src="https://source.unsplash.com/random/800x400" class="c-image-thumbnail__image" />
</div>
<div class="c-input">
<div class="c-input__controls">
<button type="button" class="c-button c-button--default">
<i class="c-button__icon icon icon-image"></i>
<div class="c-button__label">Change…</div>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label c-input__label--extra-small">Alignment
</label>
<div class="c-input__controls">
<div class="c-select-wrapper">
<select class="c-select">
<option>Left</option>
<option>Center</option>
<option>Right</option>
<option>Justify</option>
</select>
<i class="c-select__caret icon icon-caret-down"></i>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label c-input__label--extra-small">Alt text
</label>
<div class="c-input__controls">
<div class="c-textfield-wrapper">
<input value="Orchestra" class="c-textfield" type="text" />
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label c-input__label--extra-small">Link URL
</label>
<div class="c-input__controls">
<div placeholder="https://" class="c-textfield-wrapper c-textfield-wrapper--icon">
<input placeholder="https://" class="c-textfield" type="text" value="" />
<i class="c-textfield__icon icon icon-link"></i>
</div>
</div>
</div>
<div class="c-input">
<div class="c-input__controls">
<div class="c-toolbar">
<div class="c-toolbar__right">
<div class="c-button-group">
<button type="button" class="c-button c-button--subtle">
<div class="c-button__label">Cancel</div>
</button>
<button type="button" class="c-button c-button--primary">
<div class="c-button__label">Update</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-blocksfield__controls">
<div class="c-button-group">
<button type="button" class="c-button c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-trash"></i>
</button>
<button type="button" class="c-button drag-handle c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-drag"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">Text block (focus state)</label>
<div class="c-input__controls">
<div class="c-blocksfield">
<div class="c-blocksfield__blocks">
<div class="c-blocksfield__block c-blocksfield__block--expanded">
<div class="c-blocksfield-text">
<div class="c-blocksfield-text__formatting">
<div class="c-button-group">
<button type="button" class="c-button c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-bold"></i>
</button>
<button type="button" class="c-button c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-emoji"></i>
</button>
<button type="button" class="c-button c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-placeholder"></i>
</button>
</div>
</div>
<div contenteditable="true" class="c-blocksfield-text__editor">
<p>
This is a text block with a
<span class="u-placeholder">{placeholder}</span>
</p>
</div>
<div class="c-toolbar c-blocksfield-text__footer">
<div class="c-toolbar__right">
<div class="c-button-group">
<button type="button" class="c-button c-button--subtle">
<div class="c-button__label">Cancel</div>
</button>
<button type="button" class="c-button c-button--primary">
<div class="c-button__label">Update</div>
</button>
</div>
</div>
</div>
</div>
<div class="c-blocksfield__controls">
<div class="c-button-group">
<button type="button" class="c-button c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-trash"></i>
</button>
<button type="button" class="c-button drag-handle c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-drag"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-input c-input--horizontal">
<label class="c-input__label">Text block (dropping state)</label>
<div class="c-input__controls">
<div class="c-blocksfield">
<div class="c-blocksfield__blocks">
<div class="c-blocksfield__block is-ghost">
<div class="c-blocksfield-text">
<div class="c-blocksfield-text__editor">
<p>The dragged block will be dropped here.</p>
</div>
</div>
<div class="c-blocksfield__controls">
<div class="c-button-group">
<button type="button" class="c-button c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-trash"></i>
</button>
<button type="button" class="c-button drag-handle c-button--subtle c-button--extra-small c-button--icon">
<i class="c-button__icon icon icon-drag"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>