Skip to content

Commit

Permalink
docs: update content
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrholek
mrholek committed Mar 22, 2024
1 parent ef6acab commit e526efd
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 53 deletions.
56 changes: 28 additions & 28 deletions packages/docs/components/card.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
:::
Expand All @@ -34,7 +34,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
```
Expand Down Expand Up @@ -226,7 +226,7 @@ Add an optional header and/or footer within a card.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
:::
Expand All @@ -236,7 +236,7 @@ Add an optional header and/or footer within a card.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
```
Expand All @@ -249,7 +249,7 @@ Card headers can be styled by adding ex. `as="h5"`.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
:::
Expand All @@ -259,7 +259,7 @@ Card headers can be styled by adding ex. `as="h5"`.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
```
Expand Down Expand Up @@ -293,7 +293,7 @@ Card headers can be styled by adding ex. `as="h5"`.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
<CCardFooter class="text-body-secondary">2 days ago</CCardFooter>
</CCard>
Expand All @@ -304,7 +304,7 @@ Card headers can be styled by adding ex. `as="h5"`.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
<CCardFooter class="text-body-secondary">2 days ago</CCardFooter>
</CCard>
Expand All @@ -325,7 +325,7 @@ Using the grid, wrap cards in columns and rows as needed.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</CCol>
Expand All @@ -334,7 +334,7 @@ Using the grid, wrap cards in columns and rows as needed.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</CCol>
Expand All @@ -347,7 +347,7 @@ Using the grid, wrap cards in columns and rows as needed.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</CCol>
Expand All @@ -356,7 +356,7 @@ Using the grid, wrap cards in columns and rows as needed.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
</CCol>
Expand All @@ -372,14 +372,14 @@ Use some of [available sizing utilities](https://coreui.io/docs/utilities/sizing
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
<CCard class="w-50">
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
:::
Expand All @@ -388,14 +388,14 @@ Use some of [available sizing utilities](https://coreui.io/docs/utilities/sizing
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
<CCard class="w-50">
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
```
Expand All @@ -409,7 +409,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
:::
Expand All @@ -418,7 +418,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
```
Expand All @@ -432,21 +432,21 @@ You can instantly change the text arrangement of any card—in its whole or spec
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
<CCard class="text-center" style="width: 18rem">
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
<CCard class="text-end" style="width: 18rem">
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
:::
Expand All @@ -455,21 +455,21 @@ You can instantly change the text arrangement of any card—in its whole or spec
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
<CCard class="text-center" style="width: 18rem">
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
<CCard class="text-end" style="width: 18rem">
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
```
Expand Down Expand Up @@ -510,7 +510,7 @@ Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
:::
Expand Down Expand Up @@ -546,7 +546,7 @@ Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
```
Expand Down Expand Up @@ -583,7 +583,7 @@ Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
:::
Expand Down Expand Up @@ -619,7 +619,7 @@ Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
<CCardBody>
<CCardTitle>Special title treatment</CCardTitle>
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
<CButton href="#">Go somewhere</CButton>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
```
Expand Down
10 changes: 5 additions & 5 deletions packages/docs/components/dropdown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -578,7 +578,7 @@ Add a header to label sections of actions in any dropdown menu.
In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.

::: demo
<div class="border rounded py-2">
<div class="dropdown-menu">
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
Expand All @@ -597,7 +597,7 @@ Separate groups of related menu items with a divider.
In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDropdownMenu>` content.

::: demo
<div class="border rounded py-2">
<div class="dropdown-menu">
<CDropdownItem href="#">Action</CDropdownItem>
<CDropdownItem href="#">Another action</CDropdownItem>
<CDropdownItem href="#">Something else here</CDropdownItem>
Expand Down Expand Up @@ -640,7 +640,7 @@ Place any freeform text within a dropdown menu with text. Note that you'll likel
Put a form within a dropdown menu, or make it into a dropdown menu.

::: demo
<div class="border rounded py-2">
<div class="dropdown-menu">
<CForm class="px-4 py-4">
<div class="mb-3">
<CFormLabel for="exampleDropdownFormEmail1">Email address</CFormLabel>
Expand All @@ -653,7 +653,7 @@ Put a form within a dropdown menu, or make it into a dropdown menu.
<div class="mb-3">
<CFormCheck id="dropdownCheck" label="Remember me"/>
</div>
<CButton type="submit">Sign in</CButton>
<CButton color="primary" type="submit">Sign in</CButton>
</CForm>
<CDropdownDivider/>
<CDropdownItem href="#">New around here? Sign up</CDropdownItem>
Expand All @@ -673,7 +673,7 @@ Put a form within a dropdown menu, or make it into a dropdown menu.
<div class="mb-3">
<CFormCheck id="dropdownCheck" label="Remember me"/>
</div>
<CButton type="submit">Sign in</CButton>
<CButton color="primary" type="submit">Sign in</CButton>
</CForm>
<CDropdownDivider/>
<CDropdownItem href="#">New around here? Sign up</CDropdownItem>
Expand Down
16 changes: 8 additions & 8 deletions packages/docs/components/spinner.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,38 +101,38 @@ Add `size="sm"`property` to make a smaller spinner that can quickly be used with
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

::: demo
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner as="span" size="sm" aria-hidden="true"/>
</CButton>
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner as="span" size="sm" aria-hidden="true"/>
Loading...
</CButton>
:::
```vue
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner as="span" size="sm" aria-hidden="true"/>
</CButton>
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner as="span" size="sm" aria-hidden="true"/>
Loading...
</CButton>
```

::: demo
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
</CButton>
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
Loading...
</CButton>
:::
```vue
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
</CButton>
<CButton disabled>
<CButton color="primary" disabled>
<CSpinner as="span" size="sm" variant="grow" aria-hidden="true"/>
Loading...
</CButton>
Expand Down
Loading

0 comments on commit e526efd

Please sign in to comment.