Add docked at corner

client/App.jsx

@@ -16,6 +16,7 @@ const App = () => {
                 <Route exact={true} path='/button-with-icon'><DetailsLoader pattern="Button with icon" /></Route>
                 <Route exact={true} path='/card'><DetailsLoader pattern="Card" /></Route>
                 <Route exact={true} path='/centering'><DetailsLoader pattern="Centering" /></Route>
+                <Route exact={true} path='/docked-at-corner'><DetailsLoader pattern="Docked at corner" /></Route>
                 <Route exact={true} path='/dot-navigation'><DetailsLoader pattern="Dot navigation" /></Route>
                 <Route exact={true} path='/feature-list'><DetailsLoader pattern="Feature list" /></Route>
                 <Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern="Fixed at corner" /></Route>

client/CoverCard.jsx

@@ -12,7 +12,7 @@ const CoverCard = ({ pattern }) => {
                 className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3"
             >
                 <CoverLoader pattern={pattern} />
-                <h4 className="f5 mv0 pt3">{pattern}</h4>
+                <h4 className="f5 mv0 pt3 fw6">{pattern}</h4>
             </Link>
         </div>
     );

client/Home.jsx

@@ -62,6 +62,7 @@ const Home = () => {
                         <CoverCard pattern="Button with icon" />
                         <CoverCard pattern="Card" />
                         <CoverCard pattern="Centering" />
+                        <CoverCard pattern="Docked at corner" />
                         <CoverCard pattern="Dot navigation" />
                         <CoverCard pattern="Feature list" />
                         <CoverCard pattern="Fixed at corner" />

client/patterns/docked-at-corner/Cover.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center">
+                <div className="w2 h2 relative ba b--black-30 br2">
+                    <div
+                        className="absolute top-0 right-0 br-pill bg-dark-blue"
+                        style={{ height: '16px', transform: 'translate(50%, -50%)', width: '16px' }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/docked-at-corner/Details.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+
+const Details = () => {
+    return (
+        <DetailsLayout title="Docked at corner">
+            <BrowserFrame
+                content={
+                    <div className="h-100 flex flex-column items-center justify-center">
+                        <div className="w4 pa3 relative ba b--black-30 br2">
+                            <Rectangle />
+                            <div
+                                className="absolute top-0 right-0 br-pill bg-dark-blue h2 w2"
+                                style={{ transform: 'translate(50%, -50%)' }}
+                            />
+                        </div>
+                    </div>
+                }
+                source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    position: relative;
+">
+    <!-- Docked at the top right corner -->
+    <div style="
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translate(50%, -50%);
+
+        /* Content is centered */
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    ">
+        ...
+    </div>
+
+    ...
+</div>
+`}
+/>
+                }
+            />
+        </DetailsLayout>
+    );
+};
+
+export default Details;

sitemap.xml

@@ -9,6 +9,7 @@
     <url><loc>https://csslayout.io/button-with-icon</loc></url>
     <url><loc>https://csslayout.io/card</loc></url>
     <url><loc>https://csslayout.io/centering</loc></url>
+    <url><loc>https://csslayout.io/docked-at-corner</loc></url>
     <url><loc>https://csslayout.io/dot-navigation</loc></url>
     <url><loc>https://csslayout.io/feature-list</loc></url>
     <url><loc>https://csslayout.io/fixed-at-corner</loc></url>
@@ -21,6 +22,7 @@
     <url><loc>https://csslayout.io/previous-next-buttons</loc></url>
     <url><loc>https://csslayout.io/pricing-table</loc></url>
     <url><loc>https://csslayout.io/progress-bar</loc></url>
+    <url><loc>https://csslayout.io/questions-and-answers</loc></url>
     <url><loc>https://csslayout.io/same-height-columns</loc></url>
     <url><loc>https://csslayout.io/search-box</loc></url>
     <url><loc>https://csslayout.io/separator</loc></url>