Add drop cap

client/constants/Pattern.ts

@@ -9,6 +9,7 @@ enum Pattern {
     DotLeader = 'Dot leader',
     DotNavigation = 'Dot navigation',
     DropArea = 'Drop area',
+    DropCap = 'Drop cap',
     Dropdown = 'Dropdown',
     FeatureList = 'Feature list',
     FixedAtCorner = 'Fixed at corner',

client/pages/ExplorePage.tsx

@@ -93,6 +93,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
                         <CoverCard pattern={Pattern.DropArea} />
+                        <CoverCard pattern={Pattern.DropCap} />
                         <CoverCard pattern={Pattern.Dropdown} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />

client/pages/HomePage.tsx

@@ -195,6 +195,7 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.SplitScreen} />
                         <CoverCard pattern={Pattern.StickyFooter} />
                         <CoverCard pattern={Pattern.StickyHeader} />
+                        <CoverCard pattern={Pattern.AvatarList} />
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Breadcrumb} />
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
@@ -204,6 +205,7 @@ const HomePage = () => {
                         <CoverCard pattern={Pattern.DotLeader} />
                         <CoverCard pattern={Pattern.DotNavigation} />
                         <CoverCard pattern={Pattern.DropArea} />
+                        <CoverCard pattern={Pattern.DropCap} />
                         <CoverCard pattern={Pattern.Dropdown} />
                         <CoverCard pattern={Pattern.FeatureList} />
                         <CoverCard pattern={Pattern.FixedAtCorner} />

client/patterns/drop-cap/Cover.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import Circle from '../../placeholders/Circle';
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                    width: '100%',
+                }}
+            >
+                <div style={{ display: 'flex', height: '32px', width: '100%' }}>
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            border: '2px dashed rgba(0, 0, 0, 0.3)',
+                            display: 'flex',
+                            marginRight: '8px',
+                            justifyContent: 'center',
+                            width: '32px',
+                        }}
+                    >
+                        <Circle />
+                    </div>
+                    <div style={{ flex: 1 }}>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                        <div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
+                    </div>
+                </div>
+                <div style={{ marginTop: '4px' }}>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '100%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '40%' }}><Line /></div>
+                    <div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/drop-cap/Details.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import './dropcap.css';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import Square from '../../placeholders/Square';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Drop cap">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div style={{ width: '256px' }}>
+                                <div className="p-drop-cap">
+                                    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document
+                                    written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web,
+                                    alongside HTML and JavaScript.
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<style>
+/* Styles for the first letter */
+.p-drop-cap:first-letter {
+    /* Display at the left */
+    float: left;
+    line-height: 1;
+
+    /* Spacing */
+    margin: 0 8px 0 0;
+    padding: 0 8px;
+
+    /* Optional */
+    font-size: 64px;
+    font-weight: 700;
+}
+</style>
+
+<div class="p-drop-cap">
+    ...
+</div>
+`}
+                />
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/drop-cap/dropcap.css

@@ -0,0 +1,9 @@
+.p-drop-cap:first-letter {
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    float: left;
+    font-size: 64px;
+    font-weight: 700;
+    line-height: 1;
+    margin: 0 8px 0 0;
+    padding: 0 8px; 
+}

public/sitemap.xml

@@ -15,6 +15,7 @@
     <url><loc>https://csslayout.io/patterns/dot-leader</loc></url>
     <url><loc>https://csslayout.io/patterns/dot-navigation</loc></url>
     <url><loc>https://csslayout.io/patterns/drop-area</loc></url>
+    <url><loc>https://csslayout.io/patterns/drop-cap</loc></url>
     <url><loc>https://csslayout.io/patterns/dropdown</loc></url>
     <url><loc>https://csslayout.io/patterns/feature-list</loc></url>
     <url><loc>https://csslayout.io/patterns/fixed-at-corner</loc></url>