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'; const Details: React.FC<{}> = () => { return (
Fading a long section to indicate there is more content.
...
`} css={` .container { /* Used to position the faded element */ position: relative; } .container__content { /* Height */ height: 200px; /* Scrollable */ overflow-y: scroll; } .container__fading { /* Displayed at the bottom */ bottom: 0; left: 0; position: absolute; /* Size */ height: 30px; width: 100%; /* Gradient background */ background: linear-gradient(rgba(255, 255, 255, 0.01), #fff); } `} >
); }; export default Details;