dibk-design 0.4.45 → 0.4.46

package/dist/components/CheckBoxInput.md

@@ -1,58 +1,58 @@
-Checkbox input example:
-
-```js
-<div className="flex">
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-1" checked={true}>
-  <span>Label for checked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-2" checked={true} disabled={true}>
-  <span>Label for checked disabled checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-3">
-  <span>Label for unchecked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-4" checked={true} contentOnly={true}>
-  <span>Checked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-5" contentOnly={true}>
-  <span>Unchecked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-6" checked={true} checkmarkCharacter="✕">
-  <span>Label for checked checkbox with custom checkmark</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-7" checked={true} checkmarkCharacter="✕" expandable={true}>
-  <span>Label for checkbox with aria-expanded true</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-8" checked={false} checkmarkCharacter="✕" expandable={true}>
-  <span>Label for checkbox with aria-expanded false</span>
-</CheckBoxInput>
-
-</div>
-```
-
-
-Themed Checkbox input example:
-
-```js
-import customTheme from 'data/customTheme';
-<div className="flex">
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-1" checked={true} theme={customTheme}>
-  <span>Label for checked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-2" checked={true} disabled={true} theme={customTheme}>
-  <span>Label for checked disabled checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-3" theme={customTheme}>
-  <span>Label for unchecked checkbox</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-4" checked={true} contentOnly={true} theme={customTheme}>
-  <span>Checked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-5" contentOnly={true} theme={customTheme}>
-  <span>Unchecked checkbox with content only</span>
-</CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="themed-checkBoxInput-6" checked={true} checkmarkCharacter="✕" theme={customTheme}>
-  <span>Label for checked checkbox with custom checkmark</span>
-</CheckBoxInput>
-</div>
-```
+Checkbox input example:
+
+```js
+<div className="flex">
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-1" checked={true}>
+  <span>Label for checked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-2" checked={true} disabled={true}>
+  <span>Label for checked disabled checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-3">
+  <span>Label for unchecked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-4" checked={true} contentOnly={true}>
+  <span>Checked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-5" contentOnly={true}>
+  <span>Unchecked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-6" checked={true} checkmarkCharacter="✕">
+  <span>Label for checked checkbox with custom checkmark</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-7" checked={true} checkmarkCharacter="✕" expandable={true}>
+  <span>Label for checkbox with aria-expanded true</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-8" checked={false} checkmarkCharacter="✕" expandable={true}>
+  <span>Label for checkbox with aria-expanded false</span>
+</CheckBoxInput>
+
+</div>
+```
+
+
+Themed Checkbox input example:
+
+```js
+import customTheme from 'data/customTheme';
+<div className="flex">
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-1" checked={true} theme={customTheme}>
+  <span>Label for checked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-2" checked={true} disabled={true} theme={customTheme}>
+  <span>Label for checked disabled checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-3" theme={customTheme}>
+  <span>Label for unchecked checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-4" checked={true} contentOnly={true} theme={customTheme}>
+  <span>Checked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-5" contentOnly={true} theme={customTheme}>
+  <span>Unchecked checkbox with content only</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="themed-checkBoxInput-6" checked={true} checkmarkCharacter="✕" theme={customTheme}>
+  <span>Label for checked checkbox with custom checkmark</span>
+</CheckBoxInput>
+</div>
+```

package/dist/components/CheckBoxInput.module.scss

@@ -1,24 +1,24 @@
-@import "../style/global.scss";
-
-:local(.checkBoxInput) {
-  display: flex;
-  margin-right: 1em;
-
-  &:not(:local(.contentOnly)):not(:local(.disabled)) {
-    cursor: pointer;
-    input {
-      cursor: pointer;
-    }
-  }
-
-  &:local(.hasErrors) {
-    span {
-      color: #9d2024;
-    }
-  }
-
-  input[type="checkbox"] {
-    opacity: 0;
-    position: absolute;
-  }
-}
+@import "../style/global.scss";
+
+:local(.checkBoxInput) {
+  display: flex;
+  margin-right: 1em;
+
+  &:not(:local(.contentOnly)):not(:local(.disabled)) {
+    cursor: pointer;
+    input {
+      cursor: pointer;
+    }
+  }
+
+  &:local(.hasErrors) {
+    span {
+      color: #9d2024;
+    }
+  }
+
+  input[type="checkbox"] {
+    opacity: 0;
+    position: absolute;
+  }
+}

package/dist/components/CheckBoxListItem.md

@@ -1,82 +1,82 @@
-Check box list item example:
-
-```js
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-1">
-  Label for checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-2">
-  Label for unchecked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-3" contentOnly={true}>
-  Label for checked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-4" contentOnly={true}>
-  Label for unchecked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-5" checkmarkCharacter="✕">
-  Label for checked checkbox with custom checkmark
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-6" disabled={true}>
-  Label for disabled checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-7" disabled={true}>
-  Label for disabled unchecked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-8" checkmarkCharacter="✕" disabled={true}>
-  Label for disabled checked checkbox with custom checkmark
-</CheckBoxListItem>
-```
-
-Compact check box list item example:
-
-```js
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-1" compact>
-  Label for checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-2" compact>
-  Label for unchecked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-3" contentOnly={true} compact>
-  Label for checked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-4" contentOnly={true} compact>
-  Label for unchecked checkbox with content only
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-5" compact hasErrors>
-  Label for checked checkbox with error
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-6" compact hasErrors>
-  Label for unchecked checkbox with error
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-7" compact checkmarkCharacter="✕">
-  Label for checked checkbox with custom checkmark
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-8" compact disabled={true}>
-  Label for disabled checked checkbox
-</CheckBoxListItem>
-<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-9" compact hasErrors disabled={true}>
-  Label for disabled checked checkbox with error
-</CheckBoxListItem>
-```
-
-Themed Check box list item example:
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-1" theme={customTheme}>
-    Label for checked checkbox
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-2" theme={customTheme}>
-    Label for unchecked checkbox
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-3" contentOnly={true} theme={customTheme}>
-    Label for checked checkbox with content only
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-4" contentOnly={true} theme={customTheme}>
-    Label for unchecked checkbox with content only
-  </CheckBoxListItem>
-  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-5" checkmarkCharacter="✕" theme={customTheme}>
-    Label for checked checkbox with custom checkmark
-  </CheckBoxListItem>
-</React.Fragment>
-```
+Check box list item example:
+
+```js
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-1">
+  Label for checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-2">
+  Label for unchecked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-3" contentOnly={true}>
+  Label for checked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-4" contentOnly={true}>
+  Label for unchecked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-5" checkmarkCharacter="✕">
+  Label for checked checkbox with custom checkmark
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-6" disabled={true}>
+  Label for disabled checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="checkboxListItem-7" disabled={true}>
+  Label for disabled unchecked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="checkboxListItem-8" checkmarkCharacter="✕" disabled={true}>
+  Label for disabled checked checkbox with custom checkmark
+</CheckBoxListItem>
+```
+
+Compact check box list item example:
+
+```js
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-1" compact>
+  Label for checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-2" compact>
+  Label for unchecked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-3" contentOnly={true} compact>
+  Label for checked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-4" contentOnly={true} compact>
+  Label for unchecked checkbox with content only
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-5" compact hasErrors>
+  Label for checked checkbox with error
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-6" compact hasErrors>
+  Label for unchecked checkbox with error
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-7" compact checkmarkCharacter="✕">
+  Label for checked checkbox with custom checkmark
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-8" compact disabled={true}>
+  Label for disabled checked checkbox
+</CheckBoxListItem>
+<CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-9" compact hasErrors disabled={true}>
+  Label for disabled checked checkbox with error
+</CheckBoxListItem>
+```
+
+Themed Check box list item example:
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-1" theme={customTheme}>
+    Label for checked checkbox
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-2" theme={customTheme}>
+    Label for unchecked checkbox
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-3" contentOnly={true} theme={customTheme}>
+    Label for checked checkbox with content only
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkboxListItem-4" contentOnly={true} theme={customTheme}>
+    Label for unchecked checkbox with content only
+  </CheckBoxListItem>
+  <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="themed-checkbox" id="themed-checkboxListItem-5" checkmarkCharacter="✕" theme={customTheme}>
+    Label for checked checkbox with custom checkmark
+  </CheckBoxListItem>
+</React.Fragment>
+```

package/dist/components/CheckBoxListItem.module.scss

@@ -1,71 +1,71 @@
-@import "../style/global.scss";
-
-:local(.checkBoxListItem) {
-  @include box-sizing(content-box);
-  @include border-radius(5px);
-  @include transition(all 0.1s ease-in-out);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  cursor: pointer;
-  font-family: $default-font;
-  position: relative;
-  font-size: 17px;
-  color: #000;
-
-  &:not(:local(.contentOnly)):not(:local(.compact)) {
-    @include box-shadow(0 0 2px $color-dark-blue);
-    background: white;
-    margin-bottom: 10px;
-  }
-
-  &:local(.contentOnly) {
-    cursor: auto;
-    label {
-      cursor: auto;
-      padding: 5px 10px;
-    }
-  }
-
-  &:local(.disabled) {
-    label {
-      cursor: auto;
-    }
-  }
-
-  &:local(.checked):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)) {
-    @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
-  }
-
-  &:not(:local(.checked)):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)):hover {
-    @include box-shadow(0 0 6px $color-dark-blue);
-  }
-
-  &:focus {
-    outline-color: #54acb8;
-  }
-
-  label {
-    width: 100%;
-    padding: 10px;
-    margin: 0;
-    cursor: pointer;
-  }
-
-  &:local(.compact) {
-    display: table;
-    label {
-      padding: 6px 4px;
-    }
-  }
-
-  input[type="checkbox"] {
-    opacity: 0;
-    position: absolute;
-  }
-}
+@import "../style/global.scss";
+
+:local(.checkBoxListItem) {
+  @include box-sizing(content-box);
+  @include border-radius(5px);
+  @include transition(all 0.1s ease-in-out);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: pointer;
+  font-family: $default-font;
+  position: relative;
+  font-size: 17px;
+  color: #000;
+
+  &:not(:local(.contentOnly)):not(:local(.compact)) {
+    @include box-shadow(0 0 2px $color-dark-blue);
+    background: white;
+    margin-bottom: 10px;
+  }
+
+  &:local(.contentOnly) {
+    cursor: auto;
+    label {
+      cursor: auto;
+      padding: 5px 10px;
+    }
+  }
+
+  &:local(.disabled) {
+    label {
+      cursor: auto;
+    }
+  }
+
+  &:local(.checked):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)) {
+    @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
+  }
+
+  &:not(:local(.checked)):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)):hover {
+    @include box-shadow(0 0 6px $color-dark-blue);
+  }
+
+  &:focus {
+    outline-color: #54acb8;
+  }
+
+  label {
+    width: 100%;
+    padding: 10px;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  &:local(.compact) {
+    display: table;
+    label {
+      padding: 6px 4px;
+    }
+  }
+
+  input[type="checkbox"] {
+    opacity: 0;
+    position: absolute;
+  }
+}

package/dist/components/ContentBox.md

@@ -1,46 +1,46 @@
-ContentBoxes without title example:
-
-```js
-<ContentBox content="Box with default color" color="default" />
-<ContentBox content="Box with primary color" color="primary" />
-<ContentBox content="Box with success color" color="success" />
-<ContentBox content="Box with warning color" color="warning" />
-<ContentBox content="Box with info color" color="info" />
-<ContentBox content="Box with light cyan color" color="lightCyan" />
-<ContentBox content="Box with orange color" color="orange" />
-<ContentBox content="Box with light orange color" color="lightOrange" />
-<ContentBox content="Box with lime color" color="lime" />
-<ContentBox content="Box with light lime color" color="lightLime" />
-
-```
-
-ContentBoxes with title and href example:
-
-```js
-<ContentBox content="Box with default color" href="#" color="default" title="Box title" />
-<ContentBox content="Box with primary color" href="#" color="primary" title="Box title" />
-<ContentBox content="Box with success color" href="#" color="success" title="Box title" />
-<ContentBox content="Box with warning color" href="#" color="warning" title="Box title" />
-<ContentBox content="Box with info color" href="#" color="info" title="Box title" />
-<ContentBox content="Box with light cyan color" href="#" color="lightCyan" title="Box title" />
-<ContentBox content="Box with orange color" href="#" color="orange" title="Box title" />
-<ContentBox content="Box with light orange color" href="#" color="lightOrange" title="Box title" />
-<ContentBox content="Box with lime color" href="#" color="lime" title="Box title" />
-<ContentBox content="Box with light lime color" href="#" color="lightLime" title="Box title" />
-
-```
-
-ContentBoxes with large title:
-
-```js
-<ContentBox content="Box with default color" color="default" title="Box title" titleSize="large" />
-<ContentBox content="Box with primary color" color="primary" title="Box title" titleSize="large" />
-<ContentBox content="Box with success color" color="success" title="Box title" titleSize="large" />
-<ContentBox content="Box with warning color" color="warning" title="Box title" titleSize="large" />
-<ContentBox content="Box with info color" color="info" title="Box title" titleSize="large" />
-<ContentBox content="Box with light cyan color" color="lightCyan" title="Box title" titleSize="large" />
-<ContentBox content="Box with orange color" color="orange" title="Box title" titleSize="large" />
-<ContentBox content="Box with light orange color" color="lightOrange" title="Box title" titleSize="large" />
-<ContentBox content="Box with lime color" color="lime" title="Box title" titleSize="large" />
-<ContentBox content="Box with light lime color" color="lightLime" title="Box title" titleSize="large" />
-```
+ContentBoxes without title example:
+
+```js
+<ContentBox content="Box with default color" color="default" />
+<ContentBox content="Box with primary color" color="primary" />
+<ContentBox content="Box with success color" color="success" />
+<ContentBox content="Box with warning color" color="warning" />
+<ContentBox content="Box with info color" color="info" />
+<ContentBox content="Box with light cyan color" color="lightCyan" />
+<ContentBox content="Box with orange color" color="orange" />
+<ContentBox content="Box with light orange color" color="lightOrange" />
+<ContentBox content="Box with lime color" color="lime" />
+<ContentBox content="Box with light lime color" color="lightLime" />
+
+```
+
+ContentBoxes with title and href example:
+
+```js
+<ContentBox content="Box with default color" href="#" color="default" title="Box title" />
+<ContentBox content="Box with primary color" href="#" color="primary" title="Box title" />
+<ContentBox content="Box with success color" href="#" color="success" title="Box title" />
+<ContentBox content="Box with warning color" href="#" color="warning" title="Box title" />
+<ContentBox content="Box with info color" href="#" color="info" title="Box title" />
+<ContentBox content="Box with light cyan color" href="#" color="lightCyan" title="Box title" />
+<ContentBox content="Box with orange color" href="#" color="orange" title="Box title" />
+<ContentBox content="Box with light orange color" href="#" color="lightOrange" title="Box title" />
+<ContentBox content="Box with lime color" href="#" color="lime" title="Box title" />
+<ContentBox content="Box with light lime color" href="#" color="lightLime" title="Box title" />
+
+```
+
+ContentBoxes with large title:
+
+```js
+<ContentBox content="Box with default color" color="default" title="Box title" titleSize="large" />
+<ContentBox content="Box with primary color" color="primary" title="Box title" titleSize="large" />
+<ContentBox content="Box with success color" color="success" title="Box title" titleSize="large" />
+<ContentBox content="Box with warning color" color="warning" title="Box title" titleSize="large" />
+<ContentBox content="Box with info color" color="info" title="Box title" titleSize="large" />
+<ContentBox content="Box with light cyan color" color="lightCyan" title="Box title" titleSize="large" />
+<ContentBox content="Box with orange color" color="orange" title="Box title" titleSize="large" />
+<ContentBox content="Box with light orange color" color="lightOrange" title="Box title" titleSize="large" />
+<ContentBox content="Box with lime color" color="lime" title="Box title" titleSize="large" />
+<ContentBox content="Box with light lime color" color="lightLime" title="Box title" titleSize="large" />
+```