diff --git a/dist/blog/2020/03/08/hello-world/index.html b/dist/blog/2020/03/08/hello-world/index.html
index 79a895f..c726e51 100644
--- a/dist/blog/2020/03/08/hello-world/index.html
+++ b/dist/blog/2020/03/08/hello-world/index.html
@@ -117,31 +117,31 @@
 
   
     
+
   
     
-  <div class="widget-wrap">
-    <h3 class="widget-title">Archives</h3>
-    <div class="widget">
-      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">mars 2020</a></li></ul>
+  <div class="card card-primary">
+    <div class="card-header">Archives</div>
+    <div class="card-menu">
+      <a class="menu-element-link" href="/blog/archives/2020/03/">mars 2020</a>
     </div>
   </div>
 
 
   
     
-  <div class="widget-wrap">
-    <h3 class="widget-title">Articles récents</h3>
-    <div class="widget">
-      <ul>
+  <div class="card card-primary">
+    <div class="card-header">Articles récents</div>
+    <div class="card-menu">
         
-          <li>
-            <a href="/blog/2020/03/08/hello-world/">Hello World</a>
-          </li>
+            <a class="menu-element" href="/blog/2020/03/08/hello-world/">
+              <span class="trim-that">Hello World</span>
+            </a>
         
-      </ul>
     </div>
   </div>
 
+
   
 </div>
 
diff --git a/dist/blog/archives/2020/03/index.html b/dist/blog/archives/2020/03/index.html
index 94a0945..4c4c1ab 100644
--- a/dist/blog/archives/2020/03/index.html
+++ b/dist/blog/archives/2020/03/index.html
@@ -99,31 +99,31 @@
 
   
     
+
   
     
-  <div class="widget-wrap">
-    <h3 class="widget-title">Archives</h3>
-    <div class="widget">
-      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">mars 2020</a></li></ul>
+  <div class="card card-primary">
+    <div class="card-header">Archives</div>
+    <div class="card-menu">
+      <a class="menu-element-link" href="/blog/archives/2020/03/">mars 2020</a>
     </div>
   </div>
 
 
   
     
-  <div class="widget-wrap">
-    <h3 class="widget-title">Articles récents</h3>
-    <div class="widget">
-      <ul>
+  <div class="card card-primary">
+    <div class="card-header">Articles récents</div>
+    <div class="card-menu">
         
-          <li>
-            <a href="/blog/2020/03/08/hello-world/">Hello World</a>
-          </li>
+            <a class="menu-element" href="/blog/2020/03/08/hello-world/">
+              <span class="trim-that">Hello World</span>
+            </a>
         
-      </ul>
     </div>
   </div>
 
+
   
 </div>
 
diff --git a/dist/blog/archives/2020/index.html b/dist/blog/archives/2020/index.html
index 4252c84..40ff15b 100644
--- a/dist/blog/archives/2020/index.html
+++ b/dist/blog/archives/2020/index.html
@@ -99,31 +99,31 @@
 
   
     
+
   
     
-  <div class="widget-wrap">
-    <h3 class="widget-title">Archives</h3>
-    <div class="widget">
-      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">mars 2020</a></li></ul>
+  <div class="card card-primary">
+    <div class="card-header">Archives</div>
+    <div class="card-menu">
+      <a class="menu-element-link" href="/blog/archives/2020/03/">mars 2020</a>
     </div>
   </div>
 
 
   
     
-  <div class="widget-wrap">
-    <h3 class="widget-title">Articles récents</h3>
-    <div class="widget">
-      <ul>
+  <div class="card card-primary">
+    <div class="card-header">Articles récents</div>
+    <div class="card-menu">
         
-          <li>
-            <a href="/blog/2020/03/08/hello-world/">Hello World</a>
-          </li>
+            <a class="menu-element" href="/blog/2020/03/08/hello-world/">
+              <span class="trim-that">Hello World</span>
+            </a>
         
-      </ul>
     </div>
   </div>
 
+
   
 </div>
 
diff --git a/dist/blog/archives/index.html b/dist/blog/archives/index.html
index 7859a5c..6a9c34c 100644
--- a/dist/blog/archives/index.html
+++ b/dist/blog/archives/index.html
@@ -99,31 +99,31 @@
 
   
     
+
   
     
-  <div class="widget-wrap">
-    <h3 class="widget-title">Archives</h3>
-    <div class="widget">
-      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">mars 2020</a></li></ul>
+  <div class="card card-primary">
+    <div class="card-header">Archives</div>
+    <div class="card-menu">
+      <a class="menu-element-link" href="/blog/archives/2020/03/">mars 2020</a>
     </div>
   </div>
 
 
   
     
-  <div class="widget-wrap">
-    <h3 class="widget-title">Articles récents</h3>
-    <div class="widget">
-      <ul>
+  <div class="card card-primary">
+    <div class="card-header">Articles récents</div>
+    <div class="card-menu">
         
-          <li>
-            <a href="/blog/2020/03/08/hello-world/">Hello World</a>
-          </li>
+            <a class="menu-element" href="/blog/2020/03/08/hello-world/">
+              <span class="trim-that">Hello World</span>
+            </a>
         
-      </ul>
     </div>
   </div>
 
+
   
 </div>
 
diff --git a/dist/blog/index.html b/dist/blog/index.html
index ff587ad..a88c77d 100644
--- a/dist/blog/index.html
+++ b/dist/blog/index.html
@@ -117,31 +117,31 @@
 
   
     
+
   
     
-  <div class="widget-wrap">
-    <h3 class="widget-title">Archives</h3>
-    <div class="widget">
-      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/03/">mars 2020</a></li></ul>
+  <div class="card card-primary">
+    <div class="card-header">Archives</div>
+    <div class="card-menu">
+      <a class="menu-element-link" href="/blog/archives/2020/03/">mars 2020</a>
     </div>
   </div>
 
 
   
     
-  <div class="widget-wrap">
-    <h3 class="widget-title">Articles récents</h3>
-    <div class="widget">
-      <ul>
+  <div class="card card-primary">
+    <div class="card-header">Articles récents</div>
+    <div class="card-menu">
         
-          <li>
-            <a href="/blog/2020/03/08/hello-world/">Hello World</a>
-          </li>
+            <a class="menu-element" href="/blog/2020/03/08/hello-world/">
+              <span class="trim-that">Hello World</span>
+            </a>
         
-      </ul>
     </div>
   </div>
 
+
   
 </div>
 
diff --git a/dist/style.css b/dist/style.css
index f05f060..5a85d0e 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -880,7 +880,7 @@ ul.social {
   .card-menu, .menu-menu {
     display: flex;
     flex-direction: column; }
-    .card-menu .menu-element, .menu-menu .menu-element {
+    .card-menu .menu-element, .card-menu .menu-element-link, .menu-menu .menu-element, .menu-menu .menu-element-link {
       display: flex;
       line-height: 1.5rem;
       padding-right: 0.75rem;
@@ -896,7 +896,7 @@ ul.social {
       position: relative;
       z-index: 1;
       overflow: visible; }
-      .card-menu .menu-element:before, .menu-menu .menu-element:before {
+      .card-menu .menu-element:before, .card-menu .menu-element-link:before, .menu-menu .menu-element:before, .menu-menu .menu-element-link:before {
         content: " ";
         position: absolute;
         top: 0;
diff --git a/src/blog/themes/blog/layout/_widget/archive.ejs b/src/blog/themes/blog/layout/_widget/archive.ejs
index a20c58c..c80bbe4 100644
--- a/src/blog/themes/blog/layout/_widget/archive.ejs
+++ b/src/blog/themes/blog/layout/_widget/archive.ejs
@@ -1,8 +1,9 @@
 <% if (site.posts.length){ %>
-  <div class="widget-wrap">
-    <h3 class="widget-title"><%= __('archive_a') %></h3>
-    <div class="widget">
-      <%- list_archives({show_count: theme.show_count, type: theme.archive_type}) %>
+  <div class="card card-primary">
+    <div class="card-header"><%= __('archive_a') %></div>
+    <div class="card-menu">
+      <%- list_archives({show_count: theme.show_count,
+        type: theme.archive_type, style:"flat", class:"menu-element"}) %>
     </div>
   </div>
 <% } %>
diff --git a/src/blog/themes/blog/layout/_widget/category.ejs b/src/blog/themes/blog/layout/_widget/category.ejs
index 8d9e5e9..039ce28 100644
--- a/src/blog/themes/blog/layout/_widget/category.ejs
+++ b/src/blog/themes/blog/layout/_widget/category.ejs
@@ -1,7 +1,7 @@
 <% if (site.categories.length){ %>
-  <div class="widget-wrap">
-    <h3 class="widget-title"><%= __('categories') %></h3>
-    <div class="widget">
+  <div class="card card-primary">
+    <div class="card-header"><%= __('categories') %></div>
+    <div class="card-menu">
       <%- list_categories({show_count: theme.show_count}) %>
     </div>
   </div>
diff --git a/src/blog/themes/blog/layout/_widget/recent_posts.ejs b/src/blog/themes/blog/layout/_widget/recent_posts.ejs
index 7a38547..abf9ce0 100644
--- a/src/blog/themes/blog/layout/_widget/recent_posts.ejs
+++ b/src/blog/themes/blog/layout/_widget/recent_posts.ejs
@@ -1,14 +1,12 @@
 <% if (site.posts.length){ %>
-  <div class="widget-wrap">
-    <h3 class="widget-title"><%= __('recent_posts') %></h3>
-    <div class="widget">
-      <ul>
+  <div class="card card-primary">
+    <div class="card-header"><%= __('recent_posts') %></div>
+    <div class="card-menu">
         <% site.posts.sort('date', -1).limit(5).each(function(post){ %>
-          <li>
-            <a href="<%- url_for(post.path) %>"><%= post.title || '(no title)' %></a>
-          </li>
+            <a class="menu-element" href="<%- url_for(post.path) %>">
+              <span class="trim-that"><%= post.title || '(no title)' %></span>
+            </a>
         <% }) %>
-      </ul>
     </div>
   </div>
-<% } %>
\ No newline at end of file
+<% } %>
diff --git a/src/blog/themes/blog/layout/_widget/tag.ejs b/src/blog/themes/blog/layout/_widget/tag.ejs
index ea5fb2c..b290bf9 100644
--- a/src/blog/themes/blog/layout/_widget/tag.ejs
+++ b/src/blog/themes/blog/layout/_widget/tag.ejs
@@ -1,7 +1,7 @@
 <% if (site.tags.length){ %>
-  <div class="widget-wrap">
-    <h3 class="widget-title"><%= __('tags') %></h3>
-    <div class="widget">
+  <div class="card card-primary">
+    <h3 class="card-header"><%= __('tags') %></h3>
+    <div class="card-menu">
       <%- list_tags({show_count: theme.show_count}) %>
     </div>
   </div>
diff --git a/src/blog/themes/blog/layout/_widget/tagcloud.ejs b/src/blog/themes/blog/layout/_widget/tagcloud.ejs
index 5feb435..b9f4eb1 100644
--- a/src/blog/themes/blog/layout/_widget/tagcloud.ejs
+++ b/src/blog/themes/blog/layout/_widget/tagcloud.ejs
@@ -1,8 +1,8 @@
 <% if (site.tags.length){ %>
-  <div class="widget-wrap">
-    <h3 class="widget-title"><%= __('tagcloud') %></h3>
-    <div class="widget tagcloud">
+  <div class="card card-primary">
+    <h3 class="card-header"><%= __('tagcloud') %></h3>
+    <div class="card-body tagcloud">
       <%- tagcloud() %>
     </div>
   </div>
-<% } %>
\ No newline at end of file
+<% } %>
diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss
index 3490e3f..ff89686 100644
--- a/src/scss/components/_cards.scss
+++ b/src/scss/components/_cards.scss
@@ -73,7 +73,7 @@ $card-smallpad: $lineheight_half;
     &-menu  {
         display:flex;
         flex-direction: column;
-        .menu-element {
+        .menu-element, .menu-element-link {
             display:flex;
             line-height:$lineheight;
             padding-right:$lineheight_half;