fix(@clayui.com): Fix broken links

README.md

@@ -60,7 +60,7 @@ Feel free to open up problems or send pull requests. We will always be looking a
 
 > Before opening a issue make sure it exists.
 
-See the [contribution guided](/CONTRIBUTING.md) for more details.
+See the [contribution guide](/CONTRIBUTING.md) for more details.
 
 ### Setup
 

clayui.com/content/docs/components/css-badges.md

@@ -20,7 +20,7 @@ description: 'Badges help highlight important information, such as notifications
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-	Badge Sizes have been removed. Use the <a href="https://github.com/liferay/clay/blob/master/packages/clay/src/scss/mixins/_badges.scss#L1">clay-badge-size($sassMap) mixin</a> to create custom badge sizes for your app.
+	Badge Sizes have been removed. Use the <a href="https://github.com/liferay/clay/blob/master/packages/clay-css/src/scss/mixins/_badges.scss#L19">clay-badge-size($map) mixin</a> to create custom badge sizes for your app.
 </div>
 
 ## Variations

clayui.com/content/docs/components/css-cards.md

@@ -33,7 +33,7 @@ description: 'Cards are a specific form of data visualization focused mainly on
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-	See the implementation of the <a href="/docs/components/cards.html">Cards component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/cards/">Cards Pattern</a>.
+	See the implementation of the <a href="/docs/components/card.html">Cards component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/cards/">Cards Pattern</a>.
 </div>
 
 # Example

clayui.com/content/docs/components/css-dropdown.md

@@ -38,7 +38,7 @@ description: 'A dropdown menu displays a list of options for the element that tr
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-	See the implementation of the <a href="/docs/components/dropdown.html">Dropdown component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/dropdowns/">Dropdown Pattern</a>.
+	See the implementation of the <a href="/docs/components/drop-down.html">Dropdown component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/dropdowns/">Dropdown Pattern</a>.
 </div>
 
 ## Variations

clayui.com/content/docs/components/css-labels.md

@@ -23,7 +23,7 @@ description: 'Labels categorize information, providing quick recognition.'
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-	See the implementation of the <a href="/docs/components/labels.html">Labels component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/labels/">Labels Pattern</a>.
+	See the implementation of the <a href="/docs/components/label.html">Labels component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/labels/">Labels Pattern</a>.
 </div>
 
 ## Colors

clayui.com/content/docs/components/css-links.md

@@ -26,7 +26,7 @@ description: 'Also known as a hyperlink, a link is a clickable (text or image) e
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-	See the implementation of the <a href="/docs/components/links.html">Links component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/link/">Links Pattern</a>.
+	See the implementation of the <a href="/docs/components/link.html">Links component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/link/">Links Pattern</a>.
 </div>
 
 <div class="clay-site-alert alert alert-warning">

clayui.com/content/docs/components/css-list.md

@@ -301,8 +301,6 @@ Add the class `show-dropdown-action-on-active` to display `dropdown-menu`s when
 </ul>
 ```
 
-More examples can be found in <a href="/docs/components/dataset-display.html">dataset template</a>.
-
 ## Variations
 
 ### Bordered

clayui.com/content/docs/components/css-management-toolbar.md

@@ -29,7 +29,7 @@ description: 'Management toolbar is an extension of Toolbar. It is a combination
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-    Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See <a href="http://localhost:8000/docs/components/dropdown.html#alignment">Dropdown Alignment</a>.
+    Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See <a href="http://localhost:8000/docs/components/drop-down.html#alignment">Dropdown Alignment</a>.
 </div>
 
 ## Light

clayui.com/content/docs/components/css-modals.md

@@ -38,7 +38,7 @@ description: 'A modal is a secondary window that communicates or provides an act
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-	See the implementation of the <a href="/docs/components/modals.html">Modals component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/modals/">Modals Pattern</a>.
+	See the implementation of the <a href="/docs/components/modal.html">Modals component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/modals/">Modals Pattern</a>.
 </div>
 
 ## Sizes

clayui.com/content/docs/components/css-progress-bars.md

@@ -25,7 +25,7 @@ description: 'Progress bar indicates the percentage completed of a task.'
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-	See the implementation of the <a href="/docs/components/progress-bars.html">Progress Bars component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/progress-bars/">Progress Bars Pattern</a>.
+	See the implementation of the <a href="/docs/components/progress-bar.html">Progress Bars component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/progress-bars/">Progress Bars Pattern</a>.
 </div>
 
 ## Colors

clayui.com/content/docs/components/css-stickers.md

@@ -22,7 +22,7 @@ description: 'Stickers are a visual way to quickly identify content.'
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-    See the implementation of the <a href="/docs/components/stickers.html">Stickers component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/stickers/">Stickers Pattern</a>.
+    See the implementation of the <a href="/docs/components/sticker.html">Stickers component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/stickers/">Stickers Pattern</a>.
 </div>
 
 ## Colors
@@ -374,7 +374,7 @@ Add class `sticker-outside` in conjunction with sticker positions to position th
         </span>
         <span class="sticker sticker-user-icon">
             <span class="sticker-overlay">
-                <img alt="thumbnail" class="sticker-img" src="/images/thumbnail_coyote.jpg">
+                <img alt="thumbnail" class="sticker-img" src="/images/thumbnail_coffee.jpg">
             </span>
         </span>
         <span class="sticker sticker-lg sticker-user-icon">
@@ -419,7 +419,7 @@ Add class `sticker-outside` in conjunction with sticker positions to position th
 		<img
 			alt="thumbnail"
 			class="sticker-img"
-			src="/images/thumbnail_coyote.jpg"
+			src="/images/thumbnail_coffee.jpg"
 		/>
 	</span>
 </span>

clayui.com/content/docs/components/css-tables.md

@@ -32,7 +32,7 @@ description: 'A table is a specific pattern for comparing datasets in a very dir
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-	See the implementation of the <a href="/docs/components/tables.html">Tables component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/table">Tables Pattern</a>.
+	See the implementation of the <a href="/docs/components/table.html">Tables component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/table">Tables Pattern</a>.
 </div>
 
 <div class="clay-site-alert alert alert-warning">

clayui.com/content/docs/components/icon.mdx

@@ -29,8 +29,6 @@ import icons from '../../../static/js/icons-autogenerated.json';
 For Icons, we use SVG elements that link to an SVG sprite. So, it becomes necessary to pass a parameter that points to a path where this [`spritemap`](#api-spritemap) is located.
 If you are using the spritemap from `@clayui/css` you can download that svg [here](https://github.com/liferay/clay/blob/master/clayui.com/static/images/icons/icons.svg).
 
--   See the complete list of symbols and flags that are offered by Clay's spritemap [here](/docs/components/icons.html)
-
 <Icon />
 
 ### Using Context

clayui.com/content/docs/components/navigation/css-application-bar.md

@@ -16,7 +16,7 @@ description: 'This component is used as the main navigation of Liferay DXP.'
 <div class="clay-site-alert alert alert-info">Check the <a href="https://liferay.design/lexicon">Lexicon</a> <a href="https://liferay.design/lexicon/satellite-components/navigation/">Application Bar Pattern</a> for a more in-depth look at the motivations and proper usage of this component.</div>
 
 <div class="clay-site-alert alert alert-warning">
-    Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See <a href="http://localhost:8000/docs/components/dropdown.html#alignment">Dropdown Alignment</a>.
+    Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See <a href="http://localhost:8000/docs/components/drop-down.html#alignment">Dropdown Alignment</a>.
 </div>
 
 ## Default

clayui.com/content/docs/components/navigation/css-navbar.md

@@ -21,7 +21,7 @@ title: 'Base Navbar'
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-    Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See <a href="/docs/components/dropdown.html#alignment">Dropdown Alignment</a>.
+    Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See <a href="/docs/components/drop-down.html#alignment">Dropdown Alignment</a>.
 </div>
 
 ## Use Cases

clayui.com/content/docs/components/navigation/css-navigation-bar.md

@@ -20,7 +20,7 @@ description: 'A navigation bar, is a horizontal bar that provides several access
 </div>
 
 <div class="clay-site-alert alert alert-warning">
-    Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See <a href="http://localhost:8000/docs/components/dropdown.html#alignment">Dropdown Alignment</a>.
+    Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside Navbars. They align them manually via CSS classes. See <a href="http://localhost:8000/docs/components/drop-down.html#alignment">Dropdown Alignment</a>.
 </div>
 
 <div class="clay-site-alert alert alert-warning">

clayui.com/content/docs/get-started/how-to-use-clay.md

@@ -100,7 +100,7 @@ import ClayDropDown from '@clayui/drop-down';
 	These packages are installed in the sandbox environment, so feel free to fork the environment if you want to test with other Clay components.
 </div>
 
-As you learned from [Clay's compositional philosophy](<(/docs/foundations/composing.html)>), we are using a low-level DropDown component, as its essence is a controlled component and for that you need to control DropDown's expand state. Let's use React's [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate) to control the state.
+As you learned from [Clay's compositional philosophy](/docs/foundations/composing.html), we are using a low-level DropDown component, as its essence is a controlled component and for that you need to control DropDown's expand state. Let's use React's [`useState`](https://reactjs.org/docs/hooks-reference.html#usestate) to control the state.
 
 ```js
 const [expand, setExpand] = useState(false);