Components are reusable elements based on HTML components and the Lit framework.
<youtube-embed-consent> is a component to show a YouTube video where the user must give their consent before connecting to the YouTube servers. This is to comply with The Document Foundation’s privacy policy.
Download these two scripts: Lit core & YouTubeEmbedConsent.
Use something similar to the next template:
<!DOCTYPE html>
<html>
<head>
<script type="module" src="youtube-embed-consent.js"></script>
</head>
<body>
<div style="width: 600px">
<youtube-embed-consent videoid="TGH8MhtbrNU" placeholderimage="preview25_2.jpg"></youtube-embed-consent>
</div>
</body>
</hmtl>
<libreoffice-navbar> is a component to render the header and top navigation bar shown on this and other LibreOffice websites, use it to follow the same design and guidelines of other LibreOffice websites.
Download these two scripts: Lit core & LibreOffice Navbar.
It uses two slots, whatever is inside the tags is the default slot. But the element tagged with slot=“after-navbar” is a second slot that renders after the list of links.
Use something similar to the next template:
<!DOCTYPE html>
<html>
<head>
<script type="module" src="libreoffice-navbar.js"></script>
</head>
<body>
<libreoffice-navbar title="Websites" showDonate="true">
<li class="nav-item"><a href="/components/" class="nav-link">Components</a></li>
<li class="nav-item"><a href="/designsystem/" class="nav-link">Design system</a></li>
<select
slot="after-navbar"
id="selectLanguage"
class="form-select form-select-sm"
aria-label="Default select example"
style="transform: translateY(6px); color: var(--libreoffice-primary-color);"
>
<option
onclick="window.location = '/en/'"
value="en">English</option>
<option
onclick="window.location = '/es/'"
value="es">Español</option>
</select>
</libreoffice-navbar>
</body>
</hmtl>