Edition

Time period of artist edition<br /><br />
<div class="edition-section">
    <hr class="edition-separator" />
    <div class="edition">Edition</div>
    <span class="edition-date edition-date--edition-1">18
        <hr class="edition-date-separator" />
        19
    </span>
</div>
<div class="edition-section">
    <hr class="edition-separator" />
    <div class="edition">Edition</div>
    <span class="edition-date edition-date--edition-2">20
        <hr class="edition-date-separator edition-date-separator--edition-2" />
        heute
    </span>
</div>
Time period of artist edition<br />
<br />
<div class="edition-section">
    <hr class="edition-separator" />
    <div class="edition">Edition</div>
    <span class="edition-date edition-date--edition-1">18
        <hr class="edition-date-separator" />
        19
    </span>
</div>

<div class="edition-section">
    <hr class="edition-separator" />
    <div class="edition">Edition</div>
    <span class="edition-date edition-date--edition-2">20
        <hr class="edition-date-separator edition-date-separator--edition-2" />
        heute
    </span>
</div>
/* No context defined. */
  • Content:
    $edition-font-size: $font-size-base;
    
    //Edition Label for Artist Collabo
    .edition-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      margin-bottom: $spacer-sm;
      text-align: center;
    }
    
    .edition-separator {
      transform: rotate(90deg);
      margin-bottom: $spacer-lg;
      border: 0;
      background-color: $brand-gray;
      width: $spacer-xl;
      height: 1px;
    }
    
    .edition {
      @extend %heading-font-bold;
    
      margin-bottom: $spacer-xs;
      text-transform: uppercase;
      color: $brand-gray;
      font-size: $font-size-md;
    }
    
    .edition-date {
      @extend %heading-font-heavy;
    
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: $font-size-xxl;
    
      &--edition-1 {
        color: $brand-blue;
      }
    
      &--edition-2 {
        color: $brand-petrol;
      }
    }
    
    .edition-date-separator {
      transform: rotate(90deg);
      margin: $spacer-sm 0;
      border: 0;
      background-color: $brand-red;
      min-width: $spacer-base;
      height: 5px;
    
      &--edition-2 {
        background-color: $brand-apricot;
      }
    }
    
    // Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      .edition-section {
        margin-bottom: $spacer-xxs;
      }
    
      .edition {
        font-size: $font-size-lg;
      }
    
      .edition-separator {
        margin-bottom: $spacer-xl;
        width: ms(20);
      }
    
      .edition-date {
        flex-direction: row;
        font-size: $font-size-xxxxl;
      }
    
      .edition-date-separator {
        transform: rotate(0deg);
        margin: 0 $spacer-xxs;
        height: 8px;
      }
    }
    
  • URL: /components/raw/edition/_edition.scss
  • Filesystem Path: components/01-atoms/text/block/edition/_edition.scss
  • Size: 1.5 KB

Element for the Artist Collabo Page