Services List

Cloud & Migration

Managed detection and response

Reveal the stories in your data in a way that captivates your stakeholders.

Network Penetration Testing

CloudCore

Migrating to CloudCore gives your organization the power to accelerate its data journey

Azure

Combine the reliability and scale of Microsoft Azure with expert management to accelerate your data journey.

Managed Cloud Services

Laying out the route to being cloud-first so you can become data-driven.

Disaster Recovery as a Service

Backup as a Service

Cloud Migration

Create a platform for extracting fullest value from your data and infrastructure.

Cloud Strategy

Laying out the route to being cloud-first so you can become data-driven.

Fields
PHP
SCSS
JavaScript
Pages
Notes

Field

Field Type

Field Name

Instructions

Block Data

tab

Heading Type

select

heading_type

Heading Text

textarea

heading_text

Service type

taxonomy

service_type

Select service type from which you want to display list of services.

Block Meta

tab

text

block_id

Block Classes

text

block_classes

Margin Top

select

margin_top

Margin Bottom

select

margin_bottom

Padding Top

select

padding_top

Padding Bottom

select

padding_bottom

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

.block-services-list{
    padding: rem-calc(48 0 24 0);
    @include bp($lg){
        padding: rem-calc(96 0 72 0);
    }

    &.bg--primary{
        color: $white;
        .overline,
        .heading,
        .content-col{
            color: $white;
        }            
    }
    
    .heading{
        @include fluid-type(20, 40, 375, $max-container-size);
        letter-spacing: 0.02em;
        font-weight: 300;
        margin-bottom: rem-calc(32);
        strong{
            font-weight: 600;
        }
        @include bp($lg){
            margin-bottom: rem-calc(48);
        }
    }
    .service-item-wrap{
        margin-bottom: rem-calc(24);
    }
    .service-item{
        text-decoration: none;
        color: $white;
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: rem-calc(20);
        margin-bottom: rem-calc(24);
        padding: rem-calc(15 32 15 32);
        transition: 0.3s ease-in border;

        &:last-child{
            margin-bottom: 0;
        }
        
        &:hover{
            border-color: $orange;
        }
        @include bp($md){
            flex-direction: row;
            align-items: center;
            padding: rem-calc(30 40 30 40);
            height: 100%;
        }
        
        &-content{
            @include bp($md){
                padding-left: rem-calc(32);
                max-width: rem-calc(461);
            }
        }

        &-heading{
            font-size: rem-calc(20);
            line-height: rem-calc(32);
            display: flex;
            align-items: center;
            margin-bottom: rem-calc(16);

            @include bp($md){
                font-size: rem-calc(24);
            }

            .btn-arrow-only{
                width: 2rem;
                height: 2rem;
                margin-left: rem-calc(16);
                @include bp($md){
                    margin-left: rem-calc(32);
                }
            }
        }
    }
}

There are is no JavaScript file with this component.

Page Title

Page Type

Page URL

Services

page

https://www.calligo.io/services/

There are is no readme file with this component.