Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
Building up from molecules to organisms encourages creating standalone, portable, reusable components.
<article class="prismea-article">
<div class="prismea-article--slot">
<h1 class="prismea-title-1 -center">Article</h1>
</div>
<div class="prismea-article--slot">
<p class="prismea-text -center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.
</p>
</div>
</article>
article.prismea-article
.prismea-article--slot
h1.prismea-title-1.-center Article
.prismea-article--slot
p.prismea-text.-center.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
Used as centered message.
<div class="prismea-body-message -absolute">
<div class="prismea-body-message--box">
<div class="prismea-vertical-spacing-30 -center">
<div class="prismea-vertical-spacing-30--slot"><i class="prismea-icon -x4 prismea-glyph-24_hand-stop"></i>
</div>
<div class="prismea-vertical-spacing-30--slot">
<h1 class="prismea-title-1">Dashboard example message title</h1>
</div>
<div class="prismea-vertical-spacing-30--slot">
<p class="prismea-text"><a class="prismea-link" href="#">Link to somewhere</a></p>
</div>
</div>
</div>
</div>
.prismea-body-message.-absolute
.prismea-body-message--box
.prismea-vertical-spacing-30.-center
.prismea-vertical-spacing-30--slot
i.prismea-icon.-x4.prismea-glyph-24_hand-stop
.prismea-vertical-spacing-30--slot
h1.prismea-title-1 Dashboard example message title
.prismea-vertical-spacing-30--slot
p.prismea-text
a.prismea-link(href='#') Link to somewhere
Used in email validation confirmation.
<div class="prismea-global-message -fixed">
<div class="prismea-global-message--box">
<div class="prismea-illustrated-article">
<div class="prismea-illustrated-article--illustration"><img class="prismea-drawing" src="/atom/drawing/example-drawing.svg" alt="Some drawing items"/>
</div>
<div class="prismea-illustrated-article--article">
<article class="prismea-article">
<div class="prismea-article--slot">
<h1 class="prismea-title-1 -center">Article</h1>
</div>
<div class="prismea-article--slot">
<p class="prismea-text -center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.
</p>
</div>
</article>
</div>
</div>
</div>
</div>
.prismea-global-message.-fixed
.prismea-global-message--box
.prismea-illustrated-article
.prismea-illustrated-article--illustration
img.prismea-drawing(src='/atom/drawing/example-drawing.svg', alt='Some drawing items')
.prismea-illustrated-article--article
article.prismea-article
.prismea-article--slot
h1.prismea-title-1.-center Article
.prismea-article--slot
p.prismea-text.-center.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
<div class="prismea-header">
<div class="prismea-header--slot -search-bar">
<div class="prismea-input-group ion--unfocus ion--sm">
<div class="prismea-input-group--slot -expand ion--slot-left">
<input class="prismea-input-text -secondary " type="search" placeholder="Mighty text"/>
</div>
<div class="prismea-input-group--slot ion--slot-right">
<button class="prismea-button -icon "><i class="prismea-glyph-12_search"></i>
</button>
</div>
</div>
</div>
<div class="prismea-header--slot">
<div class="prismea-contextual-profile-menu">
<div class="prismea-contextual-menu ion--open">
<div class="prismea-contextual-menu--button">
<div class="prismea-contextual-profile-menu--card">
<div>
<div class="prismea-avatar -rounded"><img src="https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80"/>
</div><span class="prismea-contextual-profile-menu--username">Miles Morales</span>
<div class="prismea-contextual-profile-menu--caret"><i class="prismea-glyph-12_caret-down"></i></div>
</div>
</div>
</div>
<ul class="prismea-contextual-menu--menu">
<li>
<button class="prismea-contextual-menu--item">First</button>
</li>
<li>
<button class="prismea-contextual-menu--item">Second</button>
</li>
<li>
<button class="prismea-contextual-menu--item">Third</button>
</li>
</ul>
</div>
</div>
</div>
</div>
.prismea-header
.prismea-header--slot.-search-bar
.prismea-input-group.ion--unfocus.ion--sm
.prismea-input-group--slot.-expand.ion--slot-left
input.prismea-input-text.-secondary(type='search', placeholder='Mighty text')
.prismea-input-group--slot.ion--slot-right
button.prismea-button.-icon
i.prismea-glyph-12_search
.prismea-header--slot
.prismea-contextual-profile-menu
.prismea-contextual-menu.ion--open
.prismea-contextual-menu--button
.prismea-contextual-profile-menu--card
div
.prismea-avatar.-rounded
img(src='https://images.unsplash.com/photo-1541298645675-6cc8e127934d?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80')
span.prismea-contextual-profile-menu--username Miles Morales
.prismea-contextual-profile-menu--caret
i.prismea-glyph-12_caret-down
ul.prismea-contextual-menu--menu
li
button.prismea-contextual-menu--item First
li
button.prismea-contextual-menu--item Second
li
button.prismea-contextual-menu--item Third
<div class="prismea-horizontal-spacing-15">
<div class="prismea-horizontal-spacing-15--slot">First <br/> multiline</div>
<div class="prismea-horizontal-spacing-15--slot">Second</div>
<div class="prismea-horizontal-spacing-15--slot">Third</div>
</div>
<div class="prismea-horizontal-spacing-20">
<div class="prismea-horizontal-spacing-20--slot">First <br/> multiline</div>
<div class="prismea-horizontal-spacing-20--slot">Second</div>
<div class="prismea-horizontal-spacing-20--slot">Third</div>
</div>
<div class="prismea-horizontal-spacing-30">
<div class="prismea-horizontal-spacing-30--slot">First <br/> multiline</div>
<div class="prismea-horizontal-spacing-30--slot">Second</div>
<div class="prismea-horizontal-spacing-30--slot">Third</div>
</div>
<!-- Expand middle aligned-->
<div class="prismea-horizontal-spacing-20 -middle">
<div class="prismea-horizontal-spacing-20--slot -expand">First <br/> multiline</div>
<div class="prismea-horizontal-spacing-20--slot">Second</div>
<div class="prismea-horizontal-spacing-20--slot">Third</div>
</div>
.prismea-horizontal-spacing-15
.prismea-horizontal-spacing-15--slot
| First
br
| multiline
.prismea-horizontal-spacing-15--slot Second
.prismea-horizontal-spacing-15--slot Third
.prismea-horizontal-spacing-20
.prismea-horizontal-spacing-20--slot
| First
br
| multiline
.prismea-horizontal-spacing-20--slot Second
.prismea-horizontal-spacing-20--slot Third
.prismea-horizontal-spacing-30
.prismea-horizontal-spacing-30--slot
| First
br
| multiline
.prismea-horizontal-spacing-30--slot Second
.prismea-horizontal-spacing-30--slot Third
// Expand middle aligned
.prismea-horizontal-spacing-20.-middle
.prismea-horizontal-spacing-20--slot.-expand
| First
br
| multiline
.prismea-horizontal-spacing-20--slot Second
.prismea-horizontal-spacing-20--slot Third
<div class="prismea-illustrated-article">
<div class="prismea-illustrated-article--illustration"><img class="prismea-drawing" src="/atom/drawing/example-drawing.svg" alt="Some drawing items"/>
</div>
<div class="prismea-illustrated-article--article">
<article class="prismea-article">
<div class="prismea-article--slot">
<h1 class="prismea-title-1 -center">Article</h1>
</div>
<div class="prismea-article--slot">
<p class="prismea-text -center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.
</p>
</div>
</article>
</div>
</div>
.prismea-illustrated-article
.prismea-illustrated-article--illustration
img.prismea-drawing(src='/atom/drawing/example-drawing.svg', alt='Some drawing items')
.prismea-illustrated-article--article
article.prismea-article
.prismea-article--slot
h1.prismea-title-1.-center Article
.prismea-article--slot
p.prismea-text.-center.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
<div class="prismea-modal">
<div class="prismea-modal--header">
<div class="prismea-modal--header--slot">
<h1 class="prismea-title-2">Modal title</h1>
</div>
<div class="prismea-modal--header--slot -close"><i class="prismea-glyph-12_cross"></i></div>
</div>
<hr class="prismea-line"/>
<div class="prismea-modal--body">
<div class="prismea-vertical-spacing-30">
<div class="prismea-vertical-spacing-30--slot">
<p class="prismea-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.
</p>
</div>
<div class="prismea-vertical-spacing-30--slot">
<div class="prismea-field">
<div class="prismea-field--slot">
<label class="prismea-label">Label</label>
</div>
<div class="prismea-field--slot">
<input class="prismea-input-text " type="text" placeholder="Mighty text"/>
</div>
</div>
</div>
<div class="prismea-vertical-spacing-30--slot">
<div class="prismea-field">
<div class="prismea-field--slot">
<label class="prismea-label">Label</label>
</div>
<div class="prismea-field--slot">
<textarea class="prismea-textarea" placeholder="Textarea" rows="4"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="prismea-modal--footer">
<div class="prismea-modal--footer--slot">
<button class="prismea-button -link ">Button
</button>
</div>
<div class="prismea-modal--footer--slot">
<button class="prismea-button">Button
</button>
</div>
</div>
</div>
.prismea-modal
.prismea-modal--header
.prismea-modal--header--slot
h1.prismea-title-2 Modal title
.prismea-modal--header--slot.-close
i.prismea-glyph-12_cross
hr.prismea-line
.prismea-modal--body
.prismea-vertical-spacing-30
.prismea-vertical-spacing-30--slot
p.prismea-text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
.prismea-vertical-spacing-30--slot
.prismea-field
.prismea-field--slot
label.prismea-label Label
.prismea-field--slot
input.prismea-input-text(type='text', placeholder='Mighty text')
.prismea-vertical-spacing-30--slot
.prismea-field
.prismea-field--slot
label.prismea-label Label
.prismea-field--slot
textarea.prismea-textarea(placeholder='Textarea', rows='4')
.prismea-modal--footer
.prismea-modal--footer--slot
button.prismea-button.-link.
Button
.prismea-modal--footer--slot
button.prismea-button.
Button
<div class="prismea-modal-small">
<div class="prismea-modal-small--header">
<div class="prismea-modal-small--header--slot">
<h1 class="prismea-title-2">Modal title</h1>
</div>
</div>
<div class="prismea-modal-small--body">
<div class="prismea-vertical-spacing-30">
<div class="prismea-vertical-spacing-30--slot">
<p class="prismea-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus.
Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci.
Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin.
Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus.
Nunc in maximus tellus.
</p>
</div>
</div>
</div>
<div class="prismea-modal-small--footer">
<div class="prismea-modal-small--footer--line">
<div class="prismea-modal-small--footer--slot">
<button class="prismea-button">Confirm
</button>
</div>
<div class="prismea-modal-small--footer--slot">
<button class="prismea-button">Delete
</button>
</div>
</div>
<div class="prismea-modal-small--footer--line">
<button class="prismea-button -link ">Abort
</button>
</div>
</div>
<div class="prismea-modal-small--icon -bg-alert"><i class="prismea-icon prismea-glyph-40_delete"></i>
</div>
</div>
.prismea-modal-small
.prismea-modal-small--header
.prismea-modal-small--header--slot
h1.prismea-title-2 Modal title
.prismea-modal-small--body
.prismea-vertical-spacing-30
.prismea-vertical-spacing-30--slot
p.prismea-text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare nunc dui, facilisis pretium nisl mattis ac. Integer vel ipsum lectus. Pellentesque orci est, elementum eget sem sit amet, accumsan interdum orci. Sed egestas mauris sit amet magna mollis, vitae vehicula nunc sollicitudin. Suspendisse congue erat arcu. Fusce sed massa sit amet purus suscipit euismod eget et lectus. Nunc in maximus tellus.
.prismea-modal-small--footer
.prismea-modal-small--footer--line
.prismea-modal-small--footer--slot
button.prismea-button.
Confirm
.prismea-modal-small--footer--slot
button.prismea-button.
Delete
.prismea-modal-small--footer--line
button.prismea-button.-link.
Abort
.prismea-modal-small--icon.-bg-alert
i.prismea-icon.prismea-glyph-40_delete
<table class="prismea-table-grid -grid-30">
<tbody>
<tr class="prismea-table-grid--line">
<td class="prismea-table-grid--cell" colspan="3">
<div class="prismea-text -text-sm -text-bold">One</div>
<div class="prismea-numeral prismea-color -color-faded">One</div>
</td>
</tr>
<tr class="prismea-table-grid--line">
<td class="prismea-table-grid--cell" colspan="3">
<div class="prismea-text -text-sm -text-bold">One with a very long sentence (prevents content from coming out of the box)</div>
<div class="prismea-numeral prismea-color -color-faded">This-is-a-very-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong-sentence</div>
</td>
</tr>
<tr class="prismea-table-grid--line">
<td class="prismea-table-grid--cell" colspan="3">
<div class="prismea-text -text-sm -text-bold">Two</div>
<div class="prismea-numeral prismea-color -color-faded">One</div>
</td>
</tr>
<tr class="prismea-table-grid--line">
<td class="prismea-table-grid--cell">
<div class="prismea-text -text-sm -text-bold">Three</div>
<div class="prismea-numeral prismea-color -color-faded">One</div>
</td>
<td class="prismea-table-grid--cell" colspan="2">
<div class="prismea-text -text-sm -text-bold">Three</div>
<div class="prismea-numeral prismea-color -color-faded">Two</div>
</td>
</tr>
<tr class="prismea-table-grid--line">
<td class="prismea-table-grid--cell">
<div class="prismea-text -text-sm -text-bold">Four</div>
<div class="prismea-numeral prismea-color -color-faded">One</div>
</td>
<td class="prismea-table-grid--cell">
<div class="prismea-text -text-sm -text-bold">Four</div>
<div class="prismea-numeral prismea-color -color-faded">Two</div>
</td>
<td class="prismea-table-grid--cell">
<div class="prismea-text -text-sm -text-bold">Four</div>
<div class="prismea-numeral prismea-color -color-faded">Two</div>
</td>
</tr>
</tbody>
</table>
table.prismea-table-grid.-grid-30
tbody
tr.prismea-table-grid--line
td.prismea-table-grid--cell(colspan='3')
.prismea-text.-text-sm.-text-bold One
.prismea-numeral.prismea-color.-color-faded One
tr.prismea-table-grid--line
td.prismea-table-grid--cell(colspan='3')
.prismea-text.-text-sm.-text-bold One with a very long sentence (prevents content from coming out of the box)
.prismea-numeral.prismea-color.-color-faded This-is-a-very-loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong-sentence
tr.prismea-table-grid--line
td.prismea-table-grid--cell(colspan='3')
.prismea-text.-text-sm.-text-bold Two
.prismea-numeral.prismea-color.-color-faded One
tr.prismea-table-grid--line
td.prismea-table-grid--cell
.prismea-text.-text-sm.-text-bold Three
.prismea-numeral.prismea-color.-color-faded One
td.prismea-table-grid--cell(colspan='2')
.prismea-text.-text-sm.-text-bold Three
.prismea-numeral.prismea-color.-color-faded Two
tr.prismea-table-grid--line
td.prismea-table-grid--cell
.prismea-text.-text-sm.-text-bold Four
.prismea-numeral.prismea-color.-color-faded One
td.prismea-table-grid--cell
.prismea-text.-text-sm.-text-bold Four
.prismea-numeral.prismea-color.-color-faded Two
td.prismea-table-grid--cell
.prismea-text.-text-sm.-text-bold Four
.prismea-numeral.prismea-color.-color-faded Two
<div class="prismea-toasts">
<div class="prismea-toasts--slot">
<div class="prismea-toast -error">
<div class="prismea-toast--header">
<div class="prismea-toast--header--title">First</div>
<div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
</div>
<div class="prismea-toast--content">A content inside the toast.</div>
</div>
</div>
<div class="prismea-toasts--slot">
<div class="prismea-toast -error">
<div class="prismea-toast--header">
<div class="prismea-toast--header--title">Second</div>
<div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
</div>
<div class="prismea-toast--content">A content inside the toast.</div>
</div>
</div>
<div class="prismea-toasts--slot">
<div class="prismea-toast -error">
<div class="prismea-toast--header">
<div class="prismea-toast--header--title">Third</div>
<div class="prismea-toast--header--close"><i class="prismea-glyph-12_cross"></i></div>
</div>
<div class="prismea-toast--content">A content inside the toast.</div>
</div>
</div>
</div>
.prismea-toasts
.prismea-toasts--slot
.prismea-toast.-error
.prismea-toast--header
.prismea-toast--header--title First
.prismea-toast--header--close
i.prismea-glyph-12_cross
.prismea-toast--content A content inside the toast.
.prismea-toasts--slot
.prismea-toast.-error
.prismea-toast--header
.prismea-toast--header--title Second
.prismea-toast--header--close
i.prismea-glyph-12_cross
.prismea-toast--content A content inside the toast.
.prismea-toasts--slot
.prismea-toast.-error
.prismea-toast--header
.prismea-toast--header--title Third
.prismea-toast--header--close
i.prismea-glyph-12_cross
.prismea-toast--content A content inside the toast.
Add space between elements (suffix with the size you want).
<div class="prismea-vertical-spacing-5">
<div class="prismea-vertical-spacing-5--slot">First</div>
<div class="prismea-vertical-spacing-5--slot">Second</div>
<div class="prismea-vertical-spacing-5--slot">Third</div>
</div>
<div class="prismea-vertical-spacing-10">
<div class="prismea-vertical-spacing-10--slot">First</div>
<div class="prismea-vertical-spacing-10--slot">Second</div>
<div class="prismea-vertical-spacing-10--slot">Third</div>
</div>
<div class="prismea-vertical-spacing-15">
<div class="prismea-vertical-spacing-15--slot">First</div>
<div class="prismea-vertical-spacing-15--slot">Second</div>
<div class="prismea-vertical-spacing-15--slot">Third</div>
</div>
<div class="prismea-vertical-spacing-20">
<div class="prismea-vertical-spacing-20--slot">First</div>
<div class="prismea-vertical-spacing-20--slot">Second</div>
<div class="prismea-vertical-spacing-20--slot">Third</div>
</div>
<div class="prismea-vertical-spacing-30">
<div class="prismea-vertical-spacing-30--slot">First</div>
<div class="prismea-vertical-spacing-30--slot">Second</div>
<div class="prismea-vertical-spacing-30--slot">Third</div>
</div>
.prismea-vertical-spacing-5
.prismea-vertical-spacing-5--slot First
.prismea-vertical-spacing-5--slot Second
.prismea-vertical-spacing-5--slot Third
.prismea-vertical-spacing-10
.prismea-vertical-spacing-10--slot First
.prismea-vertical-spacing-10--slot Second
.prismea-vertical-spacing-10--slot Third
.prismea-vertical-spacing-15
.prismea-vertical-spacing-15--slot First
.prismea-vertical-spacing-15--slot Second
.prismea-vertical-spacing-15--slot Third
.prismea-vertical-spacing-20
.prismea-vertical-spacing-20--slot First
.prismea-vertical-spacing-20--slot Second
.prismea-vertical-spacing-20--slot Third
.prismea-vertical-spacing-30
.prismea-vertical-spacing-30--slot First
.prismea-vertical-spacing-30--slot Second
.prismea-vertical-spacing-30--slot Third
<div class="step-indicators">
<div class="step my-2">
<svg class="icon-40 icon-color-white border-radius-rounded bg-color-primary--500">
<use href="/svg/40x40/line/validate-alt.svg#validate-alt-line-40"></use>
</svg><span class="step-text title-3 ml-4 color-grey--500">Information verification
<div class="text-label">On 4th january</div></span>
</div>
<div class="step-separator h-8 bg-color-grey--500"></div>
<div class="step my-2"><span class="step-number color-primary--700 border-radius-rounded">2</span><span class="step-text title-3 ml-4 color-primary--700">Financing motive
<div class="text-label color-primary--600">Ongoing</div></span>
</div>
<div class="step-separator h-8 bg-color-grey--500"></div>
<div class="step my-2"><span class="step-number color-grey--500 border-radius-rounded">3</span><span class="step-text title-3 ml-4 color-grey--700">Project description
<div class="text-label color-grey--800">Approximately in 4 labor days</div></span>
</div>
</div>
.step-indicators
.step.my-2
svg.icon-40.icon-color-white.border-radius-rounded.bg-color-primary--500
use(href='/svg/40x40/line/validate-alt.svg#validate-alt-line-40')
span.step-text.title-3.ml-4.color-grey--500
| Information verification
.text-label On 4th january
.step-separator.h-8.bg-color-grey--500
.step.my-2
span.step-number.color-primary--700.border-radius-rounded 2
span.step-text.title-3.ml-4.color-primary--700
| Financing motive
.text-label.color-primary--600 Ongoing
.step-separator.h-8.bg-color-grey--500
.step.my-2
span.step-number.color-grey--500.border-radius-rounded 3
span.step-text.title-3.ml-4.color-grey--700
| Project description
.text-label.color-grey--800 Approximately in 4 labor days
<div class="sub-step-indicators">
<div class="sub-step"><span class="sub-step-bullet sub-step-bullet--past sub-step-bullet--first h-8 bg-color-grey--500 mr-9"></span><span class="color-grey--500">Information verification</span>
</div>
<div class="sub-step"><span class="sub-step-bullet sub-step-bullet--active h-8 bg-color-grey--500 mr-9"></span><span class="text-bold color-primary--600">Financing motive</span>
</div>
<div class="sub-step"><span class="sub-step-bullet sub-step-bullet--future sub-step-bullet--last h-8 bg-color-grey--500 mr-9"></span><span class="color-grey--800">Project description</span>
</div>
</div>
.sub-step-indicators
.sub-step
span.sub-step-bullet.sub-step-bullet--past.sub-step-bullet--first.h-8.bg-color-grey--500.mr-9
span.color-grey--500 Information verification
.sub-step
span.sub-step-bullet.sub-step-bullet--active.h-8.bg-color-grey--500.mr-9
span.text-bold.color-primary--600 Financing motive
.sub-step
span.sub-step-bullet.sub-step-bullet--future.sub-step-bullet--last.h-8.bg-color-grey--500.mr-9
span.color-grey--800 Project description
This is a tabbed browsing wrapper, using multiple .tab-item
molecule
<div class="tabs-wrapper">
<div class="tab-item mr-2">
<div class="tab-item__content">
<div class="tab-item__content-banner"></div>
<svg class="icon-16 mr-2 icon-color-grey--700">
<use href="/svg/16x16/line/rights.svg#rights-line-16"></use>
</svg>
<div class="text-label">First tab</div>
</div>
<div class="tab-item__bottom-banner"></div>
</div>
<div class="tab-item mr-2 tab-item--active">
<div class="tab-item__content">
<div class="tab-item__content-banner"></div>
<svg class="icon-16 mr-2 icon-color-primary--500">
<use href="/svg/16x16/line/user-group.svg#user-group-line-16"></use>
</svg>
<div class="text-label">Second tab (active)</div>
</div>
<div class="tab-item__bottom-banner"></div>
</div>
<div class="tab-item mr-2">
<div class="tab-item__content">
<div class="tab-item__content-banner"></div>
<svg class="icon-16 mr-2 icon-color-grey--700">
<use href="/svg/16x16/line/wallet.svg#wallet-line-16"></use>
</svg>
<div class="text-label">Third tab</div>
</div>
<div class="tab-item__bottom-banner"></div>
</div>
<div class="tab-item mr-2 tab-item--disabled">
<div class="tab-item__content">
<div class="tab-item__content-banner"></div>
<svg class="icon-16 mr-2 icon-color-grey--700">
<use href="/svg/16x16/line/wallet.svg#wallet-line-16"></use>
</svg>
<div class="text-label">Fourth tab (disabled)</div>
</div>
<div class="tab-item__bottom-banner"></div>
</div>
</div>
.tabs-wrapper
.tab-item.mr-2
.tab-item__content
.tab-item__content-banner
svg.icon-16.mr-2.icon-color-grey--700
use(href='/svg/16x16/line/rights.svg#rights-line-16')
.text-label First tab
.tab-item__bottom-banner
.tab-item.mr-2.tab-item--active
.tab-item__content
.tab-item__content-banner
svg.icon-16.mr-2.icon-color-primary--500
use(href='/svg/16x16/line/user-group.svg#user-group-line-16')
.text-label Second tab (active)
.tab-item__bottom-banner
.tab-item.mr-2
.tab-item__content
.tab-item__content-banner
svg.icon-16.mr-2.icon-color-grey--700
use(href='/svg/16x16/line/wallet.svg#wallet-line-16')
.text-label Third tab
.tab-item__bottom-banner
.tab-item.mr-2.tab-item--disabled
.tab-item__content
.tab-item__content-banner
svg.icon-16.mr-2.icon-color-grey--700
use(href='/svg/16x16/line/wallet.svg#wallet-line-16')
.text-label Fourth tab (disabled)
.tab-item__bottom-banner