Case Study Content Two Column

The Challenge

Holcim - Driving Data-Driven Growth in Construction

The Holcim Group is a Swiss-French multinational company that manufactures building materials. It has a presence in around 70 countries, and employs around 72,000 employees.

Holcim’s executive team recognized the need for data analytics to drive business decisions and achieve their growth targets. They faced challenges in analytics bandwidth and expertise, prompting the director of strategy to seek external support. The client aimed to implement best practices in analytics, enhance data literacy, compete against competitors, and drive acquisitions as they targeted a revenue increase from $2B to $4B.

Fields
PHP
SCSS
JavaScript
Pages
Notes

Field

Field Type

Field Name

Instructions

Block Data

tab

Overline

text

overline

Heading Type

select

heading_type

Heading Text

textarea

heading_text

Content

wysiwyg

content

Block Meta

tab

text

block_id

Block Classes

text

block_classes

Background Colors

select

background_colors

Padding Top

select

padding_top

Padding Bottom

select

padding_bottom

Margin Top

select

margin_top

Margin Bottom

select

margin_bottom

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-cs-content-two-column{
    padding: 3em 0;
    
    @include bp($lg){
        padding: 6em 0;
    }
    .heading{
        font-size: rem-calc(24);
        line-height: rem-calc(32);
        letter-spacing: 0.02em;
        font-weight: 400;

        @include bp($lg){
            font-size: rem-calc(32);
            line-height: rem-calc(40);
        }
    }
    .heading-col{
        > *{
            max-width: rem-calc(526);
        }
    }
    .content-col{
        color: $black2;
        
        @include bp($lg){
            display: flex;
            justify-content: flex-end;
        }
        > *{
            max-width: rem-calc(746);
        }
        p{
            letter-spacing: 0.05em;
            margin-bottom: rem-calc(32);
            line-height: rem-calc(32);

            &:not(.p--large)
            &:not(.p--medium)
            &:not(.p--small)
            &:not(.p--x-small){
                @include fluid-type(16, 20, 375, $max-container-size);
            }            
            &:last-child{
                margin-bottom: 0;
            }
        }
    }

    &.bg--primary{
        .overline,
        .heading,
        .content-col{
            color: $white;
        }
    }    
}

There are is no JavaScript file with this component.