<a href="#" class="kx-topictile">
    <span class="kx-topictile__title kx-txt-center">Maritime Offshore</span>
    <img class="kx-topictile__img" src="/assets/img/icons/industries/maritime-offshore-white.svg" alt="Maritime Offshore">
</a>
<{% 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/maritime-offshore-white.svg",
    "alt": "Maritime Offshore"
  },
  "href": "#",
  "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.