# auro-card The `` element provides users a flexible way to convey a summary of information. ### Properties & Attributes | Properties | Attributes | Modifiers | Type | Default | Description | | ---------- | ---------- | --------- | ------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | border | border | | boolean | | Adds desired UI border to the `auro-card` element. | | center | center | | boolean | | Centers content within the scope of the `auro-card`. | | href | href | | string | | Sets the card to function as a hyperlink to the provided href value & disables the default CTA slot. | | rel | rel | | string | | Sets rel attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#rel). | | relative | relative | | boolean | | If true, the auto URL re-write feature will be disabled. [See here for info about hyperlink relative attribute](https://auro.alaskaair.com/components/auro/hyperlink/api#relative). | | role | role | | string | | Sets role attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#role). | | target | target | | string | | Sets target attribute on the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#target). | | variant | variant | | `inset-content` \| `inset-container` \| `inset-stretch` | | Sets the variant of the card. | ### Methods | Name | Parameters | Return | Description | | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- | | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. | ### Slots | Name | Description | | ----------- | ------------------------------------------------- | | cta | Content slot for call-to-action content. | | description | Content slot for string text description content. | | header | Content slot for string text header content. | | image | Content slot for image content. | ### CSS Shadow Parts | Name | Description | | ------------ | ------------------------------------------------------------------------------------------------------------ | | content | Apply styles to the outer string text container. | | cta | Apply styles to the named cta slot container. | | description | Apply styles to the named description slot container. | | header | Apply styles to the named header slot container. | | image | Apply styles to the named image slot container. | | imageWrapper | Apply styles to the outer image slot container. | | link | Apply styles to the [auro-hyperlink](https://auro.alaskaair.com/components/auro/hyperlink/api#link) element. | ## Basic

Display card title here

Context goes here.

More info

Display card title here

Context goes here. Use this area to communicate more information to your users.

More info

Display title

Context goes here.

More info

See code ```html

Display card title here

Context goes here.

More info

Display card title here

Context goes here. Use this area to communicate more information to your users.

More info

Display title

Context goes here.

More info

``` ## Property & Attribute Examples ### Bordered Illustrated below is the `border` attribute. This feature defines a single border around the whole `` element with a pre-defined rounded corner.

Inset Container

Context goes here. Describe the page this card represents.

More info

Inset Content

Context goes here. Describe the page this card represents.

More info

See code ```html

Inset Container

Context goes here. Describe the page this card represents.

More info

Inset Content

Context goes here. Describe the page this card represents.

More info

``` ### Centered Content Text can be centered by assigning the `text-align: center` attribute to the `` element. Similarly, elements within `` can be centered with the `justify-content:center` and/or `align-items:center` attributes to use flexbox to vertically and horizontally center the content within the `` container.

Centered Content

This is centered description content. Also, notice the CTA and image are centered.

More info

Header

Context goes here. Describe the page this card represents.

More info

Card Title

Context goes here. Describe the page this card represents.

More info

See code ```html

Centered Content

This is centered description content. Also, notice the CTA and image are centered.

More info

Header

Context goes here. Describe the page this card represents.

More info

Card Title

Context goes here. Describe the page this card represents.

More info

``` ### Navigation The `` custom element, with its `href` attribute, creates a `` element to web pages, files, email addresses, locations in the same page, or anything else a URL can address. The second example illustrates the accessible icon when using the `target` attribute. Additionally notice the navigation card with the QR code icon. See in this example how the `variant="inset-stretch"` was used to add additional margin spacing to the top and bottom of the content placement in the card.

Header

Context goes here. Describe the page this card represents.

More info

Header

Context goes here. Describe the page this card represents.

More info

Card Title

Context goes here. Describe the page this card represents.

See code ```html

Header

Context goes here. Describe the page this card represents.

More info

Header

Context goes here. Describe the page this card represents.

More info

Card Title

Context goes here. Describe the page this card represents.

``` ### Variants The following examples make use of the `inset-container` or `inset-content` variants. As the name implies, the inset variants will add inner padding either on the whole card or only in the `description` and `cta` content slots.

Inset 'Container'

Context goes here. Describe the page this card represents.

More info

Inset 'Content'

Context goes here. Describe the page this card represents.

More info

See code ```html

Inset 'Container'

Context goes here. Describe the page this card represents.

More info

Inset 'Content'

Context goes here. Describe the page this card represents.

More info

``` ## Common Usage Patterns & Functional Examples ### Complex cards These cards are loosely based on the "Typography" example images from [alaskaair.com](https://alaskaair.com) and serve as a way to show that complex card-like layouts are possible with `` beyond what we show here. Note that this example also uses a `style` tag to set most of the styles - this is to show that you don't have to use inline styles and can generally use whatever styling solution you prefer.

Seattle, WA (SEA) to
Los Angeles (LAX)

Los Angeles is a sprawling Southern California city and the center of the nation's film and television industry.

Book a Flight

Seattle, WA (SEA) to
Los Angeles (LAX)

Los Angeles is a sprawling Southern California city and the center of the nation's film and television industry.

Book a Flight

See code ```html

Seattle, WA (SEA) to
Los Angeles (LAX)

Los Angeles is a sprawling Southern California city and the center of the nation's film and television industry.

Book a Flight

Seattle, WA (SEA) to
Los Angeles (LAX)

Los Angeles is a sprawling Southern California city and the center of the nation's film and television industry.

Book a Flight

``` ## Restyle Component with CSS Variables The component may be restyled by changing the values of the following token(s). ```scss :host { --ds-auro-card-border-color: transparent; --ds-auro-card-background-color: transparent; --ds-auro-card-texticon-color: inherit; } ```