This repository has been archived by the owner on Dec 5, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #251 from zalando/topic/248-date-time-format
docs(guidelines): add date time formats. closes #248
- Loading branch information
Showing
62 changed files
with
484 additions
and
4 deletions.
There are no files selected for viewing
32 changes: 32 additions & 0 deletions
32
docs/demo/materials/01-guidelines/01-date-time-format.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| --- | ||
| notes: | | ||
| Dress code date and time format is currently based on British locale (en-gb). If in your application you use localization, we suggest to adapt the formats accordingly. | ||
| --- | ||
|
|
||
|
|
||
| <h3 class="dc-h3 f-item-heading">Date</h3> | ||
| <label class="dc-label">Full</label> | ||
| <p class="dc-h4">Mon, 05 Sep 2016</p> | ||
|
|
||
| <label class="dc-label">Normal</label> | ||
| <p class="dc-h4">05 Sep 2016</p> | ||
|
|
||
| <label class="dc-label">Short Day</label> | ||
| <p class="dc-h4">05 Sep</p> | ||
|
|
||
| <label class="dc-label">Short Month</label> | ||
| <p class="dc-h4">Sep 2016</p> | ||
|
|
||
| <h3 class="dc-h3 f-item-heading">Time</h3> | ||
| <label class="dc-label">24 Hours</label> | ||
| <p class="dc-h4">06:39</p> | ||
|
|
||
| <h3 class="dc-h3 f-item-heading">Date & Time</h3> | ||
| <label class="dc-label">Full</label> | ||
| <p class="dc-h4">Thu, 22 Dec 2016 20:04</p> | ||
|
|
||
| <label class="dc-label">Normal</label> | ||
| <p class="dc-h4">22 Dec 2016 20:04</p> | ||
|
|
||
| <label class="dc-label">Short</label> | ||
| <p class="dc-h4">22 Dec 20:04</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| --- | ||
| notes: | | ||
| Dress code number format is currently based on British locale (en-gb). If in your application you use localization, we suggest to adapt the format accordingly. | ||
| --- | ||
|
|
||
|
|
||
| <h3 class="dc-h3 f-item-heading">Number</h3> | ||
| <label class="dc-label">Long decimal</label> | ||
| <p class="dc-h4">3,610,156.00</p> | ||
|
|
||
| <label class="dc-label">Short decimal</label> | ||
| <p class="dc-h4">3,610,156.2</p> | ||
|
|
||
| <label class="dc-label">Rounded</label> | ||
| <p class="dc-h4">3,610,156</p> | ||
|
|
||
| <h3 class="dc-h3 f-item-heading">Percentage</h3> | ||
| <label class="dc-label">Long decimal</label> | ||
| <p class="dc-h4">36.40%</p> | ||
|
|
||
| <label class="dc-label">Short decimal</label> | ||
| <p class="dc-h4">36.4%</p> | ||
|
|
||
| <label class="dc-label">Rounded</label> | ||
| <p class="dc-h4">36%</p> | ||
|
|
||
| <h3 class="dc-h3 f-item-heading">Currency</h3> | ||
| <label class="dc-label">Long decimal</label> | ||
| <p class="dc-h4">€1,439.34</p> | ||
|
|
||
| <label class="dc-label">Short decimal</label> | ||
| <p class="dc-h4">€1,439.3</p> | ||
|
|
||
| <label class="dc-label">Rounded</label> | ||
| <p class="dc-h4">€1,439</p> |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <input type="checkbox" class="dc-checkbox" id="c1"> | ||
| <label for="c1" class="dc-label">Check this</label> | ||
|
|
||
| <input type="checkbox" class="dc-checkbox" id="c2" checked> | ||
| <label for="c2" class="dc-label">Check that</label> | ||
|
|
||
| <input type="checkbox" class="dc-checkbox" id="c3" checked disabled> | ||
| <label for="c3" class="dc-label">Check Disabled</label> |
8 changes: 8 additions & 0 deletions
8
docs/demo/materials/04-atoms/checkboxes/02-checkbox--switch.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <input type="checkbox" id="c4" class="dc-checkbox dc-checkbox--alt"> | ||
| <label for="c4" class="dc-label">Check this</label> | ||
|
|
||
| <input type="checkbox" id="c5" class="dc-checkbox dc-checkbox--alt" checked> | ||
| <label for="c5" class="dc-label">Check that</label> | ||
|
|
||
| <input type="checkbox" id="c6" class="dc-checkbox dc-checkbox--alt" checked disabled> | ||
| <label for="c6" class="dc-label">Check Disabled</label> |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| --- | ||
| name: Icons | ||
| title: Icons | ||
| notes: | | ||
| All Icons are included in one icon font for easy usage. Icons can be made hoverable by using of the <code>dc-icon--interactive</code> class. | ||
|
|
||
| #### Changing the icon font location | ||
|
|
||
| Dress-code assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. | ||
| Moving or renaming those font files means updating the CSS in one of two ways: | ||
| - Change the <code>$dc-font-path</code> variable in the source SASS files. | ||
| - Change the <code>url()</code> path in the compiled CSS. | ||
|
|
||
| Use whatever option best suits your specific development setup. | ||
|
|
||
| #### Svg-icons | ||
|
|
||
| Together with the icon font, Dress-code distribute also the corresponding svg files. Those svg files are used in some components. | ||
|
|
||
| Dress-code assumes that the svg files will be located in the <code>../img/svg-icons/</code> directory, relative to the compiled CSS files. | ||
|
|
||
| Moving or renaming the image folder means updating the CSS in one of two ways: | ||
|
|
||
| - Change the <code>$dc-image-path</code> variable in the source SASS files. | ||
| - Change the <code>url()</code> path in the compiled CSS. | ||
|
|
||
| Use whatever option best suits your specific development setup. | ||
|
|
||
| --- | ||
|
|
||
| <div class="sg-icons"> | ||
| <i class="dc-icon dc-icon--add"><span>add</span></i> | ||
| <i class="dc-icon dc-icon--arrow-left"><span>arrow-left</span></i> | ||
| <i class="dc-icon dc-icon--arrow-right"><span>arrow-right</span></i> | ||
| <i class="dc-icon dc-icon--check"><span>check</span></i> | ||
| <i class="dc-icon dc-icon--cog"><span>cog</span></i> | ||
| <i class="dc-icon dc-icon--close"><span>close</span></i> | ||
| <i class="dc-icon dc-icon--eye"><span>eye</span></i> | ||
| <i class="dc-icon dc-icon--history"><span>history</span></i> | ||
| <i class="dc-icon dc-icon--info-circle"><span>info-circle</span></i> | ||
| <i class="dc-icon dc-icon--lock"><span>lock</span></i> | ||
| <i class="dc-icon dc-icon--more"><span>more</span></i> | ||
| <i class="dc-icon dc-icon--undo"><span>undo</span></i> | ||
| <i class="dc-icon dc-icon--redo"><span>redo</span></i> | ||
| <i class="dc-icon dc-icon--drag"><span>drag</span></i> | ||
| <i class="dc-icon dc-icon--contact dc-icon--interactive"><span>contact</span></i> | ||
| <i class="dc-icon dc-icon--menu dc-icon--interactive"><span>menu</span></i> | ||
| <i class="dc-icon dc-icon--help dc-icon--interactive"><span>help</span></i> | ||
| <i class="dc-icon dc-icon--user dc-icon--interactive"><span>user</span></i> | ||
| <i class="dc-icon dc-icon--play dc-icon--interactive"><span>play</span></i> | ||
| <i class="dc-icon dc-icon--search dc-icon--interactive"><span>search</span></i> | ||
| <i class="dc-icon dc-icon--trash dc-icon--interactive"><span>trash</span></i> | ||
| <i class="dc-icon dc-icon--error dc-icon--interactive"><span>error</span></i> | ||
| <i class="dc-icon dc-icon--info dc-icon--interactive"><span>info</span></i> | ||
| <i class="dc-icon dc-icon--success dc-icon--interactive"><span>success</span></i> | ||
| <i class="dc-icon dc-icon--warning dc-icon--interactive"><span>warning</span></i> | ||
| </div> | ||
|
|
||
|
|
||
|
|
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <input type="radio" class="dc-radio" id="r1" name="rg1" checked> | ||
| <label for="r1" class="dc-label">Either this</label> | ||
|
|
||
| <input type="radio" class="dc-radio" id="r2" name="rg1"> | ||
| <label for="r2" class="dc-label">Or that</label> | ||
|
|
||
| <input type="radio" class="dc-radio" id="r3" name="rg2" checked disabled> | ||
| <label for="r3" class="dc-label">Disabled</label> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <select class="dc-select" name="" id=""> | ||
| <option value="">Enabled</option> | ||
| <option value="">Option 2</option> | ||
| <option value="">Option 3</option> | ||
| <option value="">Option 4</option> | ||
| <option value="">Option 5</option> | ||
| </select> | ||
|
|
||
| <select class="dc-select" disabled name="" id=""> | ||
| <option value="">Disabled</option> | ||
| <option value="">Option 2</option> | ||
| <option value="">Option 3</option> | ||
| <option value="">Option 4</option> | ||
| <option value="">Option 5</option> | ||
| </select> |
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,200 @@ | ||
| --- | ||
| name: Table | ||
| title: Table | ||
| notes: | | ||
| Use `dc-table__tr--interactive` modifier if the row is "clickable". | ||
| Use the `dc-table__tr--tight`, `dc-table__tr--comfortable` and `dc-table__tr--spacious` modifiers to adjust spacing between rows. | ||
| --- | ||
| <table class="dc-table"> | ||
| <thead class="dc-table__thead"> | ||
| <tr class="dc-table__tr"> | ||
| <th class="dc-table__th" data-col="First Name">First Name</th> | ||
| <th class="dc-table__th" data-col="Name">Last Name</th> | ||
| <th class="dc-table__th" data-col="Name">Email</th> | ||
| <th class="dc-table__th" data-col="Name">Status</th> | ||
| </tr> | ||
| </thead> | ||
|
|
||
| <tbody class="dc-table__tbody"> | ||
| <tr class="dc-table__tr"> | ||
| <td class="dc-table__td" data-col="First Name">Eileen</td> | ||
| <td class="dc-table__td" data-col="Last Name">Holland</td> | ||
| <td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr"> | ||
| <td class="dc-table__td" data-col="First Name">Duane</td> | ||
| <td class="dc-table__td" data-col="Last Name">Holmes</td> | ||
| <td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr"> | ||
| <td class="dc-table__td" data-col="First Name">Kitty</td> | ||
| <td class="dc-table__td" data-col="Last Name">Murray</td> | ||
| <td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr"> | ||
| <td class="dc-table__td" data-col="First Name">Austin</td> | ||
| <td class="dc-table__td" data-col="Last Name">Carpenter</td> | ||
| <td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr"> | ||
| <td class="dc-table__td" data-col="First Name">Toni</td> | ||
| <td class="dc-table__td" data-col="Last Name">Nichols</td> | ||
| <td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--error">Error</span></td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <table class="dc-table"> | ||
| <thead class="dc-table__thead"> | ||
| <tr class="dc-table__tr"> | ||
| <th class="dc-table__th" data-col="First Name">First Name</th> | ||
| <th class="dc-table__th" data-col="Name">Last Name</th> | ||
| <th class="dc-table__th" data-col="Name">Email</th> | ||
| <th class="dc-table__th" data-col="Name">Status</th> | ||
| </tr> | ||
| </thead> | ||
|
|
||
| <tbody class="dc-table__tbody"> | ||
| <tr class="dc-table__tr dc-table__tr--tight dc-table__tr--interactive"> | ||
| <td class="dc-table__td" data-col="First Name">Eileen</td> | ||
| <td class="dc-table__td" data-col="Last Name">Holland</td> | ||
| <td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--tight dc-table__tr--interactive"> | ||
| <td class="dc-table__td" data-col="First Name">Duane</td> | ||
| <td class="dc-table__td" data-col="Last Name">Holmes</td> | ||
| <td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--tight dc-table__tr--interactive"> | ||
| <td class="dc-table__td" data-col="First Name">Kitty</td> | ||
| <td class="dc-table__td" data-col="Last Name">Murray</td> | ||
| <td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--tight dc-table__tr--interactive"> | ||
| <td class="dc-table__td" data-col="First Name">Austin</td> | ||
| <td class="dc-table__td" data-col="Last Name">Carpenter</td> | ||
| <td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--tight dc-table__tr--interactive"> | ||
| <td class="dc-table__td" data-col="First Name">Toni</td> | ||
| <td class="dc-table__td" data-col="Last Name">Nichols</td> | ||
| <td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
|
|
||
| <table class="dc-table"> | ||
| <thead class="dc-table__thead"> | ||
| <tr class="dc-table__tr"> | ||
| <th class="dc-table__th">First Name</th> | ||
| <th class="dc-table__th">Last Name</th> | ||
| <th class="dc-table__th">Email</th> | ||
| <th class="dc-table__th">Status</th> | ||
| </tr> | ||
| </thead> | ||
|
|
||
| <tbody class="dc-table__tbody"> | ||
| <tr class="dc-table__tr dc-table__tr--comfortable"> | ||
| <td class="dc-table__td" data-col="First Name">Eileen</td> | ||
| <td class="dc-table__td" data-col="Last Name">Holland</td> | ||
| <td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--comfortable"> | ||
| <td class="dc-table__td" data-col="First Name">Duane</td> | ||
| <td class="dc-table__td" data-col="Last Name">Holmes</td> | ||
| <td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--comfortable"> | ||
| <td class="dc-table__td" data-col="First Name">Kitty</td> | ||
| <td class="dc-table__td" data-col="Last Name">Murray</td> | ||
| <td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--comfortable"> | ||
| <td class="dc-table__td" data-col="First Name">Austin</td> | ||
| <td class="dc-table__td" data-col="Last Name">Carpenter</td> | ||
| <td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--comfortable"> | ||
| <td class="dc-table__td" data-col="First Name">Toni</td> | ||
| <td class="dc-table__td" data-col="Last Name">Nichols</td> | ||
| <td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
|
|
||
| <table class="dc-table"> | ||
| <thead class="dc-table__thead"> | ||
| <tr class="dc-table__tr"> | ||
| <th class="dc-table__th">First Name</th> | ||
| <th class="dc-table__th">Last Name</th> | ||
| <th class="dc-table__th">Email</th> | ||
| <th class="dc-table__th">Status</th> | ||
| </tr> | ||
| </thead> | ||
|
|
||
| <tbody class="dc-table__tbody"> | ||
| <tr class="dc-table__tr dc-table__tr--spacious dc-table__tr--interactive"> | ||
| <td class="dc-table__td" data-col="First Name">Eileen</td> | ||
| <td class="dc-table__td" data-col="Last Name">Holland</td> | ||
| <td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--spacious dc-table__tr--interactive"> | ||
| <td class="dc-table__td" data-col="First Name">Duane</td> | ||
| <td class="dc-table__td" data-col="Last Name">Holmes</td> | ||
| <td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--spacious dc-table__tr--interactive"> | ||
| <td class="dc-table__td" data-col="First Name">Kitty</td> | ||
| <td class="dc-table__td" data-col="Last Name">Murray</td> | ||
| <td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--spacious dc-table__tr--interactive"> | ||
| <td class="dc-table__td" data-col="First Name">Austin</td> | ||
| <td class="dc-table__td" data-col="Last Name">Carpenter</td> | ||
| <td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td> | ||
| </tr> | ||
|
|
||
| <tr class="dc-table__tr dc-table__tr--spacious dc-table__tr--interactive"> | ||
| <td class="dc-table__td" data-col="First Name">Toni</td> | ||
| <td class="dc-table__td" data-col="Last Name">Nichols</td> | ||
| <td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td> | ||
| <td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--error">Error</span></td> | ||
| </tr> | ||
| </tbody> | ||
| </table> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <label class="dc-label" for="optionalInput">Text Input</label> | ||
| <input class="dc-input" type="text" id="optionalInput" placeholder="e. g. give an example"/> | ||
|
|
||
| <label class="dc-label" for="numberInput">Number input</label> | ||
| <input class="dc-input" type="number" id="numberInput" placeholder="e. g. 100"/> | ||
|
|
||
| <label class="dc-label dc-label--required" for="requiredInput">Required Input</label> | ||
| <input class="dc-input" type="text" id="requiredInput" placeholder="e. g. give an example"/> | ||
|
|
||
| <label class="dc-label dc-label--required dc-label--is-error" for="errorInput">Required Input – Error</label> | ||
| <input class="dc-input dc-input--is-error" type="text" id="errorInput" placeholder="e. g. give an example"/> | ||
| <span class="dc--text-error">Please don't leave this empty.</span> | ||
|
|
||
| <label class="dc-label dc-label--disabled" for="disabledInput">Disabled input</label> | ||
| <input class="dc-input dc-input--disabled" type="text" id="disabledInput" placeholder="e. g. give an example" disabled/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| <label class="dc-label" for="textArea">Text area</label> | ||
| <textarea class="dc-textarea" name="textArea" id="" cols="30" rows="5"></textarea> |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Oops, something went wrong.