Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Content/code marks #494

Draft
wants to merge 1 commit into
base: astro-docs
Choose a base branch
from
Draft

Content/code marks #494

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/content/docs/components/ns-card.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ Cards are to be used to apply a container around a related grouping of informati

#### `slot="action"`

```html
```html {4-6}
<ns-card type="support" decoration="bulb">
<h3 slot="heading">Get energy with us</h3>
<p slot="paragraph">We've got a tariff to suit every home and family.</p>
Expand All @@ -137,7 +137,7 @@ If you have a group of cards, try to make sure that the pill is placed in the sa

##### Screen readers with ns-pill

```html
```html {3}
<ns-card>
<h3 slot="heading">
<ns-pill>Special Offer</ns-pill>
Expand All @@ -153,7 +153,7 @@ In the above example the screen reader will read out "Special Offer Get energy w

If using with a type of `support` with an image. There is also the option to place the pill over the image using the `pillOverImage` attribute. Note the `ns-pill` will need to be in the `paragraph` slot as it is no longer related to the heading.

```html
```html {4} "pillOverImage"
<ns-card type="support" image="path/to/image" pillOverImage>
<h3 slot="heading">Get energy with us</h3>
<p slot="paragraph">
Expand Down