Parts UI - Components / Cards

.parts-card
__section

Container and card section

Sections are placed one after another inside the container and must be its direct inheritors.

Title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit facilis optio necessitatibus asperiores deleniti veniam saepe possimus doloribus. Aliquid modi beatae id voluptatibus? Ducimus facere doloremque, modi repellat nostrum obcaecati?

Card section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt doloremque veritatis non eveniet delectus natus.

Card section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt doloremque veritatis non eveniet delectus natus.

<div class="parts-card">
  <div class="parts-card__section">
    Default card
  </div>
</div>

Copied

<div class="parts-card">
  <div class="parts-card__section">
    Card section 1
  </div>
  <div class="parts-card__section">
    Card section 2
  </div>
</div>

Copied

Card container types

Modifiers for .parts-card

--shadow
--border
--corner
--rounded

Styles

Shadow

Border

Corner

Rounded

<div class="parts-card parts-card--shadow">
  <div class="parts-card__section">...</div>
</div>

Copied

<div class="parts-card parts-card--border">
  <div class="parts-card__section">...</div>
</div>

Copied

<div class="parts-card parts-card--corner">
  <div class="parts-card__section">...</div>
</div>

Copied

<div class="parts-card parts-card--rounded">
  <div class="parts-card__section">...</div>
</div>

Copied

--x

Horizontal layout of nested sections

Horizontal

Sections

Direction

<div class="parts-card parts-card--x">
  <div class="parts-card__section">...</div>
  <div class="parts-card__section">...</div>
  <div class="parts-card__section">...</div>
</div>

Copied

Card section types

Modifiers applied to the card section, .parts-card__section element

--sm
--md
--lg
--paper

Size modifiers

Small

Medium

Default

Large

Paper

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="parts-card">
  <div class="parts-card__section parts-card__section--sm">...</div>
  <div class="parts-card__section parts-card__section--md">...</div>
  <div class="parts-card__section">...</div>
  <div class="parts-card__section parts-card__section--lg">...</div>
  <div class="parts-card__section parts-card__section--paper">...</div>
</div>

Copied

--info
--success
--warning
--alert
--dark
--mute
--gray-dark
--gray-md
--gray
--gray-light
--gray-x-light
--gray-bg
--transparent

Background colors

info

success

warning

alert

dark

mute

gray-dark

gray-md

gray

gray-light

gray-x-light

gray-bg

transparent

<div class="parts-card">
  <div class="parts-card__section parts-card__section--success">...</div>
  <div class="parts-card__section parts-card__section--info">...</div>
  <div class="parts-card__section parts-card__section--warning">...</div>
  <div class="parts-card__section parts-card__section--alert">...</div>
  <div class="parts-card__section parts-card__section--dark">...</div>
  <div class="parts-card__section parts-card__section--mute">...</div>
  <div class="parts-card__section parts-card__section--gray-dark">...</div>
  <div class="parts-card__section parts-card__section--gray-md">...</div>
  <div class="parts-card__section parts-card__section--gray">...</div>
  <div class="parts-card__section parts-card__section--gray-light">...</div>
  <div class="parts-card__section parts-card__section--gray-x-light">...</div>
  <div class="parts-card__section parts-card__section--gray-bg">...</div>
  <div class="parts-card__section parts-card__section--transparent">...</div>
</div>

Copied

--long
--rect
--album
--square
--portrait

Geometric shapes of sections

Long

Rect

Album

Square

Portrait

<div class="parts-card parts-card--corner">
  <div class="parts-card__section parts-card__section--long">
    ...
  </div>
</div>

Copied

<div class="parts-card parts-card--corner">
  <div class="parts-card__section parts-card__section--rect">
    ...
  </div>
</div>

Copied

<div class="parts-card parts-card--corner">
  <div class="parts-card__section parts-card__section--album">
    ...
  </div>
</div>

Copied

<div class="parts-card parts-card--corner">
  <div class="parts-card__section parts-card__section--square">
    ...
  </div>
</div>

Copied

<div class="parts-card parts-card--corner">
  <div class="parts-card__section parts-card__section--portrait">
    ...
  </div>
</div>

Copied

In order to put content inside a section that has a form modifier, it is necessary to put inside one more section with --overlay modifier (see below)

--overlay

Сontent inside the section with a given geometric shape. For positioning use classes .flex-col-md or .flex-col-bottom. More about helpers

Default

Center

Bottom

<div class="parts-card parts-card--corner">
  <div class="parts-card__section parts-card__section--album">
    <div class="parts-card__section--overlay">
      Inside default
    </div>
  </div>
</div>

Copied

<div class="parts-card parts-card--corner">
  <div class="parts-card__section parts-card__section--album">
    <div class="parts-card__section--overlay flex-col-md">
      Inside center
    </div>
  </div>
</div>

Copied

<div class="parts-card parts-card--corner">
  <div class="parts-card__section parts-card__section--album">
    <div class="parts-card__section--overlay flex-col-bottom">
      Inside bottom
    </div>
  </div>
</div>

Copied

The project is being tested and under development

If you find a mistake or have ideas for the development of the project - send a message