Text

In this section, you will find the snippets needed for changing font size, font color and line height for your content text on both desktop and mobile version.

The changes to the text will affect modules which has comined several texts as well as standalone modules with only one text area. So the headline in full width modules will also get affected since it uses the same CSS class.

Example: Full width text module and 3 Column text module

Desktop


Headlines (Desktop)

This snippet will make it possible to change the font size, font color and line height of your headlines (H1)

/* Headlines */
.contentArea .h1{
    font-size: 40px;
    color: #70DB82;
    line-height: 1;
}
Copy to clipboard

Subheadlines (Desktop)

This snippet will make it possible to change the font size, font color and line height of your subheadlines (H2)

/* Subheadline */
.contentArea .h2{
    font-size: 30px;
    color: #ee6457;
    line-height: 1;
}
Copy to clipboard

All headlines and subheadlines in CAPITAL letters

This snippet will give all headlines and subheadlines CAPITAL letters.

/* Set all headers to uppercase */
.h1,
.h2{
	text-transform:uppercase;
}
Copy to clipboard

Body text (Desktop)

This snippet will make it possible to change the font size, font color and line height of your body text (P) as well as the color of links and their hover color.

1) Text (font color, font size, line height)

2) Text - link (font color)

3) Text - link hover (font color)

/* 1) Paragraphs (these also apply to preamble) */
.contentArea p{
    font-size: 15px;
    color: #5D6474;
    line-height: 1;
}
/* 2) Body paragraphs links color */
a, p a{
    color: #A4B1CE;
}
/* 3) Body paragraphs links color on hover */
a:hover, p a:hover{
    color: #70DB82;
}
Copy to clipboard

Preamble (Desktop)

This snippet will make it possible to change the font size, font color and line height of your preamble text as well as the color of links and their hover color.

1) Text (font color, font size, line height)

2) Text - link (font color)

3) Text - link hover (font color)

/* 1) Preamble */
.contentArea .preamble p{
    font-size: 19px;
    color: #1FCBE2;
    line-height: 1;
}

/* 2) Preamble paragraphs links color */
.preamble a{
    color : #70DB82;
}
/* 3) Preamble paragraphs links color on hover */
.preamble a:hover{
    color: #ee6457;
}
Copy to clipboard

Mobile


Headlines (Mobile)

This snippet will make it possible to change the font size, font color and line height of your headlines (H1)

@media only screen and (max-width: 671px) {
/* Headline */
.contentArea .h1{
    font-size: 40px;
    color: #70DB82;
    line-height: 1;
    }
}
Copy to clipboard

Subheadlines (Mobile)

This snippet will make it possible to change the font size, font color and line height of your subheadlines (H2)

@media only screen and (max-width: 671px) {
/* Subheadline */
.contentArea .h2{
    font-size: 30px;
    color: #ee6457;
    line-height: 1;
    }
}
Copy to clipboard

Body text (Mobile)

This snippet will make it possible to change the font size, font color and line height of your body text (p) as well as the color of links and their hover color.

1) Text (font color, font size, line height)

2) Text - link (font color)

3) Text - link hover (font color)

@media only screen and (max-width: 671px) {
/* 1) Paragraphs (these also apply to preamble) */
.contentArea p{
    font-size: 15px;
    color: #5D6474;
    line-height: 1;
    }
    
/* 2) Body paragraphs links color */
a, p a{
    color: #A4B1CE;
    }
    
/* 3) Body paragraphs links color on hover */
a:hover, p a:hover{
    color: #70DB82;
    }
}
Copy to clipboard

Preamble (Mobile)

This snippet will make it possible to change the font size, font color and line height of your preamble text as well as the color of links and their hover color.

1) Text (font color, font size, line height)

2) Text - link (font color)

3) Text - link hover (font color)

@media only screen and (max-width: 671px) {
/* 1) Preamble */
.contentArea .preamble p{
    font-size: 19px;
    color: #1FCBE2;
    line-height: 1;
    }

/* 2) Preamble paragraphs links color */
.preamble a{
    color : #70DB82;
    }
    
/* 3) Preamble paragraphs links color on hover */
.preamble a:hover{
    color: #ee6457;
    }
}
Copy to clipboard