Copy environment

Item Grid 

<div class="content-section content-section--sticky ">
    <div class="content-section__title text-button">recent fonts</div>
    <div class="content-section__content">
        <div class="item-grid">
            <div class="item-grid__inner">

                <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                    <a class="item-cell__content" href="#">
                        <div class="item-cell__main-text">
                            Abg
                        </div>
                        <span class="item-cell__sub-text text-small">
                            Flex 0.1
                        </span>
                    </a>
                </div>

                <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                    <a class="item-cell__content" href="#">
                        <div class="item-cell__main-text">
                            Abg
                        </div>
                        <span class="item-cell__sub-text text-small">
                            Flex 0.1
                        </span>
                    </a>
                </div>

                <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                    <a class="item-cell__content" href="#">
                        <div class="item-cell__main-text">
                            Abg
                        </div>
                        <span class="item-cell__sub-text text-small">
                            Flex 0.1
                        </span>
                    </a>
                </div>

                <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                    <a class="item-cell__content" href="#">
                        <div class="item-cell__main-text">
                            Abg
                        </div>
                        <span class="item-cell__sub-text text-small">
                            Flex 0.1
                        </span>
                    </a>
                </div>

                <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                    <a class="item-cell__content" href="#">
                        <div class="item-cell__main-text">
                            Abg
                        </div>
                        <span class="item-cell__sub-text text-small">
                            Flex 0.1
                        </span>
                    </a>
                </div>

                <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                    <a class="item-cell__content" href="#">
                        <div class="item-cell__main-text">
                            Abg
                        </div>
                        <span class="item-cell__sub-text text-small">
                            Flex 0.1
                        </span>
                    </a>
                </div>
            </div>

            <a href="#" class="button button--icon-text item-grid__button ">

                <span class="button__inner" data-text="Browse more">
                    <span class="button__text">
                        Browse more
                        <svg class="icon  button__icon">
                            <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                        </svg>

                    </span>
                </span>
            </a>
        </div>

    </div>
</div>
 
{% set content %}
    <div class="item-grid">
        <div class="item-grid__inner">
            {% for item in data.items %}
                {% include '@item-cell' with {class: "item-grid__item", modifier: "item-cell--ratio", data: item} %}
            {% endfor %}
        </div>
        {% if data.button %}
            {% include '@button' with {class: "item-grid__button", modifier: "button--icon-text", data: data.button} %}
        {% endif %}
    </div>
{% endset %}

{% include '@content-section' with {modifier: "content-section--sticky", data: {title: data.sectionTitle, content: content}} %}

{
  "language": "en-US",
  "data": {
    "sectionTitle": "recent fonts",
    "button": {
      "text": "Browse more",
      "icon": "arrow-right",
      "link": "#"
    },
    "items": [
      {
        "mainText": "Abg",
        "subText": "Flex 0.1",
        "link": "#"
      },
      {
        "mainText": "Abg",
        "subText": "Flex 0.1",
        "link": "#"
      },
      {
        "mainText": "Abg",
        "subText": "Flex 0.1",
        "link": "#"
      },
      {
        "mainText": "Abg",
        "subText": "Flex 0.1",
        "link": "#"
      },
      {
        "mainText": "Abg",
        "subText": "Flex 0.1",
        "link": "#"
      },
      {
        "mainText": "Abg",
        "subText": "Flex 0.1",
        "link": "#"
      }
    ]
  }
}
  • Content: 
    .item-grid {
    display: flex;
    flex-direction: column;
}

.item-grid__inner {
    display: flex;
    flex-wrap: wrap;
    transition: $transition-duration $transition-easing;
    transition-property: border-bottom-color;
    position: relative;
    border-bottom: 1px solid var(--color-brand);

    &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        bottom: 0;
        border-left: 1px solid var(--color-brand);

        @include bp(sm-min) {
            left: 33.33%;
            width: 33.33%;
            border-left: 1px solid var(--color-brand);
            border-right: 1px solid var(--color-brand);
        }

        @include bp(md-min) {
            left: 25%;
            width: 50%;
        }
    }

    &:before {
        display: none;
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        bottom: 0;
        border-left: 1px solid var(--color-brand);
        z-index: map_get($zindex, 'itemGridLine');

        @include bp(md-min) {
            display: block;
        }
    }
}

.item-grid__item {
    position: relative;
    flex-basis: 50%;
    max-width: 50%;
    flex-grow: 1;

    @include bp(sm-min) {
        flex-basis: 33.33%;
        max-width: 33.33%;
    }

    @include bp(md-min) {
        flex-basis: 25%;
        max-width: 25%;
    }

    &:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        bottom: -1px;
        border-bottom: 1px solid var(--color-brand);
        z-index: map_get($zindex, 'itemGridLine');
    }
}

.item-grid__empty {
    display: flex;
    background-color: var(--color-background);
    position: relative;

    &:before {
        display: block;
        content: '';
        width: 100%;
        padding-top: 100%;
    }
}

.item-grid__button {
    margin: 16px;
    margin-bottom: 71px;
    align-self: flex-end;

    @include bp(sm-min) {
        margin: 32px;
        margin-bottom: 71px;
    }
}
  • URL: /components/raw/item-grid/item-grid.scss
  • Filesystem Path: src/patterns/modules/item-grid/item-grid.scss
  • Size: 2.1 KB