ckeditor5-image-upload-base64/docs/_snippets/framework/tutorials/block-widget.html

The development environment of CKEditor 5 – the best browser-based rich text editor.

<style>
	.simple-box {
		padding: 10px;
		margin: 1em 0;

		background: rgba( 0, 0, 0, 0.1 );
		border: solid 1px hsl(0, 0%, 77%);
		border-radius: 2px;
	}

	.simple-box-title, .simple-box-description {
		padding: 10px;
		margin: 0;

		background: #FFF;
		border: solid 1px hsl(0, 0%, 77%);
	}

	.simple-box-title {
		margin-bottom: 10px;
	}
</style>

<div id="snippet-block-widget">
	<p>This is a simple box:</p>

	<section class="simple-box">
		<h1 class="simple-box-title">Box title</h1>
		<div class="simple-box-description">
			<p>The description goes here.</p>
			<ul>
				<li>It can contain lists,</li>
				<li>and other block elements like headings.</li>
			</ul>
		</div>
	</section>
</div>