Card

Introdução

O componente Card tem o comportamento de um Box Model que é utilizado para servir de content para outros componentes como o Alert, Menu de navegação etc..

O componente pode ser apenas estilizado com borda ou pode acrescentar a sombra Drop Shadow.

Exemplo:

No markup HTML temos como padrão a colocação da classe ch-card que seria o wrapper que engloba o Header e o Content.

No exemplo abaixo temos um markup HTML do Card sendo usado para um Menu de navegação.

    <div class="ch-card ch-card--interactive ch-paddingless">
      <header class="ch-card-header">
        <h3>Hello World</h3>
      </header>
      <div class="ch-card-content ch-paddingless">
        <ul class="ch-menu">
          <li class="ch-menu-submenu is-open">
            <a href="#" class="ch-menu-item has-icon has-iconRight is-active">
              <i class="ch-icon fal fa-chart-line"></i>
              <span class="ch-menu-item-label">Item 1</span>
              <i class="ch-menu-item-arrow ch-icon fal fa-chevron-right"></i>
            </a>

            <ul class="ch-menu">
              <li class="ch-menu-item has-iconRight">
                <span class="ch-menu-item-label">Item 2</span>
                <i class="ch-icon fal fa-chart-line"></i>
              </li>

              <li class="ch-menu-item is-active">
                <span class="ch-menu-item-label">Item 3</span>
              </li>

              <li class="ch-menu-item">
                <span class="ch-menu-item-label">Item 4</span>
              </li>
            </ul>
          </li>
          <li class="ch-menu-item has-iconRight">
            <span class="ch-menu-item-label">Item 2</span>
            <i class="ch-icon fal fa-chart-line"></i>
          </li>

          <li class="ch-menu-item">
            <span class="ch-menu-item-label">Item 3</span>
          </li>

        </ul>
      </div>
    </div>

Caso seja necessário a utilização da sombra envolvendo o box, usamos a classe ch-card passando seu modificador ex: ch-card--interactive. Temos a classe ch-paddingless que é responsável por zerar o padding dos elementos do Box. Para a sua ultização apenas a coloque da div pai ex: ch-card ch-paddingless

Código Css para desenvolvimento.

Nesse código é mostrado parte à parte da composição do componente Card

   // 1. Base
  @extend %ch-card;

  // 2. Header

  &-header {
    @extend %ch-card-header;
  }

  // 4. Paddingless composition

  &.ch-paddingless {
    > .ch-card-header,
    > .ch-card-content,
    > .ch-card-footer {
      padding-right: ch-get-space(m);
      padding-left: ch-get-space(m);

      &:only-child {
        padding-top: ch-get-space(m);
        padding-bottom: ch-get-space(m);
      }

      &:last-child {
        padding-bottom: ch-get-space(m);
      }

      &:first-child {
        padding-top: ch-get-space(m);
      }
    }
  }

  // 5. Interactive variation

  &--interactive {
    @include ch-shadow;
    cursor: pointer;

    &:focus:hover,
    &:hover,
    &:focus {
      @include ch-shadow(3);
    }
  }

  // 6. Active state

  &.is-active {
    border-color: ch-get-color(primary);
  }
}

Código geral:

Essa implementação está localizada dentro da aplicação Chameleon no seguinte caminho: chameleon/sass/abstracts/components/card;

@import '../../abstracts/card';
@import '../../abstracts/colors';
@import '../../abstracts/layers';
@import '../../abstracts/space';

.ch-card {

  // 1. Base

  @extend %ch-card;

  // 2. Header

  &-header {
    @extend %ch-card-header;
  }

  // 3. Content

  &-content {
    @extend %ch-card-content;
  }

  // 4. Paddingless composition

  &.ch-paddingless {
    > .ch-card-header,
    > .ch-card-content,
    > .ch-card-footer {
      padding-right: ch-get-space(m);
      padding-left: ch-get-space(m);

      &:only-child {
        padding-top: ch-get-space(m);
        padding-bottom: ch-get-space(m);
      }

      &:last-child {
        padding-bottom: ch-get-space(m);
      }

      &:first-child {
        padding-top: ch-get-space(m);
      }
    }
  }

  // 5. Interactive variation

  &--interactive {
    @include ch-shadow;
    cursor: pointer;

    &:focus:hover,
    &:hover,
    &:focus {
      @include ch-shadow(3);
    }
  }

  // 6. Active state

  &.is-active {
    border-color: ch-get-color(primary);
  }
}