Skip to content

Commit

Permalink
fix(card): update link to take full width of footer (#3116)
Browse files Browse the repository at this point in the history
  • Loading branch information
engai committed Mar 7, 2018
1 parent 0fa0165 commit 89c6a28
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 11 deletions.
9 changes: 9 additions & 0 deletions ui/components/cards/base/_index.scss
Expand Up @@ -88,6 +88,15 @@
}
}

/**
* @summary Actionable element within card footer
* @selector .slds-card__footer-action
* @restrict .slds-card__footer a
*/
.slds-card__footer-action {
display: block;
}

/**
* Use class if card consumes any form of a tile
*
Expand Down
34 changes: 23 additions & 11 deletions ui/components/cards/base/example.jsx
Expand Up @@ -214,7 +214,7 @@ export let examples = [
</table>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
<a className="slds-card__footer-action" href="javascript:void(0);">
View All <span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
Expand Down Expand Up @@ -276,7 +276,7 @@ export let examples = [
</ul>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
<a className="slds-card__footer-action" href="javascript:void(0);">
View All <span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
Expand All @@ -303,7 +303,10 @@ export let examples = [
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
<a
className="slds-card__footer-action"
href="javascript:void(0);"
>
View All{' '}
<span className="slds-assistive-text">entity type</span>
</a>
Expand All @@ -320,7 +323,10 @@ export let examples = [
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
<a
className="slds-card__footer-action"
href="javascript:void(0);"
>
View All{' '}
<span className="slds-assistive-text">entity type</span>
</a>
Expand All @@ -337,7 +343,10 @@ export let examples = [
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
<a
className="slds-card__footer-action"
href="javascript:void(0);"
>
View All{' '}
<span className="slds-assistive-text">entity type</span>
</a>
Expand All @@ -354,15 +363,18 @@ export let examples = [
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
<a
className="slds-card__footer-action"
href="javascript:void(0);"
>
View All{' '}
<span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
</Card>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
<a className="slds-card__footer-action" href="javascript:void(0);">
View All <span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
Expand Down Expand Up @@ -390,7 +402,7 @@ export let examples = [
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
<a className="slds-card__footer-action" href="javascript:void(0);">
View All <span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
Expand All @@ -406,7 +418,7 @@ export let examples = [
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
<a className="slds-card__footer-action" href="javascript:void(0);">
View All <span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
Expand All @@ -422,7 +434,7 @@ export let examples = [
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
<a className="slds-card__footer-action" href="javascript:void(0);">
View All <span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
Expand All @@ -438,7 +450,7 @@ export let examples = [
</p>
</CardBody>
<CardFooter>
<a href="javascript:void(0);">
<a className="slds-card__footer-action" href="javascript:void(0);">
View All <span className="slds-assistive-text">entity type</span>
</a>
</CardFooter>
Expand Down

0 comments on commit 89c6a28

Please sign in to comment.