<div class="u-padding-all-xxl u-background-grey-15 u-sizeFull">

    <div class="Timeline u-layout-prose u-layoutCenter">
        <div class="Timeline-point">
            <div class="Timeline-point-content u-background-95 u-color-white">
                <div class="u-textWeight-700">a</div>
            </div>
        </div>
        <div class="Timeline-content u-color-black">
            <div class="Timeline-arrow Icon-drop-down u-color-white"></div>
            <div class="u-borderShadow-xs u-padding-r-all u-background-white u-borderRadius-xs">
                <h2 class="u-text-r-xs u-padding-r-bottom">corrupti ut velit</h2>
                <p class="u-text-p u-textSecondary">
                    Facilis et amet rerum omnis facere. Ex illum nobis corrupti consectetur blanditiis voluptate. Quos nam illo dignissimos dolor ipsam quisquam.
                </p>
            </div>
        </div>
    </div>

    <div class="Timeline u-layout-prose u-layoutCenter">
        <div class="Timeline-point">
            <div class="Timeline-point-content u-background-95 u-color-white">
                <div class="u-textWeight-700">in</div>
            </div>
        </div>
        <div class="Timeline-content u-color-black">
            <div class="Timeline-arrow Icon-drop-down u-color-white"></div>
            <div class="u-borderShadow-xs u-padding-r-all u-background-white u-borderRadius-xs">
                <h2 class="u-text-r-xs u-padding-r-bottom">consequatur cumque et</h2>
                <p class="u-text-p u-textSecondary">
                    Labore quia occaecati nesciunt quis quis et. Aspernatur nisi qui aliquam provident fugit ut cumque. Recusandae eos ab ex similique aut. Et saepe voluptatem non architecto earum ex possimus magnam.
                </p>
            </div>
        </div>
    </div>

    <div class="Timeline u-layout-prose u-layoutCenter">
        <div class="Timeline-point">
            <div class="Timeline-point-content u-background-95 u-color-white">
                <div class="u-textWeight-700">at</div>
            </div>
        </div>
        <div class="Timeline-content u-color-black">
            <div class="Timeline-arrow Icon-drop-down u-color-white"></div>
            <div class="u-borderShadow-xs u-padding-r-all u-background-white u-borderRadius-xs">
                <h2 class="u-text-r-xs u-padding-r-bottom">magnam odit iusto</h2>
                <p class="u-text-p u-textSecondary">
                    Est tenetur eligendi inventore quidem velit ut unde et provident. Vero ut iste deserunt est repellat. Ea quaerat voluptatum nesciunt hic. Quisquam illum praesentium ut et. Quo consequatur ut eum voluptas et consectetur est. Aut est rem blanditiis enim.
                </p>
            </div>
        </div>
    </div>

</div>
  • Content:
    /* @define Timeline */
    
    :root {
      --Timeline-padding: 3rem;
      --Timeline-arrow-size: 1rem;
      --Timeline-point-size: 10rem;
    }
    
    .Timeline {
      @extend .u-flex;
      @extend .u-flexAlignItemsCenter;
      @extend .u-color-grey-30;
      @extend .u-border-left-xs;
    
      margin-left: var(--Timeline-padding);
      margin-right: -var(--Timeline-padding);
    }
    
    .Timeline-point {
      @extend .u-padding-r-top;
      @extend .u-padding-r-bottom;
    
      margin-right: -var(--Timeline-padding);
    }
    
    .Timeline-point-content {
      @extend .u-flex;
      @extend .u-flexAlignItemsCenter;
      @extend .u-flexJustifyCenter;
      @extend .u-borderRadius-circle;
      @extend .u-borderShadow-m;
      @extend .u-border-all-xs;
      @extend .u-padding-r-all;
    
      height: var(--Timeline-point-size);
      transform: translateX(-50%);
      width: var(--Timeline-point-size);
    }
    
    .Timeline-content {
      @extend .u-padding-r-all;
      @extend .u-posRelative;
    }
    
    .Timeline-arrow {
      display: block;
      font-size: calc(var(--Timeline-arrow-size) * 2);
      height: calc(var(--Timeline-arrow-size) * 3);
      left: 0;
      margin-left: -var(--Timeline-arrow-size);
      position: absolute;
      text-shadow: 0 -4px 4px #e5e5e5;
      top: 50%;
      transform: rotate(-90deg) translateY(50%) translateX(50%);
      width: calc(var(--Timeline-arrow-size) * 3);
    }
    
  • URL: /components/raw/timeline/index.css
  • Filesystem Path: src\components\timeline\index.css
  • Size: 1.3 KB

There are no notes for this item.