diff --git a/src/Stack.md b/src/Stack.md
index 9ba45ec..ed1fe0e 100644
--- a/src/Stack.md
+++ b/src/Stack.md
@@ -105,21 +105,25 @@ You can also use it as a generic CSS Grid component:
_Available props are `alignContent`, `alignItems`, `justifyContent`, `gridGap`, `gridRowGap`, `gridColumnGap`, `gridColumn`, `gridRow`, `gridAutoFlow`, `gridAutoRows`, `gridAutoColumns`, `gridTemplateRows` and `gridTemplateColumns`. See more in [styled-system docs](https://jxnblk.com/styled-system/table)._
-One more example:
+Responsive buttons (full width on small screens, horizontally stacked on larger screens):
```jsx
-const styled = require('styled-components').default;
-const Button = styled.button({
- padding: '8px 16px',
- border: 0,
- borderRadius: '2px',
- background: 'salmon',
- color: 'white',
- fontSize: '1rem'
-});
+const Button = require('../styleguide/Button').default;
;
```
+
+More responsive buttons (vertically stacked on small screens, 2×2 grid on larger screens):
+
+```jsx
+const Button = require('../styleguide/Button').default;
+
+
+
+
+
+;
+```
diff --git a/styleguide.config.js b/styleguide.config.js
index f2abd87..3cdf287 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -1,6 +1,7 @@
const path = require('path');
module.exports = {
+ title: 'Stack Styled: stacking layouts for React',
sections: [
{
content: path.join(__dirname, 'styleguide/Intro.md'),
diff --git a/styleguide/Button.js b/styleguide/Button.js
new file mode 100644
index 0000000..34d0d4a
--- /dev/null
+++ b/styleguide/Button.js
@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+ padding: 8px 16px;
+ border: 0;
+ border-radius: 2px;
+ background: salmon;
+ color: white;
+ font-size: 1rem;
+ cursor: pointer;
+
+ &:hover,
+ &:active,
+ &:focus {
+ background: tomato;
+ }
+`;
+
+export default Button;