feat(docusaurus): Header and footer elements section #277

website/docs/webdev/md_components/site_footer_components/usage_markdown.md

@@ -1,13 +1,18 @@
-The core footer provides supplementary information such as copyright, legal, privacy, social media, contact information and links to other important sites within the EEA. It is always placed at the bottom of every page.
+The core footer provides supplementary information such as copyright, legal, privacy, social media, contact information and links to other important sites within the EEA. It is always placed at the bottom of every page. <b> Always use a footer when building your page </b>
+
+![](../../md_components/static/footer-elements.png)
 
 ### Anatomy
 
-| Components                                                   | Mandatory | Optional |
-| ------------------------------------------------------------ | --------- | -------- |
-| **EEA Network**                                                | yes       | no       |
-| **Content owner details**              | yes       | no       |
-| **Contact Information**<br />     | yes       | no       |
-| **Legal navigation**                                         | yes       | no       |
+| Νο. | Components                                                   | Mandatory | Description |
+| -- | ------------------------------------------------------------ | --------- | --------- |
+| 1 | **EEA logo**                                                | yes       | Logo of European Environment Agency (EEA)|
+| 2 | **EIONET logo**              | yes       | Logo of European Environment Information and Observation Network |
+| 3 | **Contact information**<br />     | yes       | Links to the associated services available through the EEA site |
+| 4 | **Social media**                                         | yes       | Links to social EEA's social media |
+| 5 | **Thematic information platforms**                                         | yes       |  European Information Systems
+| 6 | **Legal navigation**                                         | yes       | Contains legal information links - consistent throughout the family sites |
+| 7 | **Content owner details**                                         | yes        | Indicates ownership over the site's content |
 
 ### Do's
 
@@ -17,10 +22,5 @@ The core footer provides supplementary information such as copyright, legal, pri
 
 - don't use more than one footer per page
 
-### When to use
-
-- always use a footer when building your page
 
-### When not to use
 
-- do not follow these guidelines when you are updating sites that fall under a different category of the EEA portal

website/docs/webdev/md_components/site_header_components/usage_markdown.md

@@ -1,45 +1,17 @@
 The EEA header shows users that they are on EEA portal and which service they are using.
 
+![](../../md_components/static/header-elements.png)
+
 ### Anatomy
-<table>
-    <thead>
-        <th>Components</th>
-        <th>Mandatory</th>
-        <th>Optional</th>
-    </thead>
-    <tbody>
-        <tr>
-            <td><strong>An official website of the EU statement</strong></td>
-            <td>yes</td>
-            <td>no</td>
-        </tr>
-        <tr>
-            <td><strong>Environmental Information systems dropdown</strong></td>
-            <td>yes</td>
-            <td>no</td>
-        </tr>
-        <tr>
-            <td><strong>European Environmental Agency logo</strong></td>
-            <td>yes</td>
-            <td>no</td>
-        </tr>
-        <tr>
-            <td><strong>Language select</strong></td>
-            <td>yes</td>
-            <td>no</td>
-        </tr>
-        <tr>
-        <td><strong>Search icon</strong></td>
-            <td>yes</td>
-            <td>no</td>
-        </tr>
-        <tr>
-            <td><strong>Menu</strong></td>
-            <td>yes</td>
-            <td>no</td>
-        </tr>
-    </tbody>
-</table>
+
+| Νο. | Components                                                   | Mandatory | Description |
+| -- | ------------------------------------------------------------ | --------- | --------- |
+| 1 | **Official EU website statement**                                                | yes       | All official European Union website addresses are in the europa.eu domain |
+| 2 | **Environmental Information systems**              | yes       | Complete list of EEA's thematic websites |
+| 3 | **Languages**<br />     | yes       | Language select |
+| 4 | **EEA Identity**                                         | yes       | Logo of European Environmental Agency |
+| 5 | **Menu**                                         | yes       |  Main navigation of the website
+| 6 | **Search**                                         | yes       | 	Enables the user to search and retrieve related information from using keywords |
 
 
 ### Do’s