This repository has been archived by the owner on Dec 17, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1642cdd
commit 33c56d5
Showing
7 changed files
with
115 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,84 @@ | ||
| # Footer | ||
|
|
||
| The footer component implements the standard campus footer. It contains information about the website and its organization, as well as a standard set of links to campus resources. | ||
| The standard campus footer should appear at the bottom of every page of a campus website. The [page component](../il-page/README.md) has a dedicated content slot for the footer. | ||
|
|
||
| The footer is designed to accommodate the following pieces of content: | ||
|
|
||
| * The name of the site (required) | ||
| * The parent organization of the website | ||
| * contact information for the site | ||
| * social media links | ||
|
|
||
| There is also a general purpose content area on the right side of the footer that is most commonly used for navigation but which can be used for alternate purposes. | ||
|
|
||
| ## Creating a footer | ||
|
|
||
| A minimal header contains the name of the site. | ||
|
|
||
| The site name is placed in the `name` content slot. | ||
| The header is placed in the `header` slot of the `il-page` component: | ||
|
|
||
| ```html | ||
| <il-footer> | ||
| <div slot="name">College of Examples</a></h1> | ||
| </il-footer> | ||
| <il-page> | ||
| <il-footer slot="footer"></il-footer> | ||
| </il-page> | ||
| ``` | ||
| For sites with multiple pages, this can include a link to the site homepage. | ||
|
|
||
| ```html | ||
| <il-footer> | ||
| <a slot="name" href="/">College of Examples</a> | ||
| </il-footer> | ||
| ``` | ||
| The footer contains four content slots: | ||
|
|
||
| [screenshot] | ||
| * The <dfn>site name</dfn> identifies the site. For multipage sites, this may also link to the front page of the site. | ||
| * The <dfn>parent unit</dfn> identifies the campus unit which manages the site or contains the unit represented by the site. This should link to the site for the parent unit. | ||
| * The <dfn>address</dfn> slot contact information for the site. | ||
| * The <dfn>actions</dfn> slot contains action buttons. | ||
|
|
||
| ## Adding a parent organization | ||
| ## Site name | ||
|
|
||
| To display the parent organization of the site, use the `parent` content slot: | ||
| For a single page site, the site name can be an h1 or a div as required: | ||
|
|
||
| ```html | ||
| <il-footer> | ||
| <a slot="parent" href="https://example.com">College of Examples</a> | ||
| <a slot="name" href="/">Department of Hypotheticals</a></h1> | ||
| <il-footer slot="footer"> | ||
| <div slot="site-name">Single-Page Website</div> | ||
| </il-footer> | ||
| ``` | ||
|
|
||
| Including more than 3 parent organizations is discouraged. | ||
|
|
||
| ## Adding the footer to a page | ||
|
|
||
| When using the [`il-page`](../il-page/README.md) component, the footer should be placed in the `footer` content slot. | ||
| On sites with more than one page, the site name should link to the site homepage: | ||
|
|
||
| ```html | ||
| <il-page> | ||
| <il-footer slot="footer"> | ||
| <!-- ... ---> | ||
| </il-footer> | ||
| </il-page> | ||
| ``` | ||
| ## Adding contact information | ||
|
|
||
| Contact information is placed in the `contact` content slot: | ||
|
|
||
| ```html | ||
| <il-footer> | ||
| <div slot="contact"> | ||
| <div>123 Green Street</div> | ||
| <div>Champaign, IL 61820</div> | ||
| <div><a href="tel:+12175550000">1 (217) 555-0000</a></div> | ||
| <div><a href="mailto:[email protected]">[email protected]</a></div> | ||
| </div> | ||
| <il-footer slot="footer"> | ||
| <a slot="site-name" href="/">Website with Multiple Pages</a> | ||
| </il-footer> | ||
| ``` | ||
|
|
||
| ## Adding social media links | ||
| ## Parent unit | ||
|
|
||
| Social media links are placed in the `social` content slot: | ||
| If the website represents a department within another unit, the parent unit slot can be used to link to an additional website for the parent unit: | ||
|
|
||
| ```html | ||
| <il-footer> | ||
| <div slot="social"> | ||
| <a href="https://facebook.com">Facebook</a> | ||
| <a href="https://instagram.com">Instagram</a> | ||
| <a href="https://linkedin.com">LinkedIn</a> | ||
| </div> | ||
| <il-footer slot="footer"> | ||
| <a slot="parent-unit" href="http://parent.example.com/">Parent Unit</a> | ||
| <a slot="site-name" href="/">Website with Parent Unit</a> | ||
| </il-footer> | ||
| ``` | ||
|
|
||
| For recognized social networking site, links are replaced with icons. Recognition is based on the URL of the link. To manually specify the source of a link, use the `data-il-type` attribute: | ||
| ## Adding contact information | ||
|
|
||
| Contact information is placed in the `address` content slot. This slot also contains social media links, which are placed before other contact information: | ||
|
|
||
| ```html | ||
| <a href="https://facebook.com" data-il-type="facebook">Facebook</a> | ||
| <address slot="address"> | ||
| <nav aria-label="Social media" class="il-social"> | ||
| <ul> | ||
| <li><a data-service="twitter" href="http://example.com/">Twitter</a></li> | ||
| <li><a data-service="youtube" href="http://example.com/">YouTube</a></li> | ||
| <li><a data-service="facebook" href="http://example.com/">Facebook</a></li> | ||
| <li><a data-service="instagram" href="http://example.com/">Instagram</a></li> | ||
| <li><a data-service="linkedin" href="http://example.com/">LinkedIn</a></li> | ||
| </ul> | ||
| </nav> | ||
| <p>5678 West Example Street<br> | ||
| MC-0000<br> | ||
| Champaign, IL 61820</p> | ||
| <a href="mailto:[email protected]">[email protected]</a> | ||
| <a href="tel:+12175551234">(217) 555-1234</a> | ||
| </address> | ||
| ``` | ||
|
|
||
| For social media links, the `data-service` attribute is required. Valid attributes are: | ||
|
|
||
| * snapchat | ||
| * x | ||
| * youtube | ||
|
|
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,56 @@ | ||
| # Sections | ||
|
|
||
| This component is used to divide the length of a web page into distinct sections. Each section can have a different visual appearance, including color schemes and background images. | ||
|
|
||
| The `il-section` component can only be used within the `il-page` component. Sections can be placed beside any other block-level element. | ||
| The readability of long and complicated pages can be improved by dividing a page into sections. The `il-section` component can only be used within the `il-page` component. Sections can be placed beside any other block-level element. | ||
|
|
||
| ```html | ||
| <il-page> | ||
|
|
||
| <p>This paragraph comes before the section.</p> | ||
|
|
||
| <il-section> | ||
| <p>This paragraph is inside the section.</p> | ||
| </il-section> | ||
|
|
||
| <p>This paragraph comes after the section.</p> | ||
|
|
||
| <il-header slot="header"> | ||
| <a slot="site-name" href="/">Example site</a> | ||
| </il-header> | ||
| <main slot="main"> | ||
| <il-section> | ||
| <h1>Page with multiple sections</h1> | ||
| <p>This is divided into multiple sections.</p> | ||
| </il-section> | ||
| <il-section> | ||
| <h2>The second section</h2> | ||
| <p>The second section follows the first section.</p> | ||
| </il-section> | ||
| </main> | ||
| <il-footer slot="footer"> | ||
| <a slot="site-name" href="/">Example site</a> | ||
| </il-footer> | ||
| </il-page> | ||
| ``` | ||
|
|
||
| Sections extend to the edges of the page, but maintain the page content boundaries. This allows sections to have custom backgrounds which span the width of the page, yet maintain padding and line lengths consistent with the rest of the page. | ||
| Usage notes: | ||
|
|
||
| ``` | ||
| : : | ||
| :This paragraph comes before the section. : | ||
| : : | ||
| +-----------------------------------------------------------------------------+ | ||
| | : : | | ||
| | :This paragraph is inside the section : | | ||
| | : : | | ||
| +-----------------------------------------------------------------------------+ | ||
| : : | ||
| :This paragraph comes after the section. : | ||
| : : | ||
| : : | ||
| : : | ||
| : left content right content : | ||
| : boundary boundary : | ||
| ``` | ||
| * The `il-section` element **must** be a direct child of the `main` element. | ||
| * Sections **can not** be nested. | ||
|
|
||
| For more on content boundaries, see [the `il-page` component reference](../il-page/README.md#page-margins). | ||
| The `il-alternate` class is used to apply a different background color to alternate sections. This improves the ability to distinguish adjacent sections. | ||
|
|
||
| ```html | ||
| <il-page> | ||
| <il-header slot="header"> | ||
| <a slot="site-name" href="/">Example site</a> | ||
| </il-header> | ||
| <main slot="main"> | ||
| <il-section> | ||
| <h1>Page with multiple sections</h1> | ||
| <p>This is divided into multiple sections.</p> | ||
| </il-section> | ||
| <il-section class="il-alternate"> | ||
| <h2>The second section</h2> | ||
| <p>The second section follows the first section.</p> | ||
| </il-section> | ||
| <il-section> | ||
| <h2>The final section</h2> | ||
| <p>The third section is the final section.</p> | ||
| </il-section> | ||
| </main> | ||
| <il-footer slot="footer"> | ||
| <a slot="site-name" href="/">Example site</a> | ||
| </il-footer> | ||
| </il-page> | ||
| ``` |
This file was deleted.
Oops, something went wrong.