diff --git a/resources/sass/components/_facets.scss b/resources/sass/components/_facets.scss
new file mode 100644
index 0000000000000000000000000000000000000000..64735bcc41f4129bcd4b3367fc3c5f13bb2ff7ec
--- /dev/null
+++ b/resources/sass/components/_facets.scss
@@ -0,0 +1,6 @@
+.facets-widget-checkbox .item-list__checkbox,
+.facets-widget-links .item-list__links,
+.facets-widget-date_range .item-list__date_range {
+ padding-left: 0;
+ list-style-type: none;
+}
diff --git a/resources/sass/default.style.scss b/resources/sass/default.style.scss
index 174375ee2544193645a2f8e150ded78c7df6557d..6d068356fec4e3840b1a0ebbc0225d20bc9b0447 100644
--- a/resources/sass/default.style.scss
+++ b/resources/sass/default.style.scss
@@ -7,6 +7,7 @@
// Component
// -----------------------------------------------------------------------------
@import "components/my.component";
+@import "components/facets";
// Other
// -----------------------------------------------------------------------------
diff --git a/templates/facets/block--facets.html.twig b/templates/facets/block--facets.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..789350c8b6ab497471c241c7097d4a21c5ccf924
--- /dev/null
+++ b/templates/facets/block--facets.html.twig
@@ -0,0 +1,16 @@
+{#
+/**
+ * @file
+ * Override to alter the label rendering.
+ */
+#}
+<div{{ attributes.addClass('mb-3') }}>
+ {{ title_prefix }}
+ {% if label %}
+ <legend {{ title_attributes.addClass('col-form-label') }}><span class="fieldset-legend">{{ label }}</span></legend>
+ {% endif %}
+ {{ title_suffix }}
+ {% block content %}
+ {{ content }}
+ {% endblock %}
+</div>
diff --git a/templates/facets/facets-item-list.html.twig b/templates/facets/facets-item-list.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..944a666e4e4f1aa9efd6d53a8d9dc3bf990beae2
--- /dev/null
+++ b/templates/facets/facets-item-list.html.twig
@@ -0,0 +1,38 @@
+{#
+/**
+ * @file
+ * Override facets item lists, alter title, inject classes.
+ */
+#}
+<div class="facets-widget- {{- facet.widget.type -}} ">
+ {% if facet.widget.type -%}
+ {%- set attributes = attributes.addClass('item-list__' ~ facet.widget.type) %}
+ {%- endif %}
+ {% if facet.widget.type == 'dropdown' -%}
+ {%- set attributes = attributes.addClass('form-select') %}
+ {%- endif %}
+ {% if items or empty %}
+ {%- if title is not empty -%}
+ {% block title %}
+ <legend class="col-form-label"><span class="fieldset-legend">{{ title }}</span></legend>
+ {% endblock %}
+ {%- endif -%}
+
+ {%- set list_margin = facet.widget.type == 'links' ? 'mb-1' : 'mb-2' %}
+ {% block content %}
+ {%- if items -%}
+ <{{ list_type }}{{ attributes }}>
+ {%- for item in items -%}
+ <li{{ item.attributes.addClass(list_margin) }}>{{ item.value }}</li>
+ {%- endfor -%}
+ </{{ list_type }}>
+ {%- else -%}
+ {{- empty -}}
+ {%- endif -%}
+ {% endblock %}
+ {%- endif %}
+
+{% if facet.widget.type == "dropdown" %}
+ <label id="facet_{{ facet.id }}_label">{{ 'Facet'|t }} {{ facet.label }}</label>
+{%- endif %}
+</div>
diff --git a/templates/facets/facets-result-item--checkbox.html.twig b/templates/facets/facets-result-item--checkbox.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..2e53e787cdddbbd86fc9af657db983148c822273
--- /dev/null
+++ b/templates/facets/facets-result-item--checkbox.html.twig
@@ -0,0 +1,13 @@
+{#
+/**
+ * @file
+ * Override to alter the label rendering.
+ */
+#}
+{% if is_active %}
+ <span class="facet-item__status js-facet-deactivate">(-)</span>
+{% endif %}
+ <span class="ms-2 form-check-label facet-item__value">{{ value }}</span>
+{% if show_count %}
+ <span class="facet-item__count">({{ count }})</span>
+{% endif %}
diff --git a/templates/overrides/search/facets-result-item.html.twig b/templates/overrides/search/facets-result-item--summary.html.twig
similarity index 100%
rename from templates/overrides/search/facets-result-item.html.twig
rename to templates/overrides/search/facets-result-item--summary.html.twig
diff --git a/tests/src/Functional/FacetsRenderTest.php b/tests/src/Functional/FacetsRenderTest.php
new file mode 100644
index 0000000000000000000000000000000000000000..2ef8cecb5c74018da55d347212c8c33f7c20517e
--- /dev/null
+++ b/tests/src/Functional/FacetsRenderTest.php
@@ -0,0 +1,157 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\Tests\oe_whitelabel\Functional;
+
+use Drupal\facets\Entity\Facet;
+use Drupal\facets_summary\Entity\FacetsSummary;
+use Drupal\Tests\facets\Functional\BlockTestTrait;
+use Drupal\Tests\facets\Functional\ExampleContentTrait;
+use Drupal\Tests\sparql_entity_storage\Traits\SparqlConnectionTrait;
+
+/**
+ * Tests the Facets rendering.
+ */
+class FacetsRenderTest extends WhitelabelBrowserTestBase {
+
+ use BlockTestTrait;
+ use ExampleContentTrait;
+ use SparqlConnectionTrait;
+
+ /**
+ * {@inheritdoc}
+ */
+ protected static $modules = [
+ 'block',
+ 'facets_search_api_dependency',
+ 'facets_summary',
+ 'oe_whitelabel_helper',
+ ];
+
+ /**
+ * {@inheritdoc}
+ */
+ public function setUp(): void {
+ parent::setUp();
+ $this->setUpSparql();
+ $this->setUpExampleStructure();
+ $this->insertExampleContent();
+ $this->assertSame(5, $this->indexItems('database_search_index'));
+ }
+
+ /**
+ * Tests facets summary block rendering.
+ */
+ public function testFacetsSummaryBlock(): void {
+ $this->createFacet('Emu', 'emu', 'type', 'page_1', 'views_page__search_api_test_view', FALSE);
+ $facet = Facet::load('emu');
+ $facet->setOnlyVisibleWhenFacetSourceIsVisible(FALSE);
+ $facet->save();
+
+ FacetsSummary::create([
+ 'name' => 'Owl',
+ 'id' => 'owl',
+ 'facet_source_id' => 'search_api:views_page__search_api_test_view__page_1',
+ 'facets' => [
+ 'emu' => [
+ 'checked' => TRUE,
+ 'show_count' => FALSE,
+ ],
+ ],
+ 'processor_configs' => [
+ 'show_count' => [
+ 'processor_id' => 'show_count',
+ ],
+ ],
+ ])->save();
+
+ $block = $this->placeBlock('facets_summary_block:owl', ['region' => 'content']);
+ $this->drupalGet('search-api-test-fulltext');
+
+ $assert = $this->assertSession();
+ $assert->elementTextContains('css', 'main h4', $block->label());
+ $assert->elementTextContains('css', 'span.source-summary-count', '(5)');
+ }
+
+ /**
+ * Tests facets block rendering.
+ */
+ public function testFacetBlock(): void {
+ $this->createFacet('Emu', 'emu', 'type', 'page_1', 'views_page__search_api_test_view', TRUE);
+ $facet = Facet::load('emu');
+ $facet->setWidget('checkbox');
+ $facet->save();
+
+ $this->createFacet('Pingu', 'pingu', 'type', 'page_1', 'views_page__search_api_test_view', TRUE);
+ $facet = Facet::load('pingu');
+ $facet->setWidget('dropdown');
+ $facet->save();
+
+ $this->createFacet('Lulu', 'lulu');
+ $facet = Facet::load('lulu');
+ $facet->set('show_title', TRUE);
+ $facet->save();
+ $block = $this->blocks['lulu'];
+ $block->getPlugin()->setConfigurationValue('label_display', FALSE);
+ $block->save();
+
+ $this->drupalGet('search-api-test-fulltext');
+ $assert = $this->assertSession();
+ $block = $assert->elementExists('css', '#block-emu');
+ $this->assertTrue($block->hasClass('mb-3'));
+
+ // Assert the block title rendering.
+ $title_wrapper = $block->find('css', 'legend.col-form-label');
+ $this->assertNotNull($title_wrapper);
+ $title = $title_wrapper->find('css', 'span.fieldset-legend');
+ $this->assertNotNull($title);
+
+ // Assert the checkbox list rendering.
+ $list = $block->find('css', 'ul');
+ $this->assertFalse($list->hasClass('form-select'));
+ $items = $list->findAll('css', 'li.mb-2');
+ $this->assertCount(2, $items);
+
+ foreach ($items as $item) {
+ $label = $item->find('css', 'span.ms-2.form-check-label');
+ $this->assertNotNull($label);
+ }
+
+ // Assert the dropdown list rendering.
+ $block = $assert->elementExists('css', '#block-pingu');
+ $this->assertTrue($block->hasClass('mb-3'));
+
+ $list = $block->find('css', 'ul.form-select');
+ $items = $list->findAll('css', 'li.mb-2');
+ $this->assertCount(2, $items);
+
+ foreach ($items as $item) {
+ $label = $item->find('css', 'span');
+ $this->assertFalse($label->hasClass('form-check-label'));
+ $this->assertFalse($label->hasClass('ms-2'));
+ }
+
+ // Assert the links list rendering.
+ $block = $assert->elementExists('css', '#block-lulu');
+ $this->assertTrue($block->hasClass('mb-3'));
+
+ // Assert the facet title renders the same as block title.
+ $title_wrapper = $block->find('css', 'legend.col-form-label');
+ $this->assertNotNull($title_wrapper);
+ $title = $title_wrapper->find('css', 'span.fieldset-legend');
+ $this->assertNotNull($title);
+
+ $list = $block->find('css', 'ul');
+ $this->assertFalse($list->hasClass('form-select'));
+ $items = $list->findAll('css', 'li.mb-1');
+ $this->assertCount(2, $items);
+
+ foreach ($items as $item) {
+ $label = $item->find('css', 'span');
+ $this->assertFalse($label->hasClass('form-check-label'));
+ $this->assertFalse($label->hasClass('ms-2'));
+ }
+ }
+
+}
diff --git a/tests/src/Functional/FacetsSummaryTest.php b/tests/src/Functional/FacetsSummaryTest.php
deleted file mode 100644
index 80e14b6a96ef643d8c98bd535ae0dfc8cd371501..0000000000000000000000000000000000000000
--- a/tests/src/Functional/FacetsSummaryTest.php
+++ /dev/null
@@ -1,78 +0,0 @@
-<?php
-
-declare(strict_types = 1);
-
-namespace Drupal\Tests\oe_whitelabel\Functional;
-
-use Drupal\facets\Entity\Facet;
-use Drupal\facets_summary\Entity\FacetsSummary;
-use Drupal\Tests\facets\Functional\BlockTestTrait;
-use Drupal\Tests\facets\Functional\ExampleContentTrait;
-use Drupal\Tests\sparql_entity_storage\Traits\SparqlConnectionTrait;
-
-/**
- * Tests the Facets Summary rendering.
- */
-class FacetsSummaryTest extends WhitelabelBrowserTestBase {
-
- use BlockTestTrait;
- use ExampleContentTrait;
- use SparqlConnectionTrait;
-
- /**
- * {@inheritdoc}
- */
- protected static $modules = [
- 'block',
- 'facets_search_api_dependency',
- 'facets_summary',
- 'oe_whitelabel_helper',
- ];
-
- /**
- * {@inheritdoc}
- */
- public function setUp(): void {
- parent::setUp();
- $this->setUpSparql();
- $this->setUpExampleStructure();
- $this->insertExampleContent();
- $this->assertSame(5, $this->indexItems('database_search_index'));
- }
-
- /**
- * Tests facets summary block rendering.
- */
- public function testFacetsSummaryBlock(): void {
- $this->createFacet('Emu', 'emu', 'type', 'page_1', 'views_page__search_api_test_view', FALSE);
- $facet = Facet::load('emu');
- $facet->setOnlyVisibleWhenFacetSourceIsVisible(FALSE);
- $facet->setWidget('links');
- $facet->save();
-
- FacetsSummary::create([
- 'name' => 'Owl',
- 'id' => 'owl',
- 'facet_source_id' => 'search_api:views_page__search_api_test_view__page_1',
- 'facets' => [
- 'emu' => [
- 'checked' => TRUE,
- 'show_count' => FALSE,
- ],
- ],
- 'processor_configs' => [
- 'show_count' => [
- 'processor_id' => 'show_count',
- ],
- ],
- ])->save();
-
- $block = $this->placeBlock('facets_summary_block:owl', ['region' => 'content']);
- $this->drupalGet('search-api-test-fulltext');
-
- $assert = $this->assertSession();
- $assert->elementTextContains('css', 'main h4', $block->label());
- $assert->elementTextContains('css', 'span.source-summary-count', '(5)');
- }
-
-}