| Button name and UI |
HTML and CSS code |
|
green-button
|
HTML
<div class="green-button"><a href="">Green Button</a></div>
Show/Hide CSS
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>
Show/Hide CSS
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>
Show/Hide CSS
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>
Show/Hide CSS
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>
Show/Hide CSS
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>
Show/Hide CSS
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>
Show/Hide CSS
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>
Show/Hide CSS
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>
Show/Hide CSS
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>
Show/Hide CSS
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>
Show/Hide CSS
CSS
|
|
|
HTML
<div class="menu-home"><a href=""><i class="fa-solid fa-couch"></i></a></div>
Show/Hide CSS
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;
}
|
|
|
HTML
<div class="menu-item"><a href="">Menu Item</a></div>
Show/Hide CSS
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>
Show/Hide CSS
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>
Show/Hide CSS
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-active"><a href="">Menu Item Active</a></div>
Show/Hide CSS
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;
}
|
|
|
HTML
<div class="menu-item-active">
<a href="">Menu Item Active<i class="fa-solid fa-chevron-down"></i></a>
</div>
Show/Hide CSS
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;
}
|
| Text name, UI and Code |
|
page-title-description
HTML
<div class="page-title-description">
<div class="page-title-text">Title</div>
<div class="page-subheading-text">Description</div>
</div>
Show/Hide CSS
CSS
.page-title-text{
color: #000;
/* Title */
font-family: "Inria Serif";
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.page-subheading-text{
color: #000;
/* Subtitle */
font-family: "Inria Serif";
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Page Title Description Container*/
.page-title-description{
display: inline-flex;
padding: 32px 150px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
background: var(--Colours-Tinted-Colours-Tint-Beige, #FCF6E8);
width: 100%;
}
|
|
page-title-half-description
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HTML
<div class="page-title-description">
<div class="page-title-text">Title</div>
<div class="page-subheading-text">Description</div>
</div>
Show/Hide CSS
CSS
.page-title-text{
color: #000;
/* Title */
font-family: "Inria Serif";
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.page-subheading-text{
color: #000;
/* Subtitle */
font-family: "Inria Serif";
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Page Title Description Container*/
.page-title-description{
display: inline-flex;
padding: 32px 150px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
background: var(--Colours-Tinted-Colours-Tint-Beige, #FCF6E8);
width: 100%;
}
|
|
page-title-half-description
HTML
<div class="page-title-description">
<div class="page-title-text">Title</div>
<div class="page-subheading-text">Description</div>
</div>
Show/Hide CSS
CSS
.page-title-text{
color: #000;
/* Title */
font-family: "Inria Serif";
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.page-subheading-text{
color: #000;
/* Subtitle */
font-family: "Inria Serif";
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Page Title Description Container*/
.page-title-description{
display: inline-flex;
padding: 32px 150px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
background: var(--Colours-Tinted-Colours-Tint-Beige, #FCF6E8);
width: 100%;
}
|
|
text-two-column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HTML
<div class="page-title-description">
<div class="page-title-text">Title</div>
<div class="page-subheading-text">Description</div>
</div>
Show/Hide CSS
CSS
.page-title-text{
color: #000;
/* Title */
font-family: "Inria Serif";
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.page-subheading-text{
color: #000;
/* Subtitle */
font-family: "Inria Serif";
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Page Title Description Container*/
.page-title-description{
display: inline-flex;
padding: 32px 150px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
background: var(--Colours-Tinted-Colours-Tint-Beige, #FCF6E8);
width: 100%;
}
|
|
text-two-column
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HTML
<div class="page-title-description">
<div class="page-title-text">Title</div>
<div class="page-subheading-text">Description</div>
</div>
Show/Hide CSS
CSS
.page-title-text{
color: #000;
/* Title */
font-family: "Inria Serif";
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.page-subheading-text{
color: #000;
/* Subtitle */
font-family: "Inria Serif";
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Page Title Description Container*/
.page-title-description{
display: inline-flex;
padding: 32px 150px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
background: var(--Colours-Tinted-Colours-Tint-Beige, #FCF6E8);
width: 100%;
}
|
|
image-two-column
Show/Hide Code
HTML
<div class="page-title-description">
<div class="page-title-text">Title</div>
<div class="page-subheading-text">Description</div>
</div>
CSS
.page-title-text{
color: #000;
/* Title */
font-family: "Inria Serif";
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.page-subheading-text{
color: #000;
/* Subtitle */
font-family: "Inria Serif";
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Page Title Description Container*/
.page-title-description{
display: inline-flex;
padding: 32px 150px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
background: var(--Colours-Tinted-Colours-Tint-Beige, #FCF6E8);
width: 100%;
}
|
Show/Hide Code
HTML
<div class="page-title-description">
<div class="page-title-text">Title</div>
<div class="page-subheading-text">Description</div>
</div>
CSS
.page-title-text{
color: #000;
/* Title */
font-family: "Inria Serif";
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.page-subheading-text{
color: #000;
/* Subtitle */
font-family: "Inria Serif";
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Page Title Description Container*/
.page-title-description{
display: inline-flex;
padding: 32px 150px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
background: var(--Colours-Tinted-Colours-Tint-Beige, #FCF6E8);
width: 100%;
}
|
|
page-breaker
“Short quotes, stats, titles and statements”
Show/Hide Code
HTML
<div class="page-title-description">
<div class="page-title-text">Title</div>
<div class="page-subheading-text">Description</div>
</div>
CSS
.page-title-text{
color: #000;
/* Title */
font-family: "Inria Serif";
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.page-subheading-text{
color: #000;
/* Subtitle */
font-family: "Inria Serif";
font-size: 36px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/*Page Title Description Container*/
.page-title-description{
display: inline-flex;
padding: 32px 150px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
background: var(--Colours-Tinted-Colours-Tint-Beige, #FCF6E8);
width: 100%;
}
|
