import * as React from 'react'; import Head from 'next/head'; import Link from 'next/link'; 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 Circle from '../../placeholders/Circle'; import Rectangle from '../../placeholders/Rectangle'; const Details: React.FC<{}> = () => { return (

You can{' '} add {' '} a ribbon {' '} to indicate the most popular option.

... ... ... ...

... `} css={` .container { /* Content is centered horizontally */ align-items: center; display: flex; justify-content: center; } .container__column { /* Content is centered vertically */ align-items: center; display: flex; flex-direction: column; justify-content: center; /* Make all columns have the same width */ flex: 1; /* OPTIONAL: Space between columns */ margin: 0 8px; /* OPTIONAL: Border */ border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 4px; } `} >

); }; export default Details;