Cards

Simple and Modern

Standart Card:

Voluptas nulla pariatur?

Octember 2018

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Example:


<div class="ui-card ui-card--shadow-always">
  <p class="ui-title-1 center">Voluptas nulla pariatur?</p>
  <p class="ui-title-3">Octember 2018 </p>
  <span>Sed ut perspiciatis unde omnis ...</span>
</div>

Card with colum:

Always Shadow

1.3.8 - May 2018

Fix

Fix Menu Item

Shadow Hover

1.3.8 - May 2018

Fix

Fix Menu Item

Standart

1.3.8 - May 2018

Fix

Fix Menu Item

Example:


<div class="row">
  <div class="col-xs-12 col-md-4">
    <div class="ui-card ui-card--shadow-always">
      <p class="ui-title-2 center">Always Shadow</p>
      <p class="ui-title-3">1.3.8 - May 2018  </p>
      <div class="row">
        <div class="col-xs-4"><span class="label label--primary">Fix</span></div>
        <div class="col-xs-8"><span class="ui-text-regular">Fix Menu Item</span></div>
        <div class="col-xs-12"></div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4">
    <div class="ui-card ui-card--shadow">
      <p class="ui-title-2 center">Shadow Hover</p>
      <p class="ui-title-3">1.3.8 - May 2018  </p>
      <div class="row">
        <div class="col-xs-4"><span class="label label--primary">Fix</span></div>
        <div class="col-xs-8"><span class="ui-text-regular">Fix Menu Item</span></div>
        <div class="col-xs-12"></div>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-4">
    <div class="ui-card">
      <p class="ui-title-2 center">Standart</p>
      <p class="ui-title-3">1.3.8 - May 2018  </p>
      <div class="row">
        <div class="col-xs-4"><span class="label label--primary">Fix</span></div>
        <div class="col-xs-8"><span class="ui-text-regular">Fix Menu Item</span></div>
        <div class="col-xs-12"></div>
      </div>
    </div>
  </div>
</div>

Card with small container:

Changelog

1.0.1 - 1 July 2018

Change

Changelog Page

Add

Data Changelog json

1.0.0 - 31 July 2018

Add

Changelog Page

Fix

Navbar

Example:


<div class="container container--small">
  <div class="ui-card">
    <h1 class="ui-title-1 center">Changelog</h1>
    <div class="changelog-item">
      <div class="ui-title-3"><span>1.0.1</span><span class="text-hide"> - 1 July 2018</span></div>
      <div class="changelog-item__log">
        <div class="row">
          <div class="col-xs-4"><span class="ui-label ui-label--primary">Change</span></div>
          <div class="col-xs-8"><span class="ui-text-regular">Changelog Page</span></div>
        </div>
      </div>
      <div class="changelog-item__log">
        <div class="row">
          <div class="col-xs-4"><span class="ui-label ui-label--success">Add</span></div>
          <div class="col-xs-8"><span class="ui-text-regular">Data Changelog json</span></div>
        </div>
      </div>
    </div>
    <div class="changelog-item">
      <div class="ui-title-3"><span>1.0.0</span><span class="text-hide"> - 31 July 2018</span></div>
      <div class="changelog-item__log">
        <div class="row">
          <div class="col-xs-4"><span class="ui-label ui-label--success">Add</span></div>
          <div class="col-xs-8"><span class="ui-text-regular">Changelog Page</span></div>
        </div>
      </div>
      <div class="changelog-item__log">
        <div class="row">
          <div class="col-xs-4"><span class="ui-label ui-label--danger">Fix</span></div>
          <div class="col-xs-8"><span class="ui-text-regular">Navbar</span></div>
        </div>
      </div>
    </div>
  </div>
</div>