Edition

<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">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">20
            <hr class="edition-date-separator edition-date-separator--variant" />
            21
        </span>
    </div>
</div>
<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">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">20
            <hr class="edition-date-separator edition-date-separator--variant"/>
            21
        </span>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    $event-date-section-height: ($label-font-size * $label-line-height) + (2 * $spacer-xxs);
    
    
    
    //Edition Label for Artist Collabo
    .edition-section {
      @extend %heading-font-bold;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-right: auto;
      margin-left: auto;
      max-width: 250px;
      text-align: center;
    
    }
    
    .edition-separator {
      transform: rotate(90deg);
      margin-top: $spacer-xl;
      border: 0;
      background-color: $brand-gray;
      width: 3 * $spacer-base;
      height: 1px;
    }
    
    .edition {
      margin-top: $spacer-xl;
      text-transform: uppercase;
      line-height: $edition-line-height;
      font-size: $edition-font-size;
    }
    
    .edition-date {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: $spacer-md;
      padding: $spacer-sm $spacer-xl 0;
      font-size: 1.5 * $edition-font-size;
    }
    
    .edition-date-separator {
      transform: rotate(90deg);
      margin: $spacer-sm 0;
      border: 0;
      background-color: $artwork-title-color;
      min-width: $spacer-base;
      height: 5px;
    
      &--variant {
        background-color: $artwork-title-color--variant;
      }
    }
    
    
    
    
    // Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
    
      .edition-date {
        flex-direction: row;
        font-size: 2 * $edition-font-size;
    
      }
    
      .edition-date-separator {
        transform: rotate(0deg);
        margin: 0 $spacer-xs;
    
      }
    }
    
  • URL: /components/raw/edition/_edition.scss
  • Filesystem Path: components/01-atoms/text/block/edition/_edition.scss
  • Size: 1.3 KB

Element for the Artist Collabo Page