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.

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

Content/code marks #494

Draft
wants to merge 1 commit into
base: astro-docs
Choose a base branch
from
Draft
Changes from all commits
Commits
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
chore: add example code marks
andij committed Mar 8, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit ca2a68b9c61d5113c43a5a8419762331907a5868
6 changes: 3 additions & 3 deletions src/content/docs/components/ns-card.mdx
Original file line number Diff line number Diff line change
@@ -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>
@@ -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>
@@ -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">