Web Toolkit

image/svg+xml GitHub

Timeline 

<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">cum</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">earum rem culpa</h2>
                <p class="u-text-p u-textSecondary">
                    Quis molestiae ullam et. Quia inventore sint qui. Fugiat et consequatur sapiente est cum suscipit alias aut. Saepe est porro amet qui amet ut. Dolor ut voluptatem voluptas quasi animi iste rem accusantium. Beatae iure veritatis voluptatem ut eum consequatur
                    et perferendis.
                </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">pariatur</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">numquam sit veniam</h2>
                <p class="u-text-p u-textSecondary">
                    Mollitia laborum voluptas consequatur aliquid aut voluptatem. Sit nisi veritatis eius velit expedita deserunt. Distinctio iste quo eligendi error sint officiis. Ullam aut sit voluptatem. Quis est quaerat provident modi quo ut aspernatur.
                </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">est</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">voluptatem quia cum</h2>
                <p class="u-text-p u-textSecondary">
                    Minus maxime qui saepe. Quis qui molestiae. Nisi mollitia quod qui mollitia perferendis asperiores dolorem sed dolorum. Quisquam laborum suscipit aut aut dicta nihil et illum. Quia voluptatem rem explicabo asperiores ea. Cupiditate reiciendis nulla minima
                    id expedita quia.
                </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.2 KB

There are no notes for this item.