Content Two Column

The Challenge

The Government of Jersey (GoJ) sought to protect its citizens from COVID-19. Calligo was asked to ensure the data used in testing and tracing was legally compliant.

The Government of Jersey (GoJ) is responsible for the safety, wellbeing, and security of approximately 100,000 citizens. Located in the Channel Islands, Jersey is a British Crown dependency which is not part of the United Kingdom, nor the EU.

When the global COVID-19 pandemic struck in March 2020, the GoJ needed to act quickly to protect its population. This required new processes – performed at speed and using sensitive data in ways never previously considered nor provisioned for. The GoJ chose to adopt a policy whereby the three key data sources (personal data, medical data and PCR test results) would be kept distinct but integrated.

With the data architecture deployed, the GoJ turned to Calligo to ensure that its practical use in the field was as respectful of data subjects’ rights as its intended design.

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-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(40);
            line-height: rem-calc(48);
        }
    }
    .heading-col{
        > *{
            max-width: rem-calc(636);
        }
    }
    .content-col{
        color: $black2;
        
        @include bp($lg){
            display: flex;
            justify-content: flex-end;
        }
        > *{
            max-width: rem-calc(526);
        }
        p{
            letter-spacing: 0.05em;
            margin-bottom: rem-calc(32);
            line-height: rem-calc(28);

            &: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.