Page layouts showing how components fit together with the bootstrap grid
Component demos with different content configurations
| No. | Description |
|---|---|
| D01 | 2 column container with a 1up and a video |
| No. | Component | Status | |
|---|---|---|---|
| S1.1 | Logo | Complete | Notes |
|
This logo graphic is sized for retina screen support (@2x) |
|||
| S1.2 | Navigation | Complete | Notes |
|
This component is hidden at mobile sizes, and revealed via S1.17 |
|||
| S1.3 | Site Map | Complete | Notes |
|
This is hidden by default, see wrapper for working demo |
|||
| S1.4 | Authentication | Skipped | |
| S1.6 | Personalized Content Drawer | Complete | Notes |
|
Javascript is used to size the .wrap-content div along with this div |
|||
| S1.7 | Search Bar | Complete | Notes |
|
This is based off of HTML given by the GSA team |
|||
| S1.8 | Search Results | Skipped | |
| S1.9 | Footer | Complete | Notes |
|
The "sitemap" link reveals the sitemap below, see the wrapper demo. The sitemap link is hidden at mobile sizes. |
|||
| S1.10.1 | List with Thumbnails Regular,Linked as block |
Complete | |
| S1.10.2 | List with Bullet Icons Regular, Expanding, with Summaries |
Complete | |
| S1.10.3 | List with Simple Bullets Regular, Expanding, with Summaries |
Complete | |
| S1.10.4 | List Link Outs Regular, Expanding, with Summaries |
Complete | |
| S1.10.5 | List with content type icons Regular, Expanding, with Summaries |
Complete | |
| S2.16 | Personalized Content Drawer - My Interests Selection | Complete | |
| S1.16 | SME Community - Multi-column list | Complete | |
| S1.17 | Mobile Navigation Toggles viewable at mobile size | Complete | Notes |
|
These reveal at mobile size only, and hide/show the navigation, search, and sidebar |
|||
| S1.18 | Container 1 Column | Complete | Notes |
|
The image in this component is for demo only, these are empty container elements used for layout only. |
|||
| S1.19 | Container 2 Column | Complete | Notes |
|
The image in this component is for demo only, these are empty container elements used for layout only. |
|||
| S1.20 | Container 3 Column | Complete | Notes |
|
The image in this component is for demo only, these are empty container elements used for layout only. |
|||
| S1.21 | Container 4 Column | Complete | Notes |
|
The image in this component is for demo only, these are empty container elements used for layout only. |
|||
| No. | Component | Status | |
|---|---|---|---|
| S1.15.1 | Featured 1up w/ white background, w/ red background, w/ gray background |
Complete | |
| S1.15.2 | Featured 2up w/ white background, w/ red background, w/ gray background, w/ video |
Complete | |
| S1.15.3 | Featured 3up w/ white background, w/ red background, w/ gray background |
Complete | Notes |
|
Features 3 and 4 up turn into carousels in mobile widths |
|||
| S1.15.4 | Featured 4up w/ white background, w/ red background, w/ gray background |
Complete | Notes |
|
Features 3 and 4 up turn into carousels in mobile widths |
|||
| S1.10.5 | List with content type icons Regular, Expanding, with Summaries |
Complete | |
| S1.11 | List with Column Sorting (table), files | Complete | Notes |
|
This is a resonsive table solution, at mobile, sorting is handled by a pulldown menu. |
|||
| S1.10.6 | Lists with Icons | Complete. Icons forthcoming. | |
| S1.13 | Text Section Headers | Complete | Notes |
|
Headers can be specified by class, and have 3 color options, also assigned by class. |
|||
| S1.14 |
Graphic/Image Section Headers with icon, without icon |
Complete, icons forthcoming | Notes |
|
Font size scales automatically based on page width via fittext. |
|||
| S2.7 | Content Drawer | Complete | Notes |
|
This is used to change pages via javascript, but accessible nav links are also provided. |
|||
| S2.15 | Cascading Filters | Complete | |
| S3.10.1 | Carousel 1 for Homepage | Complete | |
| S3.3 | Form Elements | Complete | Notes |
|
The form elements leverage CSS from Bootstrap |
|||
| S3.3.1 | Form Element: text input | Complete | |
| S3.3.2 | Form Element: textarea | Complete | |
| S3.3.3 | Form Element: textarea editing | Complete | |
| S3.3.4 | Form Element: select | Complete | |
| S3.3.5 | Form Element: radio | Complete | |
| S3.3.6 | Form Element: checkbox | Complete | |
| S3.3.7 | Form Element: button | Complete | |
| S3.4 | Columns in Forms | Complete | Notes |
|
Thie column example shows form inputs used in a grid layout. |
|||
| S2.11 | Embedded Video | Complete | Notes |
|
YouTube video embeds stretch and scale but Brightcove embeds are sized based on page load. The video embeds will fill whatever container they are placed in by way of the fitvids javascript function |
|||
| S2.2 | Toolbar | Connect Code Dependent |
| S2.4.1 | Article Headings | Complete |
| S2.4.2 | Article - Embedded image with caption | Complete |
| S2.4.3 | Article - Copy with aligned images | Complete |
| S2.4.4 | Article - Copy styling | Complete |
| S2.4.5 | Article - Byline | Complete |
| S2.4.6 | Article - Button Callout | Complete |
| S3.11 | Alert | Complete |
| S2.5 | Comments/Rating | Connect Code Dependent |
| S2.6 | Tables | Complete |
| S2.9 | Embedded Image with Headline and Caption | Complete |
| S2.14 | Inline Text Expansion | Complete |
| S2.12 | Video Gallery | Development |
| S2.13 | Content Modal | Complete |
| S2.1.2 | Secondary Content Grid
Variatons: 12 results, 15 results, 26 results |
Development |
| S2.1.3 | Gallery Grid | Development |
| S3.23 | Pagination | Complete |
Forthcoming