Topic Tile: Without link 

<div class="kx-topictile">
    <span class="kx-topictile__title kx-txt-center">Maritime Offshore</span>
    <img class="kx-topictile__img" src="/assets/img/icons/industries/subsea-white.svg" alt="Subsea">
</div>
 
<{% if href %}a href="{{ href }}"{% else %}div{% endif %} class="kx-topictile{% for class in classes %} {{ class }}{% endfor %}">
    <span class="kx-topictile__title kx-txt-center">{{ title }}</span>
    <img class="kx-topictile__img" src="{{ img.url }}" alt="{{ img.alt }}">
</{% if href %}a{% else %}div{% endif %}>
 
{
  "title": "Maritime Offshore",
  "img": {
    "url": "/assets/img/icons/industries/subsea-white.svg",
    "alt": "Subsea"
  },
  "href": null,
  "classes": null
}
  • Content: 
    // ==========================================================================
// Component: topictile
// ==========================================================================

// Elements (children)
// ==========================================================================
.kx-topictile__img {
    max-width: rem-calc(128);
    margin-right: rem-calc(123);
}

.kx-topictile__title {
    @include type-scale(small);
    text-transform: uppercase;
}

// Block (parent)
// ==========================================================================
.kx-topictile {
    @include p(large, large, large, large);
    @include flex;
    @include align-items-center;
    flex-direction: column-reverse;
    color: $color-topictile-txt;

    @at-root {
        a#{&} {
            text-decoration: none;
        }
    }

    &:nth-child(odd),
    .kx-odd & {
        background: $color-topictile-odd-bg;
    }

    &:nth-child(even),
    .kx-even & {
        background: $color-topictile-even-bg;
    }
}

// Modifiers
// ==========================================================================
  • URL: /components/raw/topictile/_topictile.scss
  • Filesystem Path: src\components\01-topictile\_topictile.scss
  • Size: 1.1 KB

There are no notes for this item.