.feature-header{
background: white;
display: inline-block;
}
.page-feature{
width: 100%;
border-radius: 0.5rem;
padding: 12rem 1.4rem 1rem 1.4rem;
margin-bottom: 1rem;
background-size: cover!important;
}
Design elements - original
Related links
Overview
Purpose
The following template serves as a design guide for the re-imagined NZVA website, providing a visual direction and theme. Developers should adapt and optimize the template as needed to ensure it's fit for purpose, user-friendly, and compatible across devices and platforms.
Template specifications
This template utilises the following libraries and features:
- Bootstrap 5.2.3 CSS and JS
- Bootstrap icons
- Custom CSS for enhanced styling
- Custom JS scripts for enhanced functionality
- Google fonts - Ubuntu for body fonts and Arvo for headings
This template provides some styles and code as examples. You can find the full source code here.
Requirements
In addition to the styles and functions explicitly demonstrated in this template, the website should feature:
- The ability to add custom blocks within the content area of pages
- The ability to change the links featured in the top navigation bars
- The ability to display related pages and links
- Retain the features available on the current website based on the styles displayed in this template.
- CSS customisation options on our end to avoid the need to add in-line styling.
Colours
#003355
Headings
#01626b
Headings (.green-text)
#0077aa
Buttons and links
#c3ebfa
Body background
#E6F3FB
Light background(.l-bg)
Top navigation (menu bar)
Specifications
- On larger screens, there should be two separate bars.
- On smaller screens (992px and below), there should be one bar.
- This bar should be collapsed by default and include links from both the top and bottom bar.
- The search function should be accessible from this menu once expanded.
- The navbars should be offset by Gecco's fixed nav-bar, not covered or replaced.
- On larger screens, dropdowns should be hoverable, and on smaller screens (992px and below), they should be togglable.
- Menu-links should always fit on a single line, and collapse into a toggle where this is not possible.
Note: the page links currently displayed in this template are there for demonstration and should be modifiable on our end.
Sponsors bar
Purpose
The sponsors bar is a way to make sure NZVA partners are being fairly showcased on our website.
Specifications
- Continous carousel displaying NZVA partner logos
- Fixed at the bottom of every page
- Able to be hidden by the end-user
- Should link to our sponsors page
- The carousel images should be replaceable
- The bar must not cover the page footer
Additional: ideally, we would like to determine the frequency of sponsor logos based on their sponsorship level. For instance, diamond sponsors should have their logos displayed twice as often as gold sponsors, and gold sponsors twice as often as silver sponsors.
Page spacing and structure
Two-column page structure
About
A standard page will consist of two columns: a sidebar on the left and a content area on the right. This layout keeps the current website’s style while providing a cleaner and more user-friendly experience.
Blocks added to the content section can contain nested rows and columns, offering greater flexibility in layout, just as they do currently.
Diagram
Note: this diagram doesn't reflect mobile sizing.
.container-fluid
width: 100%;
max-width: 1400px;
padding-right: 0.75rem;
padding-left: 0.75rem;
margin-right: auto;
margin-left: auto;
.row .px-4 .py-2
padding-right: 1.5rem;
padding-left: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
.col-md-3 .sidebar-container .p-2
padding: 0.5rem;
.custom-sidebar
[Sidebar content]
.col-md-9 .page-content .p-2
padding:0.5rem;
.container-fluid .p-0 .w-bg .pb-2
padding: 0;
padding-bottom: 0.5rem;
.row .g-0
padding: 0;
margin: 0;
.col
padding: 0;
margin: 0;
.page-feature
[Page title with hero background-image]
.container-fluid px-3
padding: 1rem;
.row .content-block
padding: 0.5rem 0;
margin: 0.5rem 0;
[Insertable content block]
.col
[Block content]
.row .content-block
[Insertable content block]
.col-md-6
[Block content multi-column]
.col-md-6
[Block content multi-column]
Single column page structure (home page)
About
Pages without a sidebar will have a single column with a large hero section at the top and a content section below. Rows in the content column can contain nested rows and columns for more layout flexibility.
Home page demo.hero-container .container-fluid .p-2
[Hero section with background image]
.container-fluid .p-0
.row g-0
.col-lg-6 .hp-content-block .w-bg
[Hero section content]
.container-fluid .p-2
width: 100%;
max-width: 1200px;
padding: 0.5rem;
margin-left: auto;
margin-right: auto;
.row .l-bg .hp-content-block
padding: 2rem 1.5rem;
margin: 1.5rem 0;
[Insertable content block with light blue background]
.col .p-0
padding: 0rem;
.container-fluid .p-0
padding: 0rem;
.row
[Nested rows]
.col-md-6
[Block content multi-column]
.col-md-6
[Block content multi-column]
.row .w-bg .hp-content-block
[Insertable content block with white background]
.col .p-0
.container-fluid .p-0
.row
.col-md-4
[Block content multi-column]
.col-md-4
[Block content multi-column]
.col-md-4
[Block content multi-column]
Typography
Heading text
Heading 1
font-family: 'Arvo', serif;
line-height: 1.2em;
color: #003355;
font-size:2.25rem;
font-weight:700;
margin-bottom:0.3rem;
Heading 2
font-family: 'Arvo', serif;
font-weight: 700;
line-height: 1.2em;
color: #003355;
font-size:1.75rem;
margin-bottom:0.3rem;
Heading 3
font-family: 'Arvo', serif;
font-weight: 300;
line-height: 1.2em;
color: #003355;
font-size:1.5rem;
margin-bottom:0.3rem;
Heading 4
font-family: 'Arvo', serif;
font-weight: 300;
line-height: 1.2em;
color: #003355;
font-size:1.25rem;
margin-bottom:0.3rem;
Heading 5
font-family: 'Ubuntu', sans-serif;
font-weight: 500;
line-height: 1.2em;
color: #003355;
font-size:1rem;
margin-bottom:0.3rem;
Section headings
Pariatur excepteur eu culpa laboris pariatur
.section-heading{
border-bottom:0.16rem dotted #01626b;
scroll-margin-top:160px;
margin-top:1rem;
}
Body text
Cillum laborum Lorem labore ullamco commodo deserunt ex Lorem. Elit veniam reprehenderit aute nulla excepteur non excepteur. Aliquip Lorem commodo nulla. In nisi reprehenderit commodo velit et occaecat. Id in voluptate elit enim enim anim occaecat officia.
font-family: 'Ubuntu', sans-serif;
font-weight: 300;
line-height: 1.5em;
font-size: 1rem;
margin-bottom:0.5rem;
Small body text
Empor commodo sint excepteur adipisicing ad. Esse ex magna ipsum culpa adipisicing consectetur pariatur non ad. Reprehenderit ut qui mollit. Fugiat labore irure exercitation id eu voluptate qui velit dolor amet tempor. Eiusmod culpa mollit eu.
.small-text {
font-size: 0.85rem;
line-height: 1.4em;
}
Blockquotes
Excepteur aliqua nulla ea enim. Qui velit aute incididunt. Commodo magna enim occaecat duis id cupidatat sunt laboris eu consequat sint enim consequat amet deserunt.
.blockquote{
padding:1rem;
font-size:1rem;
font-weight:300;
border-radius:0.25rem;
background:rgba(0, 119, 170,0.05);
border-left:5px solid rgba(0, 119, 170,1);
}
.blockquote-footer{
font-style: italic;
}
Callouts
.callout-info
elit consectetur amet et do fugiat anim. Quis eiusmod ipsum exercitation aliquip consectetur tempor et. Mollit dolore in eu occaecat aliqua esse aliqua irure anim ad Lorem. Ut eiusmod ut in ullamco et.
.callout-note
elit consectetur amet et do fugiat anim. Quis eiusmod ipsum exercitation aliquip consectetur tempor et. Mollit dolore in eu occaecat aliqua esse aliqua irure anim ad Lorem. Ut eiusmod ut in ullamco et.
.callout-warning
elit consectetur amet et do fugiat anim. Quis eiusmod ipsum exercitation aliquip consectetur tempor et. Mollit dolore in eu occaecat aliqua esse aliqua irure anim ad Lorem. Ut eiusmod ut in ullamco et.
.callout{
padding:1rem;
border-radius:0.25rem;
margin:1rem 0rem;
}
.callout-info{
background:rgba(18,220,230,0.1);
border-left:5px solid rgba(18,220,230,1);
}
.callout-note{
background:rgba(255, 234, 71,0.2);
border-left:5px solid rgba(255,234,71,1);
}
.callout-warning{
background:rgba(255,134,122,0.1);
border-left:5px solid rgba(255,134,122,1);
}
.callout b{
color:#003355;
font-weight:400;
}
Bulleted list
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Numbered list
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
.list li{
padding-left:0.25rem;
margin-bottom:0.5rem;
font-size:1rem;
font-weight:300;
}
.list{
margin:1rem 0;
padding-left:1.5rem;
}
ul.list > li > ul{
list-style-type:"‣";
padding-left:0.5rem;
margin-top:0.5rem;
}
ul.list > li > ul > li, ul.list > li > ol > li{
padding-left:0.5rem;
margin-bottom:0.25rem;
}
ol.list > li > ol{
list-style-type:lower-alpha;
padding-left:1rem;
margin-top:0.5rem;
}
Note: having the option to add new styles to any typographic elements not defined here would be fantastic.
Colours
#003355
Headings
#01626b
Headings (.green-text)
#0077aa
Buttons and links
#c3ebfa
Body background
#E6F3FB
Light background(.l-bg)
Buttons
Plain text buttons
Large plain text buttonSmall plain text button
.plain-button{
color: #0077aa;
box-sizing: border-box;
display: inline-block;
text-decoration: none;
border-bottom: 0.15em solid rgba(260, 260, 260,0);
transition: 0.2s;
line-height:1.3em;
}
/* Animation and arrow icon */
plain-button:hover {
border-bottom: 0.15em solid #0077aa;
transition: 0.2s;
padding-left: 0.15rem;
transition: 0.1s;
text-decoration: none;
color: #0077aa;
}
.plain-button:hover::after {
transition: 0.2s;
content: '›››';
animation: arrowSwap 0.15s;
text-decoration: none;
opacity:1;
}
.plain-button::after {
content: '›';
margin-left: 0.25em;
text-decoration: none;
transition:0.2s;
opacity:0.8;
}
@keyframes arrowSwap{
from {
content: '›';
opacity:0.5;
}
50%{
content: '››';
}
to {
content: '›››';
opacity:1;
}
}
/* Shared classes */
.lg-button{
font-size: 1.2rem;
font-weight: 700;
margin-top: 1rem;
margin-bottom:1rem;
}
.sm-button{
font-size:1rem;
font-weight:500;
margin-top: 1rem;
margin-bottom:1rem;
}
Background buttons
Large background buttonSmall background button
.bg-button {
background: #0077aa;
color:white;
box-sizing: border-box;
display: inline-block;
text-decoration: none;
padding:0.6rem 1.2rem 0.6rem 1.2rem;
border-radius:0.25rem;
transition: 0.2s;
line-height:1.3em;
}
.bg-button:hover{
color:white;
padding:0.6rem 1.5rem 0.6rem 0.9rem;
text-decoration: none;
}
.bg-button:hover::after{
content: '›';
position:absolute;
margin-left:0.25em;
}
/* Shared classes */
.lg-button{
font-size: 1.2rem;
font-weight: 700;
margin-top: 1rem;
margin-bottom:1rem;
}
.sm-button{
font-size:1rem;
font-weight:500;
margin-top: 1rem;
margin-bottom:1rem; }
In-line buttons
In-line link with text.
.inline-button{
color:#0077aa!important;
cursor:pointer;
font-weight:400;
}
.inline-button:hover{
color:#003355!important;
}
Note: these button types should be available by default via a class sytem, without the need for including in-line CSS.
Accordions
.accordion{
padding: 0;
}
.accordion-item{
margin: 0.5rem;
border: none;
font-size: 1rem!important;
height: 100%;
}
.accordion-item button{
padding: 0.5rem;
background: #E6F3FB;
border-radius: 0.25rem!important;
font-size: 1rem!important;
font-family: 'Arvo', serif;
}
.accordion-item button:focus{
outline: none !important;
box-shadow: none!important;
color: inherit!important;
background: #E6F3FB;
}
Content grids
Purpose
This content grid system is a modular and adaptable design element intended to showcase various types of content such as links, articles, news, and other relevant resources in an organized and visually appealing manner. This grid system is designed to enhance the user experience by providing easy access to key information and resources.
Design Components:
- Image: The image serves as a visual representation of the content, capturing the user's attention and providing a abstracted preview of the information.
- Blurb: The blurb is a brief summary or teaser of the content, giving users an idea of what they can expect when engaging with the resource.
- Button: The button serves as a clear call-to-action, encouraging users to click and access the content.
Laborum aliqua officia excepteur.
Labore proident sint officia eiusmod ea. Id nulla nisi laboris. Tempor commodo Lorem dolore sunt veniam eu. Lorem velit eiusmod sit ipsum consequat sunt laborum quis eu et magna mollit ad nostrud duis. Adipisicing sunt magna elit nulla anim nulla id fugiat voluptate laboris amet labore. Veniam aute proident est in qui.
Tempor id reprehenderit sit quis aute occaecat ullamco.
Commodo irure culpa officia commodo elit adipisicing veniam do in dolore incididunt. Commodo irure eiusmod fugiat tempor ad et in commodo aliqua proident aliqua. Minim eu dolor nulla dolore.
Laborum aliqua officia excepteur.
Labore proident sint officia eiusmod ea. Id nulla nisi laboris. Tempor commodo Lorem dolore sunt veniam eu. Lorem velit eiusmod sit ipsum consequat sunt laborum quis eu et magna mollit ad nostrud duis. Adipisicing sunt magna elit nulla anim nulla id fugiat voluptate laboris amet labore. Veniam aute proident est in qui.
Tempor id reprehenderit sit quis aute occaecat ullamco.
Commodo irure culpa officia commodo elit adipisicing veniam do in dolore incididunt. Commodo irure eiusmod fugiat tempor ad et in commodo aliqua proident aliqua. Minim eu dolor nulla dolore.
Tempor id reprehenderit sit quis aute occaecat ullamco.
Commodo irure culpa officia commodo elit adipisicing veniam do in dolore incididunt. Commodo irure eiusmod fugiat tempor ad et in commodo aliqua proident aliqua. Minim eu dolor nulla dolore.
