Sircus

Example

Card

Normal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button

<div class="t-border t-borderGray30 t-gutter">
  <div class="t-gutterReset">
    <img src="http://placehold.it/640x360">
  </div>
  <h2>...</h2>
  <p>...</p>
  <a class="t-mbMd Button" href="#">...</a>
</div>

Simple

<div class="t-border t-borderGray20 t-gutter t-clear">
  <h2>...</h2>
  <p>...</p>
</div>

Gray

<div class="t-fillGray10 t-gutter t-clear">
  <h2>...</h2>
  <p>...</p>
</div>

Primary color

<div class="t-fillPrimaryLight t-gutter t-border t-borderPrimary t-borderRadiusMd t-clear">
  <h2 class="t-colorPrimaryDark">...</h2>
  <p class="t-colorPrimary">...</p>
</div>

Success color

<div class="t-fillSuccessLight t-gutter t-border2x t-borderSuccess t-borderRadiusXl t-clear">
  <h2 class="t-colorSuccessDark">...</h2>
  <p class="t-colorSuccess">...</p>
</div>

Notice color

<div class="t-fillNoticeLight t-gutter t-border3x t-borderNotice t-borderRadiusXl t-clear">
  <h2 class="t-colorNoticeDark">...</h2>
  <p class="t-colorNotice">...</p>
</div>

Warning color

<div class="t-fillWarningLight t-gutter t-border4x t-borderWarning t-borderRadiusXl t-clear">
  <h2 class="t-colorWarningDark">...</h2>
  <p class="t-colorWarning">...</p>
</div>

Error color

<div class="t-fillErrorLight t-gutter t-border4x t-borderError t-borderRadiusXl t-clear">
  <h2 class="t-colorErrorDark">...</h2>
  <p class="t-colorError">...</p>
</div>