mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-24 19:26:26 +02:00
Add meta tags for patterns
This commit is contained in:
Phuoc Nguyen
@@ -1,10 +1,8 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>CSS layout</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="author" content="Nguyen Huu Phuoc" />
|
||||
<meta name="description" content="A collection of popular layouts and patterns made with CSS" />
|
||||
<link href="/assets/favicon.png" rel="icon">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Lato&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
import Footer from './Footer';
|
||||
import Header from './Header';
|
||||
@@ -16,22 +15,6 @@ const Layout: React.FC<{}> = ({ children }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<meta property="og:description" content="A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
|
||||
<meta property="og:site_name" content="CSS Layout" />
|
||||
<meta property="og:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://csslayout.io" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:creator" content="@nghuuphuoc" />
|
||||
<meta property="twitter:description" content="A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
|
||||
<meta property="twitter:site" content="@nghuuphuoc" />
|
||||
<meta property="twitter:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="twitter:url" content="https://csslayout.io" />
|
||||
</Helmet>
|
||||
<Header />
|
||||
{children}
|
||||
<Footer />
|
||||
|
||||
@@ -22,9 +22,24 @@ const ExplorePage = () => {
|
||||
<Layout>
|
||||
<Helmet>
|
||||
<title>CSS Layout ∙ Explore</title>
|
||||
<meta name="title" content="CSS Layout ∙ Explore" />
|
||||
<meta name="title" content="CSS Layout ∙ Patterns" />
|
||||
<meta name="description" content="CSS layouts and patterns" />
|
||||
<meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
|
||||
|
||||
<meta property="og:description" content="CSS layouts and patterns" />
|
||||
<meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
|
||||
<meta property="og:site_name" content="CSS Layout" />
|
||||
<meta property="og:title" content="CSS Layout ∙ Patterns" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://csslayout.io/patterns" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:creator" content="@nghuuphuoc" />
|
||||
<meta property="twitter:description" content="CSS layouts and patterns" />
|
||||
<meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
|
||||
<meta property="twitter:site" content="@nghuuphuoc" />
|
||||
<meta property="twitter:title" content="CSS Layout ∙ Patterns" />
|
||||
<meta property="twitter:url" content="https://csslayout.io/patterns" />
|
||||
</Helmet>
|
||||
<div className="hero">
|
||||
<div className="container">
|
||||
|
||||
@@ -29,6 +29,21 @@ const HomePage = () => {
|
||||
<meta name="title" content="CSS Layout" />
|
||||
<meta name="description" content="CSS layouts and patterns" />
|
||||
<meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
|
||||
|
||||
<meta property="og:description" content="A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
|
||||
<meta property="og:site_name" content="CSS Layout" />
|
||||
<meta property="og:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://csslayout.io" />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:creator" content="@nghuuphuoc" />
|
||||
<meta property="twitter:description" content="A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
|
||||
<meta property="twitter:site" content="@nghuuphuoc" />
|
||||
<meta property="twitter:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
|
||||
<meta property="twitter:url" content="https://csslayout.io" />
|
||||
</Helmet>
|
||||
<div className="hero">
|
||||
<div className="container">
|
||||
|
||||
@@ -60,6 +60,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Accordion}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create an accordion with CSS flexbox" />
|
||||
<meta name="og:description" content="Create an accordion with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create an accordion with CSS flexbox" />
|
||||
<meta name="keywords" content="css accordion, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.ArrowButtons}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create arrow buttons with CSS" />
|
||||
<meta name="og:description" content="Create arrow buttons with CSS" />
|
||||
<meta name="twitter:description" content="Create arrow buttons with CSS" />
|
||||
<meta name="keywords" content="css arrow buttons" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -36,6 +36,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.AvatarList}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create an avatar list with CSS flexbox" />
|
||||
<meta name="og:description" content="Create an avatar list with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create an avatar list with CSS flexbox" />
|
||||
<meta name="keywords" content="css avatar, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Avatar}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create an avatar component with CSS flexbox" />
|
||||
<meta name="og:description" content="Create an avatar component with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create an avatar component with CSS flexbox" />
|
||||
<meta name="keywords" content="css avatar, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Badge}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a badge component with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a badge component with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a badge component with CSS flexbox" />
|
||||
<meta name="keywords" content="css badge, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Breadcrumb}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a breadcrumb with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a breadcrumb with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a breadcrumb with CSS flexbox" />
|
||||
<meta name="keywords" content="css breadcrumb, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.ButtonWithIcon}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create an icon button with CSS flexbox" />
|
||||
<meta name="og:description" content="Create an icon button with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create an icon button with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css icon button" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.CardLayout}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a card layout with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a card layout with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a card layout with CSS flexbox" />
|
||||
<meta name="keywords" content="css card layout, css flexbox, css layout" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Card}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a card with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a card with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a card with CSS flexbox" />
|
||||
<meta name="keywords" content="css card, css flexbox" />
|
||||
</Helmet>
|
||||
<BrowserFrame
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Centering}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Center an element with CSS flexbox" />
|
||||
<meta name="og:description" content="Center an element with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Center an element with CSS flexbox" />
|
||||
<meta name="keywords" content="css centering, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Chip}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a chip component with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a chip component with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a chip component with CSS flexbox" />
|
||||
<meta name="keywords" content="css chip, css flexbox, css tag" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -52,6 +52,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.CircularNavigation}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a circular navigation with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a circular navigation with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a circular navigation with CSS flexbox" />
|
||||
<meta name="keywords" content="css circular navigation, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.CloseButton}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a close button with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a close button with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a close button with CSS flexbox" />
|
||||
<meta name="keywords" content="css close button, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.CookieBanner}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a cookie banner with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a cookie banner with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a cookie banner with CSS flexbox" />
|
||||
<meta name="keywords" content="css cookie banner, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.CornerRibbon}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a corner ribbon with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a corner ribbon with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a corner ribbon with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css ribbon" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.CurvedBackground}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create an element with curved background" />
|
||||
<meta name="og:description" content="Create an element with curved background" />
|
||||
<meta name="twitter:description" content="Create an element with curved background" />
|
||||
<meta name="keywords" content="css border radius, css curved background" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -66,6 +66,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.CustomCheckboxButton}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a custom checkbox button with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a custom checkbox button with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a custom checkbox button with CSS flexbox" />
|
||||
<meta name="keywords" content="css checkbox, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -67,6 +67,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.CustomRadioButton}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a custom radio button with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a custom radio button with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a custom radio button with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css radio" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.DiagonalSection}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a diagonal section with CSS" />
|
||||
<meta name="og:description" content="Create a diagonal section with CSS" />
|
||||
<meta name="twitter:description" content="Create a diagonal section with CSS" />
|
||||
<meta name="keywords" content="css diagonal section, css transform skew" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.DockedAtCorner}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Dock an element at corner with CSS" />
|
||||
<meta name="og:description" content="Dock an element at corner with CSS" />
|
||||
<meta name="twitter:description" content="Dock an element at corner with CSS" />
|
||||
<meta name="keywords" content="css docked, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -19,6 +19,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.DotLeader}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create dot leaders with CSS flexbox" />
|
||||
<meta name="og:description" content="Create dot leaders with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create dot leaders with CSS flexbox" />
|
||||
<meta name="keywords" content="css dot leader, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -40,6 +40,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.DotNavigation}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create dot navigation with CSS flexbox" />
|
||||
<meta name="og:description" content="Create dot navigation with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create dot navigation with CSS flexbox" />
|
||||
<meta name="keywords" content="css dot navigation, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Drawer}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a drawer navigation with CSS" />
|
||||
<meta name="og:description" content="Create a drawer navigation with CSS" />
|
||||
<meta name="twitter:description" content="Create a drawer navigation with CSS" />
|
||||
<meta name="keywords" content="css drawer, css off-canvas" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.DropArea}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a dropping area with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a dropping area with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a dropping area with CSS flexbox" />
|
||||
<meta name="keywords" content="css dropping area, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.DropCap}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a drop cap with CSS" />
|
||||
<meta name="og:description" content="Create a drop cap with CSS" />
|
||||
<meta name="twitter:description" content="Create a drop cap with CSS" />
|
||||
<meta name="keywords" content="css drop cap" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -21,6 +21,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Dropdown}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a dropdown with CSS" />
|
||||
<meta name="og:description" content="Create a dropdown with CSS" />
|
||||
<meta name="twitter:description" content="Create a dropdown with CSS" />
|
||||
<meta name="keywords" content="css dropdown, css menu" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.FadingLongSection}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Fading long section to indicate there is more content" />
|
||||
<meta name="og:description" content="Fading long section to indicate there is more content" />
|
||||
<meta name="twitter:description" content="Fading long section to indicate there is more content" />
|
||||
<meta name="keywords" content="css fading overflow, css linear gradient" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -19,6 +19,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.FeatureComparison}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a feature comparison list with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a feature comparison list with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a feature comparison list with CSS flexbox" />
|
||||
<meta name="keywords" content="css feature comparison, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -19,6 +19,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.FeatureList}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a feature list with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a feature list with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a feature list with CSS flexbox" />
|
||||
<meta name="keywords" content="css feature list, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.FixedAtCorner}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Fix an element at corner with CSS" />
|
||||
<meta name="og:description" content="Fix an element at corner with CSS" />
|
||||
<meta name="twitter:description" content="Fix an element at corner with CSS" />
|
||||
<meta name="keywords" content="css fixed" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.FixedAtSide}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Fix an element at the middle of side with CSS" />
|
||||
<meta name="og:description" content="Fix an element at the middle of side with CSS" />
|
||||
<meta name="twitter:description" content="Fix an element at the middle of side with CSS" />
|
||||
<meta name="keywords" content="css fixed" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.FloatingLabel}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a floating label with CSS" />
|
||||
<meta name="og:description" content="Create a floating label with CSS" />
|
||||
<meta name="twitter:description" content="Create a floating label with CSS" />
|
||||
<meta name="keywords" content="css floating label, placeholder shown" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.FolderStructure}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a folder structure with CSS" />
|
||||
<meta name="og:description" content="Create a folder structure with CSS" />
|
||||
<meta name="twitter:description" content="Create a folder structure with CSS" />
|
||||
<meta name="keywords" content="css folder structure, css folder tree" />
|
||||
</Helmet>
|
||||
<BrowserFrame
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.FullBackground}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a full background element with CSS" />
|
||||
<meta name="og:description" content="Create a full background element with CSS" />
|
||||
<meta name="twitter:description" content="Create a full background element with CSS" />
|
||||
<meta name="keywords" content="css background size cover, css full background" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.FullScreenMenu}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a full screen menu with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a full screen menu with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a full screen menu with CSS flexbox" />
|
||||
<meta name="keywords" content="css fixed, css flexbox, css menu" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.HolyGrail}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a holy grail layout with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a holy grail layout with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a holy grail layout with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css holy grail layout, css layout" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.InitialAvatar}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create an initial avatar with CSS" />
|
||||
<meta name="og:description" content="Create an initial avatar with CSS" />
|
||||
<meta name="twitter:description" content="Create an initial avatar with CSS" />
|
||||
<meta name="keywords" content="css avatar" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.InputAddon}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create an input add-on with CSS flexbox" />
|
||||
<meta name="og:description" content="Create an input add-on with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create an input add-on with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css input add-on" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -49,6 +49,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.KeyboardShortcut}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a keyboard shortcut with CSS" />
|
||||
<meta name="og:description" content="Create a keyboard shortcut with CSS" />
|
||||
<meta name="twitter:description" content="Create a keyboard shortcut with CSS" />
|
||||
<meta name="keywords" content="kbd tag, keyboard shortcut" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.LayeredCard}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a layered card with CSS" />
|
||||
<meta name="og:description" content="Create a layered card with CSS" />
|
||||
<meta name="twitter:description" content="Create a layered card with CSS" />
|
||||
<meta name="keywords" content="css layered card" />
|
||||
</Helmet>
|
||||
<BrowserFrame
|
||||
|
||||
@@ -15,6 +15,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.LinedPaper}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create lined paper with CSS" />
|
||||
<meta name="og:description" content="Create lined paper with CSS" />
|
||||
<meta name="twitter:description" content="Create lined paper with CSS" />
|
||||
<meta name="keywords" content="css linear gradient, css lined paper, css multiple horizontal lines" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.MediaObject}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a media object with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a media object with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a media object with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, media object" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -21,6 +21,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.MegaMenu}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a mega menu with CSS" />
|
||||
<meta name="og:description" content="Create a mega menu with CSS" />
|
||||
<meta name="twitter:description" content="Create a mega menu with CSS" />
|
||||
<meta name="keywords" content="css mega menu" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Menu}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a menu with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a menu with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a menu with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css menu" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -19,6 +19,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Modal}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a modal with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a modal with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a modal with CSS flexbox" />
|
||||
<meta name="keywords" content="css dialog, css flexbox, css modal" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.NestedDropdowns}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create nested dropdown menu with CSS" />
|
||||
<meta name="og:description" content="Create nested dropdown menu with CSS" />
|
||||
<meta name="twitter:description" content="Create nested dropdown menu with CSS" />
|
||||
<meta name="keywords" content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Notification}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a notification with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a notification with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a notification with CSS flexbox" />
|
||||
<meta name="keywords" content="css alert, css flexbox, css notification" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.OverlayPlayButton}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create an overlay play button with CSS flexbox" />
|
||||
<meta name="og:description" content="Create an overlay play button with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create an overlay play button with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Pagination}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a pagination with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a pagination with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a pagination with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css pagination" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.PopoverArrow}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a popover arrow with CSS" />
|
||||
<meta name="og:description" content="Create a popover arrow with CSS" />
|
||||
<meta name="twitter:description" content="Create a popover arrow with CSS" />
|
||||
<meta name="keywords" content="css arrow, css popover" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.PresenceIndicator}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a presence indicator with CSS" />
|
||||
<meta name="og:description" content="Create a presence indicator with CSS" />
|
||||
<meta name="twitter:description" content="Create a presence indicator with CSS" />
|
||||
<meta name="keywords" content="css indicator" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.PreviousNextButtons}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create previous and next buttons with CSS flexbox" />
|
||||
<meta name="og:description" content="Create previous and next buttons with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create previous and next buttons with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css pagination" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.PriceTag}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a price tag with CSS" />
|
||||
<meta name="og:description" content="Create a price tag with CSS" />
|
||||
<meta name="twitter:description" content="Create a price tag with CSS" />
|
||||
<meta name="keywords" content="css price tag" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.PricingTable}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a pricing table with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a pricing table with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a pricing table with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css pricing table" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -21,6 +21,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.ProgressBar}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a progress bar with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a progress bar with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a progress bar with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css progress bar" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -36,6 +36,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.PropertyList}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a property list with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a property list with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a property list with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, property list" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -56,6 +56,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.QuestionsAndAnswers}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a questions and answers section with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a questions and answers section with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a questions and answers section with CSS flexbox" />
|
||||
<meta name="keywords" content="css accordion, css faq, css flexbox" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -76,6 +76,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.RadialProgressBar}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a radial progress bar with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a radial progress bar with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a radial progress bar with CSS flexbox" />
|
||||
<meta name="keywords" content="css clip rect, css flexbox, css progress bar" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -52,6 +52,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.RadioButtonGroup}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a radio button group with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a radio button group with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a radio button group with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css radio button" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.RadioSwitch}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a radio switch with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a radio switch with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a radio switch with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css radio switch, css switch" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Rating}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a star rating with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a star rating with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a star rating with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css star rating" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -15,6 +15,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.ResizableElement}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create resizable indicators with CSS" />
|
||||
<meta name="og:description" content="Create resizable indicators with CSS" />
|
||||
<meta name="twitter:description" content="Create resizable indicators with CSS" />
|
||||
<meta name="keywords" content="css resizable, css resize cursor" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Ribbon}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a ribbon with CSS" />
|
||||
<meta name="og:description" content="Create a ribbon with CSS" />
|
||||
<meta name="twitter:description" content="Create a ribbon with CSS" />
|
||||
<meta name="keywords" content="css ribbon" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.SameHeightColumns}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create same height columns with CSS flexbox" />
|
||||
<meta name="og:description" content="Create same height columns with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create same height columns with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css layout, css same height columns" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.SearchBox}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a search box with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a search box with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a search box with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css search box" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Separator}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a separator with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a separator with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a separator with CSS flexbox" />
|
||||
<meta name="keywords" content="css divider, css flexbox, css separator" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Sidebar}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a sidebar with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a sidebar with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a sidebar with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css layout, css sidebar" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.SimpleGrid}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a simple grid with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a simple grid with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a simple grid with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Slider}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a slider with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a slider with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a slider with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css slider" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -22,6 +22,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.SpinButton}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a spin button with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a spin button with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a spin button with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css spin button" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.SplitNavigation}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a split navigation with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a split navigation with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a split navigation with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css menu, css navigation, css split navigation" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.SplitScreen}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a split screen with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a split screen with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a split screen with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css layout, css split screen" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.StackedCards}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create stacked cards with CSS" />
|
||||
<meta name="og:description" content="Create stacked cards with CSS" />
|
||||
<meta name="twitter:description" content="Create stacked cards with CSS" />
|
||||
<meta name="keywords" content="css card, css stacked cards, css transform rotate" />
|
||||
</Helmet>
|
||||
<BrowserFrame
|
||||
|
||||
@@ -15,6 +15,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.StampBorder}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create stamp border with CSS" />
|
||||
<meta name="og:description" content="Create stamp border with CSS" />
|
||||
<meta name="twitter:description" content="Create stamp border with CSS" />
|
||||
<meta name="keywords" content="css radial gradient, css stamp border" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Statistic}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a statistic component with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a statistic component with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a statistic component with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css statistic" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.StatusLight}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a status light with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a status light with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a status light with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css status light" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -25,6 +25,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.StepperInput}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a stepper input with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a stepper input with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a stepper input with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css stepper input" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.StickyFooter}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a sticky footer with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a sticky footer with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a sticky footer with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css layout, css sticky, css sticky footer" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.StickyHeader}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a sticky header with CSS" />
|
||||
<meta name="og:description" content="Create a sticky header with CSS" />
|
||||
<meta name="twitter:description" content="Create a sticky header with CSS" />
|
||||
<meta name="keywords" content="css layout, css position sticky, css sticky header" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.StickySections}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create sticky sections with CSS" />
|
||||
<meta name="og:description" content="Create sticky sections with CSS" />
|
||||
<meta name="twitter:description" content="Create sticky sections with CSS" />
|
||||
<meta name="keywords" content="css layout, css sticky, css sticky sections" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.StickyTableColumn}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create sticky table column with CSS" />
|
||||
<meta name="og:description" content="Create sticky table column with CSS" />
|
||||
<meta name="twitter:description" content="Create sticky table column with CSS" />
|
||||
<meta name="keywords" content="css position sticky, css sticky table column" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.StickyTableHeaders}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create sticky table headers with CSS" />
|
||||
<meta name="og:description" content="Create sticky table headers with CSS" />
|
||||
<meta name="twitter:description" content="Create sticky table headers with CSS" />
|
||||
<meta name="keywords" content="css position sticky, css sticky table headers" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -19,6 +19,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Switch}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a switch with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a switch with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a switch with CSS flexbox" />
|
||||
<meta name="keywords" content="css custom checkbox, css flexbox, css switch, css switcher" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -42,6 +42,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Tab}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create tabs with CSS flexbox" />
|
||||
<meta name="og:description" content="Create tabs with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create tabs with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css navigation, css tab" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,10 +16,9 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Teardrop}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a teardrop with CSS" />
|
||||
<meta
|
||||
name="keywords"
|
||||
content="css border radius, css teardrop, css water drop shape, css water droplet"
|
||||
/>
|
||||
<meta name="og:description" content="Create a teardrop with CSS" />
|
||||
<meta name="twitter:description" content="Create a teardrop with CSS" />
|
||||
<meta name="keywords" content="css border radius, css teardrop, css water drop shape, css water droplet" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
<BrowserFrame
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.ThreeDimensionsCard}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a 3D card with CSS" />
|
||||
<meta name="og:description" content="Create a 3D card with CSS" />
|
||||
<meta name="twitter:description" content="Create a 3D card with CSS" />
|
||||
<meta name="keywords" content="css 3D card" />
|
||||
</Helmet>
|
||||
<BrowserFrame
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Timeline}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a timeline with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a timeline with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a timeline with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css timeline" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.TogglePasswordVisibility}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a toggle password visibility with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a toggle password visibility with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a toggle password visibility with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, toggle password visibility" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Tooltip}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a tooltip with CSS" />
|
||||
<meta name="og:description" content="Create a tooltip with CSS" />
|
||||
<meta name="twitter:description" content="Create a tooltip with CSS" />
|
||||
<meta name="keywords" content="css tooltip" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.TreeDiagram}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a tree diagram with CSS" />
|
||||
<meta name="og:description" content="Create a tree diagram with CSS" />
|
||||
<meta name="twitter:description" content="Create a tree diagram with CSS" />
|
||||
<meta name="keywords" content="css sitemap, css tree diagram" />
|
||||
</Helmet>
|
||||
<BrowserFrame
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.TriangleButtons}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create triangle buttons with CSS" />
|
||||
<meta name="og:description" content="Create triangle buttons with CSS" />
|
||||
<meta name="twitter:description" content="Create triangle buttons with CSS" />
|
||||
<meta name="keywords" content="css triangle buttons" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.UploadButton}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create an upload button with CSS flexbox" />
|
||||
<meta name="og:description" content="Create an upload button with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create an upload button with CSS flexbox" />
|
||||
<meta name="keywords" content="css file input, css flexbox, css upload button" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -15,6 +15,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.ValidationIcon}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Add validation icons to input with CSS" />
|
||||
<meta name="og:description" content="Add validation icons to input with CSS" />
|
||||
<meta name="twitter:description" content="Add validation icons to input with CSS" />
|
||||
<meta name="keywords" content="css validation icon" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.VideoBackground}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Add video background with CSS flexbox" />
|
||||
<meta name="og:description" content="Add video background with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Add video background with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, object fit cover" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Voting}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a voting control with CSS flexbox" />
|
||||
<meta name="og:description" content="Create a voting control with CSS flexbox" />
|
||||
<meta name="twitter:description" content="Create a voting control with CSS flexbox" />
|
||||
<meta name="keywords" content="css flexbox, css triangle buttons, css voting control" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
|
||||
<DetailsLayout pattern={Pattern.Watermark}>
|
||||
<Helmet>
|
||||
<meta name="description" content="Create a watermark with CSS" />
|
||||
<meta name="og:description" content="Create a watermark with CSS" />
|
||||
<meta name="twitter:description" content="Create a watermark with CSS" />
|
||||
<meta name="keywords" content="css watermark" />
|
||||
</Helmet>
|
||||
<div className='p-8 pb-20'>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user