diff --git a/src/Form/Type/UiElement/JobOfferUiElementType.php b/src/Form/Type/UiElement/JobOfferUiElementType.php
new file mode 100644
index 0000000..f1e74d0
--- /dev/null
+++ b/src/Form/Type/UiElement/JobOfferUiElementType.php
@@ -0,0 +1,89 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz's SyliusUiElementsPlugin for Sylius.
+ * (c) Monsieur Biz <sylius@monsieurbiz.com>
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusUiElementsPlugin\Form\Type\UiElement;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Attribute\AsUiElement;
+use MonsieurBiz\SyliusRichEditorPlugin\Attribute\TemplatesUiElement;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\WysiwygType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\Extension\Core\Type\UrlType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+#[AsUiElement(
+    code: 'monsieurbiz_ui_elements.job_offer_ui_element',
+    icon: 'clipboard',
+    title: 'monsieurbiz_ui_elements.ui_element.job_offer_ui_element.title',
+    description: 'monsieurbiz_ui_elements.ui_element.job_offer_ui_element.description',
+    templates: new TemplatesUiElement(
+        adminRender: '@MonsieurBizSyliusUiElementsPlugin/Admin/UiElement/job_offer_ui_element.html.twig',
+        frontRender: '@MonsieurBizSyliusUiElementsPlugin/Shop/UiElement/job_offer_ui_element.html.twig',
+    ),
+    wireframe: 'job-offer',
+)]
+final class JobOfferUiElementType extends AbstractType
+{
+    public const DISPLAY_SYNTHESIS = 'synthesis';
+
+    public const DISPLAY_COMPLETE = 'complete';
+
+    /**
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('display', ChoiceType::class, [
+                'label' => 'monsieurbiz_ui_elements.ui_element.job_offer_ui_element.fields.display',
+                'required' => true,
+                'constraints' => [
+                    new Assert\NotBlank(),
+                ],
+                'choices' => [
+                    'monsieurbiz_ui_elements.ui_element.job_offer_ui_element.choices.display.synthesis' => self::DISPLAY_SYNTHESIS,
+                    'monsieurbiz_ui_elements.ui_element.job_offer_ui_element.choices.display.complete' => self::DISPLAY_COMPLETE,
+                ],
+            ])
+            ->add('title', TextType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.title',
+                'required' => true,
+                'constraints' => [
+                    new Assert\NotBlank(),
+                ],
+            ])
+            ->add('contract', TextType::class, [
+                'label' => 'monsieurbiz_ui_elements.ui_element.job_offer_ui_element.fields.contract',
+                'required' => true,
+                'constraints' => [
+                    new Assert\NotBlank(),
+                ],
+            ])
+            ->add('localisation', TextType::class, [
+                'label' => 'monsieurbiz_ui_elements.ui_element.job_offer_ui_element.fields.localisation',
+                'required' => true,
+                'constraints' => [
+                    new Assert\NotBlank(),
+                ],
+            ])
+            ->add('content', WysiwygType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.content',
+                'required' => false,
+            ])
+            ->add('url', UrlType::class, [
+                'label' => 'monsieurbiz_ui_elements.ui_element.job_offer_ui_element.fields.url',
+                'required' => false,
+            ])
+        ;
+    }
+}
diff --git a/src/Resources/translations/messages.en.yaml b/src/Resources/translations/messages.en.yaml
index 5bd4f65..eb52646 100644
--- a/src/Resources/translations/messages.en.yaml
+++ b/src/Resources/translations/messages.en.yaml
@@ -93,3 +93,16 @@ monsieurbiz_ui_elements:
             buttons:
                 add_element: "Add element"
                 delete_element: "Delete element"
+        job_offer_ui_element:
+            title: "Job offer Element"
+            description: "Job offer with display in synthesis or complete"
+            choices:
+                display:
+                    synthesis: "Synthesis"
+                    complete: "Complete"
+            fields:
+                display: "Display"
+                contract: "Contract"
+                localisation: "Localisation"
+                content: "Content"
+                url: "Link"
diff --git a/src/Resources/translations/messages.fr.yaml b/src/Resources/translations/messages.fr.yaml
index 7c50a2b..7236535 100644
--- a/src/Resources/translations/messages.fr.yaml
+++ b/src/Resources/translations/messages.fr.yaml
@@ -93,3 +93,16 @@ monsieurbiz_ui_elements:
             buttons:
                 add_element: "Ajouter un élément"
                 delete_element: "Supprimer un élément"
+        job_offer_ui_element:
+            title: "Lame offre d'emploi"
+            description: "Affichage d'une offre d'emploi symntéthique ou complète"
+            choices:
+                display:
+                    synthesis: "Synthèse"
+                    complete: "Complète"
+            fields:
+                display: "Affichage"
+                contract: "Contrat"
+                localisation: "Localisation"
+                content: "Contenu"
+                url: "Lien"
diff --git a/src/Resources/views/Admin/UiElement/job_offer_ui_element.html.twig b/src/Resources/views/Admin/UiElement/job_offer_ui_element.html.twig
new file mode 100644
index 0000000..ea2b4a4
--- /dev/null
+++ b/src/Resources/views/Admin/UiElement/job_offer_ui_element.html.twig
@@ -0,0 +1,47 @@
+{#
+UI Element template
+type: job_offer_ui_element
+element fields:
+    - display
+    - title
+    - contract
+    - localisation
+    - content
+    - url
+#}
+<div class="ui segment">
+    {% if element.display == constant('MonsieurBiz\\SyliusUiElementsPlugin\\Form\\Type\\UiElement\\JobOfferUiElementType::DISPLAY_SYNTHESIS') %}
+        <a href="{{ element.url|default('#') }}" target="_blank" rel="noopener noreferrer">
+            {% if element.title|default('') is not empty %}
+                <h2>{{ element.title }}</h2>
+            {% endif %}
+            <div class="ui stackable grid">
+                {% if element.contract|default('') is not empty %}
+                    <div class="column"><i class="icon edit outline"></i>{{ element.contract }}</div>
+                {% endif %}
+                {% if element.localisation|default('') is not empty %}
+                    <div class="column"><i class="icon map marker alternate"></i>{{ element.localisation }}</div>
+                {% endif %}
+            </div>
+        </a>
+    {% elseif element.display == constant('MonsieurBiz\\SyliusUiElementsPlugin\\Form\\Type\\UiElement\\JobOfferUiElementType::DISPLAY_COMPLETE') %}
+        <div>
+            {% if element.title|default('') is not empty %}
+                <h2>{{ element.title }}</h2>
+            {% endif %}
+            <div class="ui stackable grid">
+                {% if element.contract|default('') is not empty %}
+                    <div class="column"><i class="icon edit outline"></i>{{ element.contract }}</div>
+                {% endif %}
+                {% if element.localisation|default('') is not empty %}
+                    <div class="column"><i class="icon map marker alternate"></i>{{ element.localisation }}</div>
+                {% endif %}
+            </div>
+            {% if element.content|default('') %}
+                <div class="content">
+                    {{ element.content|raw }}
+                </div>
+            {% endif %}
+        </div>
+    {% endif %}
+</div>
diff --git a/src/Resources/views/Shop/UiElement/job_offer_ui_element.html.twig b/src/Resources/views/Shop/UiElement/job_offer_ui_element.html.twig
new file mode 100644
index 0000000..0082103
--- /dev/null
+++ b/src/Resources/views/Shop/UiElement/job_offer_ui_element.html.twig
@@ -0,0 +1,47 @@
+{#
+UI Element template
+type: job_offer_ui_element
+element fields:
+    - display
+    - title
+    - contract
+    - localisation
+    - content
+    - url
+#}
+<div class="ui segment">
+    {% if element.display == constant('MonsieurBiz\\SyliusUiElementsPlugin\\Form\\Type\\UiElement\\JobOfferUiElementType::DISPLAY_SYNTHESIS') %}
+        <a href="{{ element.url|default('#') }}">
+            {% if element.title|default('') is not empty %}
+                <h2>{{ element.title }}</h2>
+            {% endif %}
+            <div class="ui stackable grid">
+                {% if element.contract|default('') is not empty %}
+                    <div class="column"><i class="icon edit outline"></i>{{ element.contract }}</div>
+                {% endif %}
+                {% if element.localisation|default('') is not empty %}
+                    <div class="column"><i class="icon map marker alternate"></i>{{ element.localisation }}</div>
+                {% endif %}
+            </div>
+        </a>
+    {% elseif element.display == constant('MonsieurBiz\\SyliusUiElementsPlugin\\Form\\Type\\UiElement\\JobOfferUiElementType::DISPLAY_COMPLETE') %}
+        <div>
+            {% if element.title|default('') is not empty %}
+                <h2>{{ element.title }}</h2>
+            {% endif %}
+            <div class="ui stackable grid">
+                {% if element.contract|default('') is not empty %}
+                    <div class="column"><i class="icon edit outline"></i>{{ element.contract }}</div>
+                {% endif %}
+                {% if element.localisation|default('') is not empty %}
+                    <div class="column"><i class="icon map marker alternate"></i>{{ element.localisation }}</div>
+                {% endif %}
+            </div>
+            {% if element.content|default('') %}
+                <div class="content">
+                    {{ element.content|raw }}
+                </div>
+            {% endif %}
+        </div>
+    {% endif %}
+</div>
diff --git a/src/Resources/views/Wireframe/job-offer.svg.twig b/src/Resources/views/Wireframe/job-offer.svg.twig
new file mode 100644
index 0000000..5a5d10d
--- /dev/null
+++ b/src/Resources/views/Wireframe/job-offer.svg.twig
@@ -0,0 +1,3 @@
+<svg width="230" height="100" viewBox="0 0 230 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="230" height="100" rx="5" fill="#7A8CCE" fill-opacity="0.1"></rect>
+</svg>