diff --git a/contents/_includes/patterns/sticky-footer.njk b/contents/_includes/patterns/sticky-footer.njk
new file mode 100644
index 0000000..70c7bae
--- /dev/null
+++ b/contents/_includes/patterns/sticky-footer.njk
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index b3ede1c..89d4792 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -116,6 +116,7 @@ eleventyExcludeFromCollections: true
{% pattern "Sidebar" %}{% include "patterns/sidebar.njk" %}{% endpattern %}
{% pattern "Simple grid" %}{% include "patterns/simple-grid.njk" %}{% endpattern %}
{% pattern "Split screen" %}{% include "patterns/split-screen.njk" %}{% endpattern %}
+ {% pattern "Sticky footer" %}{% include "patterns/sticky-footer.njk" %}{% endpattern %}
diff --git a/contents/sticky-footer.md b/contents/sticky-footer.md
new file mode 100644
index 0000000..dd28bdc
--- /dev/null
+++ b/contents/sticky-footer.md
@@ -0,0 +1,45 @@
+---
+layout: layouts/post.njk
+title: Sticky footer
+description: Create a sticky footer with CSS flexbox
+keywords: css flexbox, css layout, css sticky, css sticky footer
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.sticky-footer {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.sticky-footer__header,
+.sticky-footer__footer {
+ flex-shrink: 0;
+}
+
+.sticky-footer__main {
+ flex-grow: 1;
+}
+```
+
+The footer always sticks to the bottom if the main content is short.
+
+{% demo %}{% include "patterns/sticky-footer.njk" %}{% enddemo %}
diff --git a/pages/sticky-footer/index.tsx b/pages/sticky-footer/index.tsx
deleted file mode 100644
index 34e3405..0000000
--- a/pages/sticky-footer/index.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
- return (
-
-
-
-
-
-
-
-
- The footer always sticks to the bottom if the main content is short.
-
-
-
-
- ...
-
-
-
-`}
- css={`
- .container {
- display: flex;
- flex-direction: column;
- height: 100%;
- }
-
- .container__header,
- .container__footer {
- flex-shrink: 0;
- }
-
- .container__main {
- flex-grow: 1;
- }
- `}
- >
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/sticky-footer/Cover.tsx b/patterns/sticky-footer/Cover.tsx
deleted file mode 100644
index e293e4a..0000000
--- a/patterns/sticky-footer/Cover.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-
-const Cover: React.FC<{}> = () => {
- return (
-
-
-
- );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index bde41fd..3158b93 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -80,6 +80,7 @@
@import './patterns/statistic';
@import './patterns/status-light';
@import './patterns/stepper-input';
+@import './patterns/sticky-footer';
@import './patterns/sticky-table-column';
@import './patterns/sticky-table-headers';
@import './patterns/switch';
diff --git a/styles/patterns/_sticky-footer.scss b/styles/patterns/_sticky-footer.scss
new file mode 100644
index 0000000..5a718f7
--- /dev/null
+++ b/styles/patterns/_sticky-footer.scss
@@ -0,0 +1,27 @@
+.sticky-footer {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ width: 100%;
+}
+
+.sticky-footer__header,
+.sticky-footer__footer {
+ flex-shrink: 0;
+
+ /* Demo */
+ padding: 0.25rem;
+}
+
+.sticky-footer__main {
+ flex-grow: 1;
+
+ /* Demo */
+ border-top: 1px solid #d1d5db;
+ border-bottom: 1px solid #d1d5db;
+ padding: 0.25rem;
+}
\ No newline at end of file