green-button

HTML
<div class="green-button"><a href="">Green Button</a></div>

CSS
/*Green Button Primary - should be in "a" tag*/
.green-button a{
/*Display*/
display: inline-flex;
padding: 8px 16px;
align-items: center;
gap: 10px;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
background: var(--Colours-Tinted-Colours-Tint-Green, #E7F0DB);
box-shadow: 3px 3px 0px 0px #B3BFA3;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Hover*/
.green-button a:hover{
background: var(--Colours-Tinted-Colours-Tint-Green, #CEE1B6);
text-decoration: underline;
}
/*Click*/
.green-button a:active{
background: var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
box-shadow: 0px 0px 0px 0px #B3BFA3;
}

pink-button

HTML
<div class="pink-button"><a href="">Pink Button</a></div>

CSS
/*Pink Button Primary - should be in "a" tag*/
.pink-button a{
/*Display*/
display: inline-flex;
padding: 8px 16px;
align-items: center;
gap: 10px;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
background: var(--Colours-Tinted-Colours-Tint-Pink, #FFDEDE);
box-shadow: 3px 3px 0px 0px #B3BFA3;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Hover*/
.pink-button a:hover{
background: var(--Colours-Tinted-Colours-Tint-Pink, #FFBDBD);
text-decoration: underline;
}
/*Click*/
.pink-button a:active{
background: var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
box-shadow: 0px 0px 0px 0px #B3BFA3;
}

orange-button

HTML
<div class="orange-button"><a href="">Orange Button</a></div>

CSS
/*Orange Button Primary - should be in "a" tag*/
.orange-button a{
/*Display*/
display: inline-flex;
padding: 8px 16px;
align-items: center;
gap: 10px;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Orange, #E1AD86);
background: var(--Colours-Tinted-Colours-Tint-Orange, #FDE3CF);
box-shadow: 3px 3px 0px 0px #E1AD86;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Hover*/
.orange-button a:hover{
background: var(--Colours-Orange, #FBC6A0);
text-decoration: underline;
}
/*Click*/
.orange-button a:active{
background: var(--Colours-Colours-Tinted-Shade-Orange, #E1AD86);
box-shadow: 0px 0px 0px 0px #B3BFA3;
}

green-button-external

HTML
<div class="green-button">
<a href="">Green Button<i class="fa-solid fa-up-right-from-square"></i></a>
</div>

CSS
/*Green Button Primary - should be in "a" tag*/
.green-button a{
/*Display*/
display: inline-flex;
padding: 8px 16px;
align-items: center;
gap: 10px;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
background: var(--Colours-Tinted-Colours-Tint-Green, #E7F0DB);
box-shadow: 3px 3px 0px 0px #B3BFA3;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Hover*/
.green-button a:hover{
background: var(--Colours-Tinted-Colours-Tint-Green, #CEE1B6);
text-decoration: underline;
}
/*Click*/
.green-button a:active{
background: var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
box-shadow: 0px 0px 0px 0px #B3BFA3;
}

pink-button-external

HTML
<div class="pink-button">
<a href="">Pink Button<i class="fa-solid fa-up-right-from-square"></i></a>
</div>

CSS
/*Pink Button Primary - should be in "a" tag*/
.pink-button a{
/*Display*/
display: inline-flex;
padding: 8px 16px;
align-items: center;
gap: 10px;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
background: var(--Colours-Tinted-Colours-Tint-Pink, #FFDEDE);
box-shadow: 3px 3px 0px 0px #B3BFA3;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Hover*/
.pink-button a:hover{
background: var(--Colours-Tinted-Colours-Tint-Pink, #FFBDBD);
text-decoration: underline;
}
/*Click*/
.pink-button a:active{
background: var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
box-shadow: 0px 0px 0px 0px #B3BFA3;
}

orange-button-external

HTML
<div class="orange-button">
<a href="">Orange Button<i class="fa-solid fa-up-right-from-square"></i></a>
</div>

CSS
/*Orange Button Primary - should be in "a" tag*/
.orange-button a{
/*Display*/
display: inline-flex;
padding: 8px 16px;
align-items: center;
gap: 10px;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Orange, #E1AD86);
background: var(--Colours-Tinted-Colours-Tint-Orange, #FDE3CF);
box-shadow: 3px 3px 0px 0px #E1AD86;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Hover*/
.orange-button a:hover{
background: var(--Colours-Orange, #FBC6A0);
text-decoration: underline;
}
/*Click*/
.orange-button a:active{
background: var(--Colours-Colours-Tinted-Shade-Orange, #E1AD86);
box-shadow: 0px 0px 0px 0px #B3BFA3;
}

left-arrow-button

HTML
<div class="grey-button">
<a href=""><i class="fa-solid fa-arrow-left"></i></a>
</div>

CSS
.grey-button a{
/*Display*/
display: flex;
width: 46px;
height: 32px;
padding: 8px 16px;
justify-content: center;
align-items: center;
flex-shrink: 0;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shaded-Grey, #D9D9D9);
background: var(--Colours-Tinted-Colours-Tint-Grey, #F9F9F9);
box-shadow: 3px 3px 0px 0px #D9D9D9;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*grey Hover*/
.grey-button a:hover{
background: var(--Colours-Grey, #F2F2F2);
box-shadow: 3px 3px 0px 0px #D9D9D9;
}
/*grey Click*/
.grey-button a:active{
background: var(--Colours-Colours-Tinted-Shaded-Grey, #D9D9D9);
box-shadow: 0px 0px 0px 0px #D9D9D9;
}

right-arrow-button

HTML
<div class="grey-button">
<a href=""><i class="fa-solid fa-arrow-right"></i></a>
</div>

CSS
.grey-button a{
/*Display*/
display: flex;
width: 46px;
height: 32px;
padding: 8px 16px;
justify-content: center;
align-items: center;
flex-shrink: 0;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shaded-Grey, #D9D9D9);
background: var(--Colours-Tinted-Colours-Tint-Grey, #F9F9F9);
box-shadow: 3px 3px 0px 0px #D9D9D9;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*grey Hover*/
.grey-button a:hover{
background: var(--Colours-Grey, #F2F2F2);
box-shadow: 3px 3px 0px 0px #D9D9D9;
}
/*grey Click*/
.grey-button a:active{
background: var(--Colours-Colours-Tinted-Shaded-Grey, #D9D9D9);
box-shadow: 0px 0px 0px 0px #D9D9D9;
}

left-chevron-button

HTML
<div class="grey-button">
<a href=""><i class="fa-solid fa-chevron-left"></i></a>
</div>

CSS
.grey-button a{
/*Display*/
display: flex;
width: 46px;
height: 32px;
padding: 8px 16px;
justify-content: center;
align-items: center;
flex-shrink: 0;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shaded-Grey, #D9D9D9);
background: var(--Colours-Tinted-Colours-Tint-Grey, #F9F9F9);
box-shadow: 3px 3px 0px 0px #D9D9D9;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*grey Hover*/
.grey-button a:hover{
background: var(--Colours-Grey, #F2F2F2);
box-shadow: 3px 3px 0px 0px #D9D9D9;
}
/*grey Click*/
.grey-button a:active{
background: var(--Colours-Colours-Tinted-Shaded-Grey, #D9D9D9);
box-shadow: 0px 0px 0px 0px #D9D9D9;
}

right-chevron-button

HTML
<div class="grey-button">
<a href=""><i class="fa-solid fa-chevron-right"></i></a>
</div>

CSS
.grey-button a{
/*Display*/
display: flex;
width: 46px;
height: 32px;
padding: 8px 16px;
justify-content: center;
align-items: center;
flex-shrink: 0;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shaded-Grey, #D9D9D9);
background: var(--Colours-Tinted-Colours-Tint-Grey, #F9F9F9);
box-shadow: 3px 3px 0px 0px #D9D9D9;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*grey Hover*/
.grey-button a:hover{
background: var(--Colours-Grey, #F2F2F2);
box-shadow: 3px 3px 0px 0px #D9D9D9;
}
/*grey Click*/
.grey-button a:active{
background: var(--Colours-Colours-Tinted-Shaded-Grey, #D9D9D9);
box-shadow: 0px 0px 0px 0px #D9D9D9;
}

carousel-blocks

HTML
<div class="carousel-blocks">
<div style="font-weight: bold;"> Title </div>
<div> Description </div>
<div class="green-button align-button">
<a href="">Green Button</a></div>
</div>

CSS

menu-home

HTML
<div class="menu-home"><a href=""><i class="fa-solid fa-couch"></i></a></div>

CSS
.menu-home a{
/*Display*/
display: flex;
width: 70px;
height: 60px;
padding: 11px 32px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Orange, #E1AD86);
background: var(--Colours-Tinted-Colours-Tint-Orange, #FDE3CF);
box-shadow: 3px 3px 0px 0px #E1AD86;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Orange Hover*/
.menu-home a:hover{
background: var(--Colours-Orange, #FBC6A0);
text-decoration: underline;
}
/*Orange Click*/
.menu-home a:active{
background: var(--Colours-Colours-Tinted-Shade-Orange, #E1AD86);
box-shadow: 0px 0px 0px 0px #E1AD86;
}

menu-item

HTML
<div class="menu-item"><a href="">Menu Item</a></div>

CSS
.menu-item a{
/*Display*/
display: inline-flex;
height: 60px;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
background: var(--Colours-Tinted-Colours-Tint-Pink, #FFDEDE);
box-shadow: 3px 3px 0px 0px #E7B0B0;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Pink Hover*/
.menu-item a:hover{
background: var(--Colours-Pink, #FFBDBD);
text-decoration: underline;
}
/*Pink Click*/
.menu-item a:active{
background: var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
box-shadow: 0px 0px 0px 0px #E5A3A3;
}

HTML
<div class="menu-item"><a href="">Menu Item<i class="fa-solid fa-chevron-down"></i></a></div>

CSS
.menu-item a{
/*Display*/
display: inline-flex;
height: 60px;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
background: var(--Colours-Tinted-Colours-Tint-Pink, #FFDEDE);
box-shadow: 3px 3px 0px 0px #E7B0B0;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Pink Hover*/
.menu-item a:hover{
background: var(--Colours-Pink, #FFBDBD);
text-decoration: underline;
}
/*Pink Click*/
.menu-item a:active{
background: var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
box-shadow: 0px 0px 0px 0px #E5A3A3;
}

HTML
<div class="menu-item"><a href="">Menu Item<i class="fa-solid fa-up-right-from-square"></i></a></div>

CSS
.menu-item a{
/*Display*/
display: inline-flex;
height: 60px;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
background: var(--Colours-Tinted-Colours-Tint-Pink, #FFDEDE);
box-shadow: 3px 3px 0px 0px #E7B0B0;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Pink Hover*/
.menu-item a:hover{
background: var(--Colours-Pink, #FFBDBD);
text-decoration: underline;
}
/*Pink Click*/
.menu-item a:active{
background: var(--Colours-Colours-Tinted-Shade-Pink, #E5A3A3);
box-shadow: 0px 0px 0px 0px #E5A3A3;
}

menu-item-active

HTML
<div class="menu-item-active"><a href="">Menu Item Active</a></div>

CSS
.menu-item-active a{
/*Display*/
display: inline-flex;
height: 60px;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
background: var(--Colours-Tinted-Colours-Tint-Green, #E7F0DB);
box-shadow: 3px 3px 0px 0px #B3BFA3;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Green Hover*/
.menu-item-active a:hover{
background: var(--Colours-Green, #CEE1B6);
text-decoration: underline;
}
/*Green Click*/
.menu-item-active a:active{
background: var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
box-shadow: 0px 0px 0px 0px #B3BFA3;
}

menu-item-active-dropdown

HTML
<div class="menu-item-active">
<a href="">Menu Item Active<i class="fa-solid fa-chevron-down"></i></a>
</div>

CSS
.menu-item-active a{
/*Display*/
display: inline-flex;
height: 60px;
padding: 16px 32px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
/*Style*/
border-radius: 4px;
border: 2px solid var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
background: var(--Colours-Tinted-Colours-Tint-Green, #E7F0DB);
box-shadow: 3px 3px 0px 0px #B3BFA3;
text-decoration: none;
/*Text*/
color: var(--Text-Dark-Grey, #1B1B1B);
text-align: center;
/* Body */
font-family: "Open Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Green Hover*/
.menu-item-active a:hover{
background: var(--Colours-Green, #CEE1B6);
text-decoration: underline;
}
/*Green Click*/
.menu-item-active a:active{
background: var(--Colours-Colours-Tinted-Shade-Green, #B5C89D);
box-shadow: 0px 0px 0px 0px #B3BFA3;
}