Content

Code Block

Drop in raw HTML, CSS or JS exactly as written.

Live demo

See it in action

HTML / Markup — beautified + highlighted

<nav class="navbar">
	<a class="brand" href="/">UnysonPlus</a>
	<ul class="menu">
		<li><a href="/docs">Docs</a></li>
		<li><a href="/demos">Demos</a></li>
	</ul>
</nav>

CSS

.btn-primary {
	background: var(--brand);
	border-radius: 8px;
	padding: 0.6rem 1.2rem;
	transition: transform 0.15s ease;
}
.btn-primary:hover { transform: translateY(-2px); }

JavaScript

document.querySelectorAll('.accordion-title').forEach((el) => {
	el.addEventListener('click', () => {
		el.closest('.accordion-item').classList.toggle('is-open');
	});
});

PHP

add_filter( 'fw_shortcode_map_provider', function ( $providers ) {
	$providers['events'] = [ 'callback' => 'my_event_locations' ];
	return $providers;
} );

JSON

{"name":"unysonplus","license":"GPL-2.0-or-later","elements":60,"free":true}

Shell / Bash

# Install and activate the framework
wp plugin install unysonplus --activate
wp theme activate unysonplus-theme

Render-as-Code OFF — the markup runs as a live widget

Rendered live
With Render-as-Code off, the markup runs as a real widget instead of being shown.

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<pre class="code-block__pre"><code class="language-markup">&lt;nav class=&quot;navbar&quot;&gt;&#10;	&lt;a class=&quot;brand&quot; href=&quot;/&quot;&gt;UnysonPlus&lt;/a&gt;&#10;	&lt;ul class=&quot;menu&quot;&gt;&#10;		&lt;li&gt;&lt;a href=&quot;/docs&quot;&gt;Docs&lt;/a&gt;&lt;/li&gt;&#10;	&lt;/ul&gt;&#10;&lt;/nav&gt;</code></pre>
			</div>
		</div>
	</div>
</section>

To learn more about the Code Block shortcode, please check out the online manual here.

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free