diff --git a/contents/_includes/patterns/sticky-header.njk b/contents/_includes/patterns/sticky-header.njk
new file mode 100644
index 0000000..e84591b
--- /dev/null
+++ b/contents/_includes/patterns/sticky-header.njk
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 89d4792..75be72f 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -117,6 +117,7 @@ eleventyExcludeFromCollections: true
{% 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 %}
+ {% pattern "Sticky header" %}{% include "patterns/sticky-header.njk" %}{% endpattern %}
diff --git a/contents/sticky-header.md b/contents/sticky-header.md
new file mode 100644
index 0000000..0221513
--- /dev/null
+++ b/contents/sticky-header.md
@@ -0,0 +1,31 @@
+---
+layout: layouts/post.njk
+title: Sticky header
+description: Create a sticky header with CSS
+keywords: css layout, css position sticky, css sticky header
+---
+
+## HTML
+
+```html
+
+
+
+ ...
+
+
+```
+
+## CSS
+
+```css
+.sticky-header__header {
+ /* Stick to the top */
+ position: sticky;
+ top: 0;
+}
+```
+
+{% demo %}{% include "patterns/sticky-header.njk" %}{% enddemo %}
diff --git a/pages/sticky-header/index.tsx b/pages/sticky-header/index.tsx
deleted file mode 100644
index f0c1ea7..0000000
--- a/pages/sticky-header/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-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 (
-
-
-
-
-
-
-
-
- Try to scroll the main content to see the header sticks to the top of page.
-
-
-
-
- ...
-
-
-`}
- css={`
- .header {
- /* Stick to the top */
- position: sticky;
- top: 0;
- }
- `}
- >
-
-
-
-
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/sticky-header/Cover.tsx b/patterns/sticky-header/Cover.tsx
deleted file mode 100644
index 1a93731..0000000
--- a/patterns/sticky-header/Cover.tsx
+++ /dev/null
@@ -1,61 +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 3158b93..67c40c1 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -81,6 +81,7 @@
@import './patterns/status-light';
@import './patterns/stepper-input';
@import './patterns/sticky-footer';
+@import './patterns/sticky-header';
@import './patterns/sticky-table-column';
@import './patterns/sticky-table-headers';
@import './patterns/switch';
diff --git a/styles/patterns/_sticky-header.scss b/styles/patterns/_sticky-header.scss
new file mode 100644
index 0000000..31b2cd1
--- /dev/null
+++ b/styles/patterns/_sticky-header.scss
@@ -0,0 +1,17 @@
+.sticky-header {
+ /* Demo */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+ height: 100%;
+ width: 100%;
+}
+
+.sticky-header__header {
+ /* Stick to the top */
+ position: sticky;
+ top: 0;
+
+ /* Demo */
+ padding: 0.25rem;
+ border-bottom: 1px solid #d1d5db;
+}
\ No newline at end of file